js---26组合模式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script type=text/javascript charset=utf-8 src=../commons/CommonUtil.js ></script>
        <script>

            // 组合模式
            /*
             * 场景模拟:
             *  -> 公司
             *            -> 财务部门
             *                        -> 张一
             *                        -> 张二
             *                        -> 张三
             *            -> 销售部门
             *                        -> 张四
             *                        -> 张五
             *                        -> 张六
             *
             *        实际的任务具体是落实到人上去实施的 也就是说只有人才具有具体的方法实现
             *
             */            

             var Org = function(name){
                  this.name = name ;
                 this.depts = [] ;
             };
             Org.prototype = {
                 constructor:Org ,
                addDepts:function(child){//形参不写数据类型
                    this.depts.push(child);//this一般指的是Org对象
                    return this ;
                } ,
                getDepts:function(){
                    return this.depts;
                }
             };

             var Dept = function(name){
                  this.name = name ;
                 this.persons = [] ;
             };
             Dept.prototype = {
                 constructor:Dept ,
                addPersons: function(child){
                    this.persons.push(child);
                    return this ;
                } ,
                getPersons:function(){
                    return this.persons;
                }
             };

             var Person = function(name){
                  this.name = name ;
             };
             Person.prototype = {
                 constructor : Person ,
                hardworking : function(){
                    document.write(this.name + ‘...努力工作!‘);
                } ,
                sleeping : function(){
                    document.write(this.name + ‘...努力睡觉!‘);
                }
             };

             var p1 = new Person(‘张1‘);
             var p2 = new Person(‘张2‘);
             var p3 = new Person(‘张3‘);
             var p4 = new Person(‘张4‘);
             var p5 = new Person(‘张5‘);
             var p6 = new Person(‘张6‘);

             var dept1 = new Dept(‘开发部门‘);
             dept1.addPersons(p1).addPersons(p2).addPersons(p3);
             var dept2 = new Dept(‘销售部门‘);
             dept2.addPersons(p4).addPersons(p5).addPersons(p6);

             var org = new Org(‘bjsxt‘);
             org.addDepts(dept1).addDepts(dept2);

             // 需求: 具体的让一个人(张3)去努力工作
             //org.getDepts()
             org.hardworking(‘开发部门‘);
             for(var i = 0 ,depts = org.getDepts(); i<depts.length;i++ ){//for循环中也不写数据类型
                    for(var j = 0 ,persons = depts[i].getPersons(); j < persons.length ; j++){
                        if(persons[j].name === ‘张6‘){
                            persons[j].hardworking();
                        }
                    }
             }

        </script>
    </head>
    <body>
    </body>
</html>
时间: 2024-11-10 10:53:58

js---26组合模式的相关文章

js设计模式-组合模式

组合模式是一种专为创建web上的动态用户界面而量身定制的模式.使用这种模式,可以用一条命令在多个对象上激发复杂的或递归的行为.这可以简化粘合性代码,使其更容易维护,而那些复杂行为则被委托给各个对象. 组合模式实例:图片库 1 /** 2 * 图片库 3 */ 4 var Composite = new Interface("Composite",["add","remove","getChild"]); 5 var Galle

[js高手之路]设计模式系列课程-组合模式+寄生组合继承实战新闻列表

所谓组合模式,就是把一堆结构分解出来,组成在一起,现实中很多这样的例子,如: 1.肯德基套餐就是一种组合模式, 比如鸡腿堡套餐,一般是是由一个鸡腿堡,一包薯条,一杯可乐等组成的 2.组装的台式机同理,由主板,电源,内存条,显卡, 机箱,显示器,外设等组成的 把一个成型的产品组成部件,分成一个个独立的部件,这种方式可以做出很多灵活的产品,这就是组合模式的优势 比如:家用台式机电脑,要求配置比较低, 这个时候只需要主板+电源+内存条+机箱+显示器+外设就可以了,不需要配置独立显卡 鸡腿堡+鸡翅+紫薯

JS 组合模式

/** * 组合模式应用的场景和特点: * 场景: * 1 存在一批组织成某种层次体系的对象 * 2 希望对这批对象或其中的一部分对象实施一个操作 * * 应用特点: * 1 组合模式中只有两种类型对象:组合对象.叶子对象 * 2 这两种类型都实现同一批接口 * 3 一般我们会在组合对象中调用其方法并隐式调用"下级对象"的方法(这里我们一般采用递归的形式去做) * */ /* * 场景模拟: * -> 公司 * -> 北京分公司 * -> 财务部门 * -> 张

JS学习十九天----组合模式

组合模式 前言 我今天又看了一下我自己写的博客,排版咋能这么丑?还能再丑一点吗?!我看了看我同学的排版,那叫一个漂亮啊,我想起来了一句诗:排版写得好,老公回家早!这几天我在修改我的排版,如果大家有什么意见,欢迎来稿!谢谢. 正文 组合模式:把多个对象组成树状结构来表示局部与整体,使得用户可以一样的对待单个对象和对象的组合. 1.可以以相同的方法处理对象的集合与其中的特定子对象.组合对象与组合该对象的对象可实现同一批操作.对组合(Composite)对象执行的操作过程将向下传递到所有的组成对象,使

js架构设计模式——你对MVC、MVP、MVVM 三种组合模式分别有什么样的理解?

你对MVC.MVP.MVVM 三种组合模式分别有什么样的理解? MVC(Model-View-Controller)MVP(Model-View-Presenter)MVVM(Model-View-ViewModel)请大家谈一谈各自的理解吧,对比之下更能明确特征和适用的范围,菜鸟们畅所欲言,老鸟大牛们请多多指点! 2 条评论 按投票排序 按时间排序 10 个回答 王韦恩卑鄙,我编程序,我约. 知乎用户.里德.jogen 等人赞同 只是一点浅见啊 折叠也活该... M-V- X 本质都是一样的

【JS 设计模式 】用组合模式来实现树形导航--代码结构思路分析(一)

树导航效果图: 组合模式的描述: 将对象组合成树形结构以表示"部分-整体"的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性. 我们把部分用Leaf表示, 把整体用Composite表示.组合模式是有一定规律的,在实现树导航的情况下,Composite需要包含一个以上Leaf,也可以包含一个以上Leaf和一个以Composite,为什么说要包含一个以上的,如果Composite不包含任何子child的话那么它就是Leaf,Leaf表示是最后一层结节. 树形导航代码片段:

【JS 设计模式 】用组合模式来实现树形导航--JS代码结构思路分析(二)

[JS 设计模式 ]用组合模式来实现树形导航--代码结构思路分析(一) 根据上一节中的HTML代码结构我们通过JS来渲染HTML代码,我们先提供一下JS的代码片段,这代码代码不是一个完整的代码是经过简化的.通过JS代码来分析如何组装HTML的 Composite类型的代码: function TreeComposite(id, name, total, level, last) { var root = document.createDocumentFragment(); var panel =

JS设计模式(7)组合模式

什么是组合模式? 定义:1.将对象组合成树形结构以表示"部分-整体"的层次结构.2.组合模式使得用户对单个对象和组合对象的使用具有一致性.3.无须关心对象有多少层,调用时只需在根部进行调用; 主要解决:它在我们树型结构的问题中,模糊了简单元素和复杂元素的概念,客户程序可以向处理简单元素一样来处理复杂元素,从而使得客户程序与复杂元素的内部结构解耦. 何时使用: 1.您想表示对象的部分-整体层次结构(树形结构). 2.您希望用户忽略组合对象与单个对象的不同,用户将统一地使用组合结构中的所有

JS常用的设计模式(13)——组合模式

组合模式又叫部分-整体模式,它将所有对象组合成树形结构.使得用户只需要操作最上层的接口,就可以对所有成员做相同的操作. 一个再好不过的例子就是jquery对象,大家都知道1个jquery对象其实是一组对象集合.比如在这样一个HTML页面 <div> <span></span> <span></span> </div> 我们想取消所有节点上绑定的事件, 需要这样写 var allNodes = document.getElementsB

组合模式(Composite)

一.组合模式介绍 组合模式:将对象组合成树形结构以表示:部分--整体 的层次结构.组合模式使得用户对单个对象和组合对象的使用具有一致性. java中的组合是指:在A类里定义一个B类的引用,A拥有了B,叫组合.只是单纯的组合而已,而不是一种设计模式. 组合和组合模式不是一回事! 基本上见到的树形结构都使用到了组合模式. 组合模式结构图: 组合模式中有几个核心的部分: Leaf(叶子):表示该节点下面没有其他子节点了,就称为叶子 Compostie(容器构件):容器构件,该节点下还有其他子节点,理解