听飞狐聊JavaScript设计模式系列12

本回内容介绍

上一回,聊了桥接模式,做了一道计算题;介一回,聊组合模式(Composite),官方描述组合模式将对象组合成树形结构以表示“部分-整体”的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性。

组合模式特性

这里我理了一下,就组合模式的特性而言:
1,组合模式把对象分为组合对象和叶子对象两种。
2,组合对象和叶子对象实现同一批操作。
3,对组合对象执行的操作可以向下传递到叶子节点进行操作。
这样做带来的好处
1,解耦,弱化类与类之间的耦合,同样的方法得到抽离处理组合对象和叶子对象;
2,把对象组合成属性结构的对象。
这个也是我在网上看了很多描述后做的总结。这里先看一下,然后看例子,看完例子再来看总结,应该会更有心得,来吧,开始咯。

1.组合模式

这里需要用到之前写过的接口类,不清楚的童鞋看看前面聊过的系列05,这里模拟一个导航菜单,如京东的一级导航,二级导航,三级导航,代码如下:

var d = document;
// 定义组合接口
var CompositeInterface = new Interface('CompositeInterface',['addChild','getChild','href']);
// 定义叶子接口
var LeafInterface = new Interface('LeafInterface',['href']);
// 定义组合类,并定义名字,类型,子集
var Composite = function(name){
    this.name = name;
    this.type = 'Composite';
    this.children = [];
}
// 组合类的方法实现
Composite.prototype = {
    // 之前说过很多次的,还原指针
    constructor:Composite,
    // 添加子集
    addChild:function(child){
        this.children.push(child);
        return this;
    },
    // 获取子集,这里是组合模式的关键
    getChild:function(name){
        // 定义一个结果数组
        var el = [];
        // 添加叶子对象的方法
        var addLeaf = function(item){
            // 判断传入的类型为组合对象的情况
            if(item.type==="Composite"){
                // 如果为组合对象说明还有下一级,则递归,还记得forEach函数吧,系列01讲过的,不清楚的回过头去看看再回忆一下,这里的arguments.callee是指向函数本身的指针
                item.children.forEach(arguments.callee);
            // 判断如果为叶子对象,则直接添加到结果集
            }else if(item.type==="Leaf"){
                el.push(item);
            }        
        };
        // 判断传入的导航节点是否存在,并且是否等于当前的节点
        if(name&&this.name!==name){
            // 遍历没什么好说的
            this.children.forEach(function(item){
                // 判断传入节点为当前节点并且为组合对象则递归
                if(item.name === name&&item.type === 'Composite'){
                    item.children.forEach(addLeaf);
                }
                // 传入的节点非当前节点并且是组合对象则递归
                if(item.name !== name&&item.type === 'Composite'){
                    item.children.forEach(arguments.callee);
                }
                // 传入的类型如果是叶子对象,正好是调用的节点,则直接添加到结果集
                if(item.name === name&&item.type === 'Leaf'){
                    el.push(item);
                }
            });
        // 这里是不传参,或者不等于当前节点的情况
        }else{
            // 这里的递归同上
            this.children.forEach(addLeaf);
        }
        return el;
    },
    // 跳转的方法
    href:function(name){
        // 获取叶子对象
        var leaves = this.getChild(name);
        // 遍历并执行叶子对象的跳转
        for(var i=0;i<leaves.length;i++){
            leaves[i].href();
        }
    }
};
// 定义叶子类,并定义名字,类型,子集
var Leaf = function(name){
    this.name = name;
    this.type = 'Leaf';        
}
// 定义叶子类的方法
Leaf.prototype = {
    constructor:Leaf,
    // 这里就简单写入名字当模拟跳转了
    href:function(name){
        d.write(this.name+"</br>");
    }
};

代码量太多,还是把测试部分代码分开,如下:

// 以下是测试的代码
var n1 = new Leaf("三级导航1");
var n2 = new Leaf("三级导航2");
var n3 = new Leaf("三级导航3");
var n4 = new Leaf("三级导航4");
var n5 = new Leaf("三级导航5");
var n6 = new Leaf("三级导航6");
// 写一个二级导航1,把前三个放入二级导航1
var nav1 = new Composite("二级导航1");
nav1.addChild(n1);
nav1.addChild(n2);
nav1.addChild(n3);
// 写一个二级导航2,把后三个放入二级导航2
var nav2 = new Composite("二级导航2");
nav2.addChild(n4);
nav2.addChild(n5);
nav2.addChild(n6);
// 写一个一级导航,把两个二级导航放入一级导航
var nav = new Composite();
nav.addChild(nav1);
nav.addChild(nav2);
// 这里不传则返回全部
nav.href("二级导航1");    // 返回三级导航1,三级导航2,三级导航3

作为第一个例子,为了便于大家理解,我基本把注释都写完了,把一下叶子对象的方法省去了,只写了一个方法,更直观方便理解。下一个例子用一个图片库来演示,走你。

2. 组合模式之图片库

图片库可以有选择地隐藏或显示图片库的全部或某一部分(单独的或是部分的)。同上面一个例子一样,一个组合类做库、一个叶子类则是图片本身,如下:

<div id="main"></div>
var d = document;
// 检查组合对象Composite应该具备的方法
var Composite     = new Interface('Composite',['add','remove','getChild']);
// 检查组合对象GalleryItem应该具备的方法
var GalleryItem = new Interface('GalleryItem',['hide','show']); 
// 实现Composite,GalleryItem组合对象类            
var DynamicGallery = function(id){             
    // 定义子集
    this.children = [];
    // 创建dom元素
    this.el       = d.createElement('div');
    // 这个id跟上面个例子的name是一样的,传入名
    this.el.id       = id;
    // 这个className跟上面例子的type是一样的,区分层级
    this.el.className = 'imageLib';
}
// 组合类的方法实现
DynamicGallery.prototype = {
    constructor:DynamicGallery,
    //  实现Composite组合对象接口
    add : function(child){
        // 检测接口
        Interface.ensureImplements(child,Composite,GalleryItem);
        // 添加元素
        this.children.push(child);
        // 添加元素到末尾的方法appendChild,不清楚的童鞋在网上搜搜哈
        this.el.appendChild(child.getElement());
    },
    // 删除节点
    remove : function(child){
        for(var node, i = 0; node = this.getChild(i); i++){
            // 这里判断是否存在,存在则删除
            if(node == child){
                // 这里用数组的方法splice,不清楚的童鞋网上搜搜,比较有意思的一个方法
                this.children.splice(i,1);
                break;
            }
        }
        // dom元素的删除方法removeChild,不清楚的童鞋网上搜一下吧,嘿嘿~
        this.el.removeChild(child.getElement());
    },
    getChild : function(i){
        return this.children[i];
    },
    //  实现叶子对象
    hide : function(){
        for(var node, i = 0; node = this.getChild(i); i++){
            node.hide();
        }
        this.el.style.display = 'none';
    },
    //  实现叶子对象
    show : function(){
        this.el.style.display = 'block';
        for(var node, i = 0; node = this.getChild(i); i++){
            node.show();
        }
    },
    //  获取当前的节点
    getElement : function(){
        return this.el;
    }
}    
//  叶子类
var GalleryImage = function(src){
    this.el = document.createElement('img');
    this.el.className = 'imageLeaf';
    this.el.src = src;
}
// 叶子类的方法实现
GalleryImage.prototype = {
    constructor:GalleryImage,
    // 这里的方法都是叶子对象的,已经是叶子对象了,处于最底层的,没有下一级了。上一个例子没有写,是因为尽量少写代码便于理解,这里我们不定义具体的实现,直接抛出就好了
    add : function(){
        throw new Error('This is not a instance!');
    },
    remove : function(){
        throw new Error('This is not a instance!');
    },
    getChild : function(id){
        // 判断是否是当前元素,是则返回
        if(this.id = id){
            return this;
        }
        return null;
    },
 
    // 隐藏
    hide : function(){
        this.el.style.display = 'none';
    },
    // 显示
    show : function(){
        this.el.style.display = 'block';
    },
    getElement : function(){
        return this.el;
    }
}

测试部分,代码如下:

window.onload = function(){
    // 从这开始是测试部分,组合类one,用one来表示层级最高吧
    var one = new DynamicGallery('one');
    // 这里可以循环多张图片来测试,随便搜点儿图片做测试
    var item1 = new GalleryImage('./1.jpg');
    var item2 = new GalleryImage('./2.jpg');
    var item3 = new GalleryImage('./3.jpg');
    // 添加叶子对象到顶级组合类one
    one.add(item1);
    one.add(item2);
    one.add(item3);
    // 组合类two,层级次于one
    two = new DynamicGallery('two');
    // 同样这里也可以循环多张图片来测试
    var item4 = new GalleryImage('./4.jpg');
    var item5 = new GalleryImage('./5.jpg');
    var item6 = new GalleryImage('./6.jpg');
    two.add(item4);
    two.add(item5);
    two.add(item6);
    // 链式操作,后面会聊到
    d.getElementById('main').appendChild(one.getElement());
    one.add(two);
    one.show();
    // 这里写show,two里的图片则显示
    two.hide();
}

这个例子在网上很多,这里我改了下代码,使组合对象和叶子对象更直观,让这两个类来管理图片库,代码可以直接copy运行。

《听飞狐聊JavaScript设计模式系列12》
装个逼咯。双12大超市小铺子都在搞活动,又是一阵买买买~~

这一回聊的组合模式,对于刚学JS面向对象的童鞋,颇有难度,不过不要紧,困难像弹簧,你懂的呃(的呃要快速连读^_^)~
下面的内容,来聊聊递归,因为这回的组合模式用到了递归,刚好可以学习一下加深印象。

递归

官方概述程序调用自身的编程技巧称为递归( recursion)。

// 经典的累加,start简写s,end简写e,开始和结束的数字
function add(s,e){
    // 初始化遍历为number类型,默认值0
    var num = 0;
    // 先加第一项
    num += s;
    // 判断首项小于末项则执行
    if(s<e){
        //这里是关键递归关键啦,argument.callee是指向函数自身的指针
        //等同于num += add(s+1,e); 
        num += arguments.callee(s+1,e);
    }
    return num;
}
alert(add(1,100)) // 5050 

这里之所以用arguments.callee,好处就在于改变函数名的时候,不用再去该内部的代码,防止出错。

这一回,主要聊了组合模式,递归,其中组合模式还回忆了之前聊过的接口类,数组新特性forEach等,这回比较抽象,需要多理解~~
下一回,聊一聊状态模式。

看完点个赞,推荐推荐咯,人气+++,动力才能+++吖,嘿嘿~~

注:此系飞狐原创,转载请注明出处

    原文作者:设计模式
    原文地址: https://segmentfault.com/a/1190000004142112
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注