前端设计模式

原文章链接地址：常用的前端设计模式，让你写出更优雅的代码

                             Javascript设计模式

一、单例模式：一个类只能创建一个实例化对象，并提供一个供全局访问的接口。

function createSingle(){
    var div;
    return function(){
        if(!div){
            div = document.createElement('div');
        }
        return div;
    }
}
document.getElementById('login').onclick = function(){
    var result = createSingle();
}

       点击登录，创建dom节点div，并且只创建一次。

二、策略模式：定义一系列的算法，把他们一个个封装起来，并且使他们可以相互替换。其中包括策略类和环境类，环境类接收用户的参数并将其委托给特定的策略类。

var count = {
  "A": function(num){
     retrun num+2;
  }
  "S": function(num){
     retrun num-2;
  }
   "M": function(num){
      retrun num*2;
   }
   "D": function(num){
     retrun num/2;
   }
}
var context = function(type,num){
    return count[type](num);
}

三、代理模式：为一个对象提供一个代用品或占位符，以便控制对他的访问。我们常用的懒加载便是代理的一种使用。

       var Seller = function(){
            this.talk = function(){
                console.log('那打个八折吧！');
            }
        }
        var Buyer = function(){
            this.proxy = new Proxy();
            this.talk = function(){
                console.log('你帮我问问对方还能不能便宜点呢？');
                this.proxy.talk();
            }
        }
        var Proxy = function(){
            this.seller = new Seller();
            this.talk = function(){
                console.log('我问过了，人家说：');
                this.seller.talk();
            }
        }
        new Buyer().talk();    //你帮我问问对方还能不能便宜点呢？      我问过了，人家说：   那打个八折吧！

上面代码是采用代理模式来进行买方和卖方的对话。

四、装饰者模式：在不改变自身的基础上，在程序运行期间给对象动态地添加方法。

var Wear = function(){}
Wear.prototype.pants = function(){
    console.log('穿上裤子啦！');
} 
Wear.prototype.Tshirt = function(){
    console.log('穿上T恤啦！');
} 
function Decorator(wear) {
    this.wear = wear;
}
Decorator.prototype.pants = function() {
    this.wear.pants();
}
Decorator.prototype.Tshirt = function() {
    this.wear.Tshirt();
}
var wear = new Wear();
var decorator = new Decorator(wear);
decorator.Tshirt();
decorator.pants();