javascript设计模式 第一章 灵活的javascript

Posted 2020-11-01 码农何时

javascript 设计模式

第1章 灵活的语言--JavaScript

初级程序员接到一个验证表单功能的任务，需要验证用户名、邮箱、密码等

** 此文章内容大部分来自 《javascript设计模式》一书，请支持正版。**

1.简单的验证check.js

代码如下：

function checkName(){
    //验证姓名
}
function checkEmail(){
    //验证邮箱
}
function checkPassword(){
    //验证密码
}

这段代码功能可以实现，但是创建了3个全局变量，这就增加了代码的脆弱性。可能在的check.js文件中只有这3个变量。如果你引入了别人的类库，或者你的这个js文件给别人使用的话，就增加了全局变量被覆盖的可能。可能你覆盖别人的也可能别人覆盖你的功能。

2.函数的另一种形式

代码如下：

var checkName = function(){
    //验证姓名
}
var checkEmail = function(){
    //验证邮箱
}
var checkPassword = function(){
    //验证密码
}

这种方式多了个变量提升，但是并未改变创建了3个全局变量的问题。

3.用对象收编变量

代码如下：

var CheckObject = {
    checkName:function(){
        //验证姓名
    },
    checkEmail:function(){
        //验证邮箱
    },
    checkPassword:function(){
        //验证密码
    }
}

这种对象收编方式大大减少了对象被覆盖的问题，使用直接CheckObject.checkName() 点的方式就可以。

4.对象的另一种形式

var CheckObject = function(){}
CheckObject.checkName = function(){
    //验证姓名
}
checkObject.CheckEmail = function(){
    //验证邮箱
}
checkObject.checkPassword = function(){
    //验证密码
}

3和4的这两种方式还会有问题，当别人想用你写的对象方法时就会有些麻烦了，因为这个对象不能复制一份，或者说这个对象类在用new关键字创建新的对象时，新创建的对象是不能继承这些方法。

举个列子：
A同事写了个获取用户名的操作，B同事感觉默认名字“张三”不合适，他想改为其他的。因为对象只有一份B这样修改后其他任何人再此使用都可能为“李四”。也就是说很容易覆盖一个公共的方法。

//获取用户名
var MyMethod = {
    getDefaultName:function(){
        var defaultName = ‘张三‘;
        return defaultName;
    },

}
MyMethod.getDefaultName();//张三

//B同事修改了MyMethod
MyMethod.getDefaultName = function(){
    var defaultName = ‘李四‘;
    return defaultName;
}
MyMethod.getDefaultName();//李四

5.真假对象

var CheckObject = function(){
    return {
        checkName:function(){
            //验证姓名
        },
        checkEmail:function(){
            //验证邮箱
        },
        checkPassword:function(){
            //验证密码
        }
    }
}

这段代码简单的复制了一遍对象，每次调用函数的时候，把之前的那个对象返回出来，当别人每次调用这个函数时都返回了一个全新的对象。如：

var a = CheckObject();
a.checkEmail();

其实他不是一个真正意义上类的创建方式，并且创建的对象a和对象CheckObject没有任何关系,返回出来的对象本身就与CheckObject对象无关。

6.类

var CheckObject = function(){
    this.checkName = function(){
        //验证姓名
    }
    this.checkEmail = function(){
        //验证邮箱
    }
    this.checkPassword = function(){
        //验证密码
    }
}

var a = new CheckObject();
a.checkEmail();

这样可以看成一个类，每一次通过new关键字创建新对象的时候，新创建的对象都会对类的this上的属性进行复制，这些新创建的对象都会有自己的一套方法，但是这么做造成了消耗是很奢侈的，因为每次创建new的时候都会复制CheckObject里面所有的方法。

7.一个检测类

var CheckObject = function(){}
CheckObject.prototype.checkName = function(){
    //验证姓名
}
CheckObject.prototype.checkEmail = function(){
    //验证邮箱
}
CheckObject.prototype.checkPassword = function(){
    //验证密码
}

或

var CheckObject = function(){}
CheckObject.prototype = {
    constructor:CheckObject,
    checkName:function(){
        //验证姓名
    },
    checkEmail:function(){
        //验证邮箱
    },
    checkPassword:function(){
        //验证密码
    }
}

使用它们：

var a = new CheckObject();
a.checkName();
a.checkEmail();
a.checkPassword();

这样创建对象实例的时候，创建出来的对象所拥有的方法就是一个了，因为它们都要依赖 prototype原型依次寻找，而找到的方法都是同一个，它们都绑定在CheckObject对象类的原型上。

8.方法还可以这样用

上面代码可以看出来多次使用a这时候我们可以想到链接调用，在每个方法的末尾处将当前的对象返回。

var CheckObject = function(){}
CheckObject.prototype = {
    constructor:CheckObject,
    checkName:function(){
        //验证姓名
        return this;
    },
    checkEmail:function(){
        //验证邮箱
        return this;
    },
    checkPassword:function(){
        //验证密码
        return this;
    }
}

使用它们：

var a = new CheckObject();
a.checkName().checkEmail().checkPassword();

9.函数的祖先

模仿prototype.js的作法为每一个函数添加一个检测邮箱的方法可以这么做。

Function.prototype.checkEmail = function(){
    //验证邮箱
}

使用方式：

var f = function(){};
f.checkEmail();
// 或者使用类的方式
var f= new Function();
f.checkEmial();

这样做的弊端是污染了原生对象Function,别人创建的函数也会被创建checkEmail，造成不必要的开销。使用下面的这种方式：

Function.prototype.addMethod = function(name,fn){
    this[name] = fn;
}

使用方式：

var methods = function(){}
//或者
var methods = new Function();
methods.addMethod(‘checkName‘,funciton(){
    //验证姓名
});
methods.addMethod(‘checkEmail‘,funciton(){
    //验证邮箱
});
methods.checkName();
methods.checkEmail();

10.同样添加链式

Function.prototype.addMethod = function(){
    this[name] = fn;
    return this;
}

这样添加方法就方便了一些

var methods = new Function();
methods.addMethod(‘checkName‘,funciton(){
    //验证姓名
}).addMethod(‘checkEmail‘,funciton(){
    //验证邮箱
});

同时被添加的每个方法也可以做链式返回

var methods = new Function();
methods.addMethod(‘checkName‘,funciton(){
    //验证姓名
    return this;
}).addMethod(‘checkEmail‘,funciton(){
    //验证邮箱
    return this;
});

methods.checkName().checkEmail();

11.使用类的方式来实现

上面是函数式调用，对于习惯类式调用的方法如下：

Function.prototype.addMethod = function(){
    this.prototype[name] = fn;
    return this;
}

使用方式：

var methods = function(){}:
methods.addMethod(‘checkName‘,funciton(){
    //验证姓名
    return this;
}).addMethod(‘checkEmail‘,funciton(){
    //验证邮箱
    return this;
});

这里注意。methods不能直接点出来使用，而是要通过new关键字来创建新对象。

var m = new Methods();
m.checkEmail();