设计模式-读书笔记（1）

• 写在最开始，一直想系统的学习下js的设计模式，这次拜读张容铭老师的《JavaScript设计模式》颇有感触，这本书买了之后一因为这样或那样的原因搁置了半年有余，这次趁着工作不太紧赶紧把书啃掉。

    // 1.实现表单验证
        function checkName (){};
        function checkEmail(){};
    // 2.变更实现方式
        var checkName = function(){};
        var checkEmail = function(){};
    // ----------------  以上两种是全局变量，实际工作中应当尽可能减少全局变量
    // 3.使用对象包裹（减少全局变量，多个变为一个）
        var CheckObject = {
            checkName: function(){},
            checkEmail: function(){}
        }
    // 4.函数也是对象，用函数形式
        var CheckObject = function(){};
        CheckObject.checkName = function(){};
        CheckObject.checkEmail = function(){};    
    // 5.简单的复制，每次返回一个新对象
        var CheckObject = function(){
            return {
                checkName: function(){},
                checkEmail: function(){}
            }
        }
        var demo_a = CheckObject();
        demo_a.checkName();
    // ----------------  上述demo_a（返回出来的对象）实际上和CheckObject毫无干系，使用类可以建立联系
    // 6.使用类建立(this是自身上的属性)
        var CheckObject = function(){           //可以看做一个类
            this.checkName = function(){};
            this.checkEmail = function(){};
        }
        var demo_b = new CheckObject();         //用类创建的对象，即类的实例化，demo_b是CheckObject的实例
        demo_b.checkName();
    // ------------------  new的过程中，实例都会复制this上的属性，这会浪费性能
    // 7. 使用prototype使属性公有化
        // 7.1 方式1
        var CheckObject = function(){};
        CheckObject.prototype.checkName = function(){};
        CheckObject.prototype.checkEmail = function(){};
        // 7.2 方式2 (不可混用)
        var CheckObject = function(){};
        CheckObject.prototype = {
            checkName: function(){},
            checkEmail: function(){}    
        }
    // 8.链式调用
        var CheckObject = {
            checkName: function(){
                console.log('...')
                return this
            },
            checkEmail: function(){
                console.log('...')
                return this
            }
        }
        CheckObject.checkName().checkEmail();
        // -------------------------------------
        var CheckObject = function(){};
        CheckObject.prototype = {
            checkName: function(){
                console.log('...')
                return this
            },
            checkEmail: function(){
                console.log('...')
                return this
            }
        }
        var demo_c = new CheckObject();
        demo_c.checkName().checkEmail();
    // 9.在函数中抽象出添加公共方法的方法（不能直接在函数中直接添加是为了避免过多的全局变量污染Function对象）
        Function.prototype.addMethods = function(name ,fn){
            this.prototype[name] = fn;
            return this
        }
        var Methods = function(){};
        Methods.addMethods('checkName', function(){return this}).addMethods('checkEmail', function(){return this})
        var demo_d = new Methods();
        demo_d.checkName().checkEmail();
    // 10.添加多个方法的list
        Function.prototype.addMethods = function(name ,fn){
            if(typeof(name) == 'string'){
                this.prototype[name] = fn;
            }else{
                name.map((item,index)=>{
                    this.prototype[item] = fn[index];
                })
            }
            return this                    
        }
        var Methods = function(){}, 
            checkName = function(){console.log(1) ;return this}, 
            checkEmail = function(){console.log(2) ;return this}
        Methods.addMethods(['checkName','checkEmail'], [checkName,checkEmail])
        var demo_e = new Methods();
        demo_e.checkName().checkEmail();