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

一、一个邮箱验证的功能函数的写法有几种？

(1) 简单的写法

function checkName(){};
function checkEmail(){};
function checkPassword(){};

分析：这几个函数能够认为是几个全局变量，相似于

var checkName = function(){};
var checkEmail = function(){};
var checkPassword = function(){};

使用场景：适用于功能比较单1、独立的逻辑

优势：写法、用法都比较简单

缺点：此时的函数做为全局变量存在，在这种状况多的时候团队开发时容易被别人的变量覆盖，并且从业务上讲这几个属于一类函数，因此放在一个对象里的话代码的可读性大大提升

(2) 做为一个对象的一个属性的函数

一、 var CheckoutObject = {
      checkName: function(){},
      checkEmail: function(){},
      checkPassword: function(){},
    };

相似于

二、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必须指向当前执行环境

二、原生对象（例如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再次共享

总结：综上能够看到每种方式都有其使用场景，要对症下药选择最合适的模式