js的设计模式

单例模式-应用

  function Msg(){
        this.ele = document.createElement("div");
        document.body.appendChild(this.ele);
    }
    Msg.prototype.init = function(str){
        this.ele.innerHTML = str;
    }
    var singleCase = (function (){
        var instance;
        return function(text){
            if(!instance){
                instance = new Msg();
            }
            instance.init(text);
            return instance;
        }
    })();
    var m1 = singleCase("hello");
    var m2 = singleCase("world");
    console.log(m1===m2);

组合模式：

 class GoHome{
        init(){
            console.log("到家了，开门");
        }
    }
    class OpenComputer{
        init(){
            console.log("开电脑");
        }
    }
    class OpenXiaoAi{
        init(){
            console.log("开音乐");
        }
    }
    // 组合器，用来组合功能
    class Comb{
        constructor(){
            // 准备容器，用来防止将来组合起来的功能
            this.skills = [];
        }
        // 用来组合的功能，接收要组合的对象
        add(task){
            // 向容器中填入，将来准备批量使用的对象
            this.skills.push(task);
        }
        // 用来批量执行的功能
        action(){
            // 拿到容器中所有的对象，才能批量执行
            this.skills.forEach( val => {
                val.init();
            } );
        }
    }
    var c = new Comb();
    // 提前将，将来要批量操作的对象，组合起来
    c.add( new GoHome() );
    c.add( new OpenComputer() );
    c.add( new OpenXiaoAi() );
    // 等待何时的时机，执行组合器的启动功能
    c.action();

观察者模式：

  function Observer(){
        // {
        //     click:[fn1,fn2,fn3],
        //     mousedown:[fn4,fn5,fn6]
        // }
        this.msg = {};
    }
    // 向小本本中添加事件，消息
    Observer.prototype.on = function(type, cb){
        // 判断有没有当前传进来的这个类型
        // 如何没有，走else
        if(this.msg[type]){
            // 如果有，直接给第一次设置的这个数组，添加个新数据
            this.msg[type].push(cb);
        }else{
            // 给他设置一个对应的属性，同时，属性值需要提前写成数组
            this.msg[type] = [cb];
        }
        console.log(this.msg);
    }
    Observer.prototype.emit = function(type){
        // 首先判断是不是已经记录
        if(this.msg[type]){
            var event = {
                type:type
            }
            // 如果已经记录了信息，那么就去执行这个消息对应的所有的处理函数
            this.msg[type].forEach(val=>{
                val.call(this,event);
            })
        }
    }
    Observer.prototype.off = function(type, cb){
        // 首先判断是不是已经记录
        if(this.msg[type]){
            // 准备保存符合传参的处理函数的索引
            var i = 0;
            // 遍历，判断，当前类型对应的每一个处理函数，依次作比较
            var onoff = this.msg[type].some((val, idx)=>{
                i = idx;
                return val === cb;
            })
            // 判断是否获取到重复的函数
            if(onoff){
                // 如果有，那么就在当前的消息处理函数的队列中，删除这个函数
                this.msg[type].splice(i, 1);
            }
        }
    }
    // 首先创建一个观察者对象
    var ob = new Observer();
    // 准备两个处理函数
    function a(){
        console.log("没收");
        console.log(this);
    }
    function b(){
        console.log("叫家长");
    }
    // 随便绑定一个消息，给了两个处理函数
    ob.on("玩手机",a);
    ob.on("玩手机",b);

    // 模拟事件的执行
    ob.emit("玩手机");

    // 删除一个处理函数
    ob.off("玩手机", b);

    // 模拟事件的执行
    ob.emit("玩手机");