一、js设计模式-对症下药

1、一个邮箱验证的功能函数的写法有几种？(1) 简单的写法function checkName(){};function checkEmail(){};function checkPassword(){};分析：这几个函数可以认为是几个全局变量，类似于var checkName = function(){};var checkEmail = function(){};var checkPassword = function(){};使用场景：适用于功能比较单一、独立的逻辑优点：写法、用法都比较简单缺点：此时的函数作为全局变量存在，在这种情况多的时候团队开发时容易被别人的变量覆盖，而且从业务上讲这几个属于一类函数，所以放在一个对象里的话代码的可读性大大提高(2) 作为一个对象的一个属性的函数1、 var CheckoutObject = { checkName: function(){}, checkEmail: function(){}, checkPassword: function(){}, };类似于 2、var CheckoutObject = function(){}; CheckoutObject.checkName = function(){}; CheckoutObject.checkEmail = function(){}; CheckoutObject.checkPassword = function(){};使用场景：几个功能有一定的逻辑或者类别上的关系，例如对表单的增删改查都属于对表单的操作分析以及优点：这两种方式都只有一个全局变量，极大了削弱了命名冲突的隐患，都能直接通过变量名称CheckoutObject直接使用方法，区别是2属于函数，在函数内部可以定义所有实例共有的属性，更加符合类的特点，更加具体的说1是2的一种语法糖、只是2的一种实现方法缺点：1不太符合类的特点不能去实例化，虽然2可以通过new去创建对象但是创建的对象并不包括那些静态方法，对于函数变量CheckoutObject复用性比较差，而且包含属性并不独立(3) 函数返回对象，该对象包含邮箱校验的方法 var CheckoutObject = function(){ return { checkName: function(){}, checkEmail: function(){}, checkPassword: function(){}, }; }; // 调用方法 var test = new CheckoutObject(); test.checkName(); test.checkEmail(); test.checkPassword();使用场景：可以用来存放一些公共属性，会被多人调用，每次都生成新的实例分析：构造函数返回一个对象，对象包含所需的属性，每次new都是一个新对象，对象包含校验需要的属性优点：每个实例对象所包含的属性都是独立的缺点：test的对象和CheckoutObject没什么关系，通过instanceof检测不出来，(4) 更具有类特点的对象var CheckoutObject = function(){ this.checkName = function(){}; this.checkEmail = function(){}; this.checkPassword = function(){};};var test = new CheckoutObject();console.log(test instanceof CheckoutObject); // true特点：实例对象的类型是构造函数，这样更适用于封装(5) 对象间共享的方法分析：上述创建的对象都是独立的拥有自己的属性，但是这些属性是相同的，这样造成了内存的浪费var CheckoutObject = function(){};CheckoutObject.prototype.checkName = function(){ console.log(‘我叫小将’);};var test1 = new CheckoutObject();var test2 = new CheckoutObject();test1.checkName(); // 我叫小将test2.checkName(); // 我叫小将console.log(test1.checkName === test2.checkName); // true使用场景：各个实例都拥有这个属性，这样就可以提取到原型对象中，减小内存损耗优点：原型属性被所有属性所共享缺点：实例的属性缺乏独立性，所以独立属性和共享属性应该对症下药(6) 更简单的链式调用分析：好的代码应该精简，能占一行绝不占两行var CheckoutObject = { checkName: function(){ return this }, checkEmail: function(){ return this }}CheckoutObject.checkName().checkEmail()共享的也可以var CheckoutObject = function(){};CheckoutObject.prototype.checkName = function(){ console.log(this); return this;};CheckoutObject.checkName()使用场景：适合一系列操作，例如本博文的校验优点：调用方式简洁，易懂缺点：每个函数都必须返回当前this，也就是this必须指向当前执行环境2、原生对象（例如Array）添加独立的方法为原生对象添加属性通常是通过原型对象Array.prototype.remove = function(){};缺点：所有Array都具有了这个remove属性造成了污染优点：如果大部分实例都需要这个方法这就成了优点了Array.prototype.addMethod = function(name, fn){ this[name] = fn;};这样所有的Array都具有addMethod这个属性，但是具体添加的方法是每个实例所共有，具体用那种看实际使用场景，而且可以在addMethod函数内加一些其它的共享属性链式添加和使用Function.prototype.addMethod = function(name, fn){ console.log(this === Method); this.prototype[name] = fn; return this;};var Method = new Function();Method.addMethod(‘checkName’, function(){ console.log(‘姓名检查’); return this;}).addMethod(‘checkEmail’, function(){ console.log(‘邮箱检查’); return this;})var method = new Method();method.checkName().checkEmail();使用场景：为原型对象添加共享方法，但是具体执行每个原型实例可以自己定义优点：提供共享的添加函数，具体添加的函数每个Method独立，method再次共享总结：综上可以看到每种方式都有其使用场景，要对症下药选择最合适的模式