摘要：享元模式通過分析應(yīng)用程序的對(duì)象，將其解析為內(nèi)在數(shù)據(jù)和外在數(shù)據(jù)，減少對(duì)象數(shù)量，從而提高程序的性能。通過這種方式進(jìn)行事件綁定，可以減少事件處理程序的數(shù)量，這種方式叫做事件委托，也是運(yùn)用了享元模式的原理。事件處理程序是公用的內(nèi)在部分，每個(gè)菜單項(xiàng)各

github 全文地址 ： YOU-SHOULD-KNOW-JS

外觀模式：為一組復(fù)雜子系統(tǒng)接口提供一個(gè)更高級(jí)的統(tǒng)一接口，通過這個(gè)接口使得對(duì)子系統(tǒng)訪問更加的容易。

// 使用外觀模式注冊(cè)事件監(jiān)聽
function addEvent(dom,type,fn) {
  if(dom.addEventListener){
      dom.addEventListener(type,fn,false);
  }else if(dom.attachEvent){
      dom.attachEvent("on"+type,fn);
  }else{
      dom["on"+type] = fn;
  }
}
// 使用外觀模式獲取事件對(duì)象

var getEvent = function(event) {
  return event || window.event;
}

通過對(duì)接口的二次封裝，使其簡單易用，隱藏起內(nèi)部的復(fù)雜度，外觀模式就是對(duì)接口的外層包裝，以供上層代碼調(diào)用。因此外觀模式封裝的接口方法不需要接口的具體實(shí)現(xiàn)，只需要按照接口的使用規(guī)則使用即可

適配器模式：將一個(gè)類的接口轉(zhuǎn)換為另外一個(gè)類的接口以滿足用戶的需求，使類之間的接口不兼容問題通過適配器得以解決。

書中這里說的比價(jià)沒意思，這里我拿湯姆大叔的例子來說下

我們來舉一個(gè)例子，鴨子（Dock）有飛（fly）和嘎嘎叫（quack）的行為，而火雞雖然也有飛（fly）的行為，但是其叫聲是咯咯的（gobble）。如果你非要火雞也要實(shí)現(xiàn)嘎嘎叫（quack）這個(gè)動(dòng)作，那我們可以復(fù)用鴨子的quack方法，但是具體的叫還應(yīng)該是咯咯的，此時(shí)，我們就可以創(chuàng)建一個(gè)火雞的適配器，以便讓火雞也支持quack方法，其內(nèi)部還是要調(diào)用gobble。

首先要先定義鴨子和火雞的抽象行為，也就是各自的方法函數(shù)：

//鴨子
var Duck = function(){

};
Duck.prototype.fly = function(){
throw new Error("該方法必須被重寫!");
};
Duck.prototype.quack = function(){
throw new Error("該方法必須被重寫!");
}

//火雞
var Turkey = function(){

};
Turkey.prototype.fly = function(){
    throw new Error(" 該方法必須被重寫 !");
};
Turkey.prototype.gobble = function(){
    throw new Error(" 該方法必須被重寫 !");
};


//鴨子
var MallardDuck = function () {
    Duck.apply(this);
};
MallardDuck.prototype = new Duck(); //原型是Duck
MallardDuck.prototype.fly = function () {
    console.log("可以飛翔很長的距離!");
};
MallardDuck.prototype.quack = function () {
    console.log("嘎嘎！嘎嘎！");
};

//火雞
var WildTurkey = function () {
    Turkey.apply(this);
};
WildTurkey.prototype = new Turkey(); //原型是Turkey
WildTurkey.prototype.fly = function () {
    console.log("飛翔的距離貌似有點(diǎn)短!");
};
WildTurkey.prototype.gobble = function () {
    console.log("咯咯！咯咯！");
};

為了讓火雞也支持quack方法，我們創(chuàng)建了一個(gè)新的火雞適配器TurkeyAdapter：

var TurkeyAdapter = function(oTurkey){
    Duck.apply(this);
    this.oTurkey = oTurkey;
};
TurkeyAdapter.prototype = new Duck();
TurkeyAdapter.prototype.quack = function(){
    this.oTurkey.gobble();
};
TurkeyAdapter.prototype.fly = function(){
    var nFly = 0;
    var nLenFly = 5;
    for(; nFly < nLenFly;){
        this.oTurkey.fly();
        nFly = nFly + 1;
    }
};

該構(gòu)造函數(shù)接受一個(gè)火雞的實(shí)例對(duì)象，然后使用Duck進(jìn)行apply，其適配器原型是Duck，然后要重新修改其原型的quack方法，以便內(nèi)部調(diào)用oTurkey.gobble()方法。其fly方法也做了一些改變，讓火雞連續(xù)飛5次（內(nèi)部也是調(diào)用自身的oTurkey.fly()方法）。

    var oMallardDuck = new MallardDuck();
    var oWildTurkey = new WildTurkey();
    var oTurkeyAdapter = new TurkeyAdapter(oWildTurkey);
    
    //原有的鴨子行為
    oMallardDuck.fly();
    oMallardDuck.quack();
    
    //原有的火雞行為
    oWildTurkey.fly();
    oWildTurkey.gobble();
    
    //適配器火雞的行為（火雞調(diào)用鴨子的方法名稱）
    oTurkeyAdapter.fly();
    oTurkeyAdapter.quack();

代理模式：由于一個(gè)對(duì)象不能直接引用另一個(gè)對(duì)象，所以需要代理對(duì)象在這兩個(gè)對(duì)象之間起到中介的作用

// 先聲明美女對(duì)象
var girl = function (name) {
    this.name = name;
};

// 這是dudu
var dudu = function (girl) {
    this.girl = girl;
    this.sendGift = function (gift) {
        alert("Hi " + girl.name + ", dudu送你一個(gè)禮物：" + gift);
    }
};

// 大叔是代理
var proxyTom = function (girl) {
    this.girl = girl;
    this.sendGift = function (gift) {
        (new dudu(girl)).sendGift(gift); // 替dudu送花咯
    }
};

var proxy = new proxyTom(new girl("酸奶小妹"));
proxy.sendGift("999朵玫瑰");

假如dudu要送酸奶小妹玫瑰花，卻不知道她的聯(lián)系方式或者不好意思，想委托大叔去送這些玫瑰，那大叔就是個(gè)代理

其實(shí)在日常開發(fā)中，我們遇到很多這種情況，比如跨域，之前總結(jié)過跨域的所有東西，其中的jsonp，window.name還是location.hash都是通過代理模式來實(shí)現(xiàn)的。

代理模式具體的從我的另一篇文章，JavaScript中的跨域總結(jié)去體會(huì)哈

裝飾著模式，在不改變?cè)磳?duì)象的基礎(chǔ)上，通過對(duì)其進(jìn)行包裝拓展使原有對(duì)象可以滿足用戶的更復(fù)雜需求

這里我拿給輸入框添加事件舉例

var decorator = function(input ,fn) {
  //獲取時(shí)間源
  var input = document.getElementById(input);
  if(typeof input.onclick === "function"){
      //緩存事件源原有的回調(diào)函數(shù)
      var oldClickFn = input.onclick;
      input.onclick = function (ev) { 
          oldClickFn();
          fn();
       }
  }else{
      input.onclick = fn;
  }
}

裝飾著模式很簡單，就是對(duì)原有對(duì)象的屬性和方法的添加。相比于之前說的適配器模式是對(duì)原有對(duì)象的適配，添加的方法和原有的方法功能上大致相似。但是裝飾著提供的方法和原有方法功能項(xiàng)則有一定的區(qū)別，且不需要去了解原有對(duì)象的功能。只要原封不動(dòng)的去使用就行。不需要知道具體的實(shí)現(xiàn)細(xì)節(jié)。

橋接模式：在系統(tǒng)沿著多個(gè)維度變化的時(shí)候，不增加起復(fù)雜度已達(dá)到解耦的目的

在我們?nèi)粘ｉ_發(fā)中，需要對(duì)相同的邏輯做抽象的處理。橋接模式就是為了解決這類的需求。

橋接模式最主要的特點(diǎn)就是將實(shí)現(xiàn)層和抽象層解耦分離，是兩部分可以獨(dú)立變化

比如我們寫一個(gè)跑步游戲，對(duì)于游戲中的人和精靈都是動(dòng)作單元。而他們的動(dòng)作也是非常的統(tǒng)一。比如人和精靈和球運(yùn)動(dòng)都是x，y坐標(biāo)的改變，球的顏色和精靈的顏色繪制方式也非常的類似。
我們就可以將這些方法給抽象出來。

//運(yùn)動(dòng)單元
function Speed(x,y) {
  this.x = x;
  this.y = y;
}
Speed.prototype.run = function() {
  console.log("動(dòng)起來");
}
// 著色單元
function Color(cl) {
  this.color = cl;
}
Color.prototype.draw = function() {
  console.log("繪制色彩")
}

// 變形單元
function Shape(ap) {
  this.shape = ap;
}
Shape.prototype.change = function() {
  console.log("改變形狀");
}
//說話單元
function Speak(wd) {
  this.word = wd;
}
Speak.prototype.say = function() {
  console.log("請(qǐng)開始你的表演")
}


//創(chuàng)建球類，并且它可以運(yùn)動(dòng)可以著色
function Ball(x,y,c) {
  this.speed = new Speed(x,y);
  this.color = new Color(c);
}
Ball.prototype.init = function() {
  //實(shí)現(xiàn)運(yùn)動(dòng)和著色
  this.speed.run();
  this.color.draw();
}

function People(x,y,f) {
  this.speed = new Speed(x,y);
  this.speak = new Speak(f);
}

People.prototype.init = function() {
  this.speed.run();
  this.speak.say();
}
//...


//當(dāng)我們實(shí)例化一個(gè)人物對(duì)象的時(shí)候，他就可以有對(duì)應(yīng)的方法實(shí)現(xiàn)了

var p =new People(10,12,"我是一個(gè)人");
p.init();

組合模式：又稱部分-整體模式，將對(duì)象組合成樹形結(jié)構(gòu)以表示成“部分整體”的層次結(jié)構(gòu)。組合模式使得用戶對(duì)單個(gè)對(duì)象以及組合對(duì)象的使用具有一致性

我們平時(shí)開發(fā)過程中，一定會(huì)遇到這種情況：同時(shí)處理簡單對(duì)象和由簡單對(duì)象組成的復(fù)雜對(duì)象，這些簡單對(duì)象和復(fù)雜對(duì)象會(huì)組合成樹形結(jié)構(gòu)，在客戶端對(duì)其處理的時(shí)候要保持一致性。比如電商網(wǎng)站中的產(chǎn)品訂單，每一張產(chǎn)品訂單可能有多個(gè)子訂單組合，比如操作系統(tǒng)的文件夾，每個(gè)文件夾有多個(gè)子文件夾或文件，我們作為用戶對(duì)其進(jìn)行復(fù)制，刪除等操作時(shí)，不管是文件夾還是文件，對(duì)我們操作者來說是一樣的。在這種場景下，就非常適合使用組合模式來實(shí)現(xiàn)。

組合模式主要有三個(gè)角色：

（1）抽象組件（Component）：抽象類，主要定義了參與組合的對(duì)象的公共接口

（2）子對(duì)象（Leaf）：組成組合對(duì)象的最基本對(duì)象

（3）組合對(duì)象（Composite）：由子對(duì)象組合起來的復(fù)雜對(duì)象

理解組合模式的關(guān)鍵是要理解組合模式對(duì)單個(gè)對(duì)象和組合對(duì)象使用的一致性，我們接下來說說組合模式的實(shí)現(xiàn)加深理解。

// 抽象一個(gè)虛擬父類
var News = function() {
  this.children = [];
  this.element = null;
}

News.prototype = {
    init:function() {
      throw new Error("請(qǐng)重寫你的方法");
    },
    add:function() {
              throw new Error("請(qǐng)重寫你的方法");
            },
    getElement:function() {
                    throw new Error("請(qǐng)重寫你的方法");
                  },
}

function iniheritObject(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

function inheritPrototype(subClass,superClass) {
  var p = iniheritObject(superClass.prototype);
  p.constructor = subClass;
  subClass.prototype = p;
}
//容器類
var Container = function(id,parent) {
  News.call(this);
  this.id = id;
  this.parent = parent;
  this.init();
}

//寄生式繼承父類原型方法
inheritPrototype(Container,News);

Container.prototype.init = function() {
  this.element = document.createElement("ul");
  this.element.id = this.id;
  this.element.className = "new-container";
}

Container.prototype.add = function(child) {
  this.children.push(child);
  this.element.appendChild(child.getElement());
  return this;
}

Container.prototype.getElement = function() {
  return this.element;
}

Container.prototype.show = function() {
  this.parent.appendChild(this.element)
}
//同樣下一層極的行成員集合類以及后面新聞組合體類
var Item = function(classname) {
  News.call(this);
  this.classname = classname;
  this.init();
}
inheritPrototype(Item,News);
Item.prototype.init = function() {
  this.element = document.createElement("li");
  this.element.className = this.classname;
}
Item.prototype.add = function(child) {
  this.children.push(child);
  this.element.appendChild(child.getElement());
  return this;
}
Item.prototype.getElement = function() {
  return this.element;
}

var NewsGroup = function(className) {
  News.call(this);
  this.classname = classname|| "";
  this.init();
}
inheritPrototype(NewsGroup,News);
NewsGroup.prototype.init = function() {
  this.element = document.createElement("div");
  this.element.className = this.classname;
}
NewsGroup.prototype.add = function(child) {
  this.children.push(child);
  this.element.appendChild(child.getElement());
  return this;
}
NewsGroup.prototype.getElement = function() {
  return this.element;
}

所以后面我們?cè)谑褂玫臅r(shí)候，創(chuàng)建新聞?lì)?，利用之前定義的組合元素去組合就可以了。

享元模式：運(yùn)用共享技術(shù)有效的支持大量細(xì)粒度對(duì)象，避免對(duì)象之間擁有相同內(nèi)容造成的不必要開銷

主要用來優(yōu)化程序的性能，適合解決大量類似的對(duì)象產(chǎn)生的性能問題。享元模式通過分析應(yīng)用程序的對(duì)象，將其解析為內(nèi)在數(shù)據(jù)和外在數(shù)據(jù)，減少對(duì)象數(shù)量，從而提高程序的性能。

享元模式通過共享大量的細(xì)粒度的對(duì)象，減少對(duì)象的數(shù)量，從而減少對(duì)象的內(nèi)存，提高應(yīng)用程序的性能。其基本思想就是分解現(xiàn)有類似對(duì)象的組成，將其展開為可以共享的內(nèi)在數(shù)據(jù)和不可共享的外在數(shù)據(jù)，我們稱內(nèi)在數(shù)據(jù)的對(duì)象為享元對(duì)象。通常還需要一個(gè)工廠類來維護(hù)內(nèi)在數(shù)據(jù)。

在JS中，享元模式主要有下面幾個(gè)角色組成：

客戶端：用來調(diào)用享元工廠來獲取內(nèi)在數(shù)據(jù)的類，通常是應(yīng)用程序所需的對(duì)象

享元工廠：用來維護(hù)享元數(shù)據(jù)的類

享元類：保持內(nèi)在數(shù)據(jù)的類

我們舉個(gè)例子進(jìn)行說明：蘋果公司批量生產(chǎn)iphone，iphone的大部分?jǐn)?shù)據(jù)比如型號(hào)，屏幕都是一樣，少數(shù)部分?jǐn)?shù)據(jù)比如內(nèi)存有分16G,32G等。未使用享元模式前，我們寫代碼如下：

function Iphone(model, screen, memory, SN) {
    this. model  = model;
    this.screen = screen;
    this.memory = memory;
    this.SN = SN;
}
var phones = [];
for (var i = 0; i < 1000000; i++) {
    var memory = i % 2 == 0 ? 16 : 32;
    phones.push(new Iphone("iphone6s", 5.0, memory, i));
}

這段代碼中，創(chuàng)建了一百萬個(gè)iphone，每個(gè)iphone都獨(dú)立申請(qǐng)一個(gè)內(nèi)存。但是我們仔細(xì)觀察可以看到，大部分iphone都是類似的，只是內(nèi)存和序列號(hào)不一樣，如果是一個(gè)對(duì)性能要求比較高的程序，我們就要考慮去優(yōu)化它。
大量相似對(duì)象的程序，我們就可以考慮用享元模式去優(yōu)化它，我們分析出大部分的iphone的型號(hào)，屏幕，內(nèi)存都是一樣的，那這部分?jǐn)?shù)據(jù)就可以公用，就是享元模式中的內(nèi)在數(shù)據(jù)，定義享元類如下：

 function IphoneFlyweight(model, screen, memory) {
      this.model = model;
      this.screen = screen;
      this.memory = memory;
  }
  

我們定義了iphone的享元類，其中包含型號(hào)，屏幕和內(nèi)存三個(gè)數(shù)據(jù)。我們還需要一個(gè)享元工廠來維護(hù)這些數(shù)據(jù)：

 var flyweightFactory = (function () {
     var iphones = {};
     return {
         get: function (model, screen, memory) {
             var key = model + screen + memory;
             if (!iphones[key]) {
                 iphones[key] = new IphoneFlyweight(model, screen, memory);
             }
             return iphones[key];
         }
     };
 })();
 

在這個(gè)工廠中，我們定義了一個(gè)字典來保存享元對(duì)象，提供一個(gè)方法根據(jù)參數(shù)來獲取享元對(duì)象，如果字典中有則直接返回，沒有則創(chuàng)建一個(gè)返回。
接著我們創(chuàng)建一個(gè)客戶端類，這個(gè)客戶端類就是修改自iphone類：

 function Iphone(model, screen, memory, SN) {
     this.flyweight = flyweightFactory.get(model, screen, memory);
     this.SN = SN;
 }
 

然后我們依舊像之間那樣生成多個(gè)iphone

var phones = [];
for (var i = 0; i < 1000000; i++) {
    var memory = i % 2 == 0 ? 16 : 32;
    phones.push(new Iphone("iphone6s", 5.0, memory, i));
}
console.log(phones);

這里的關(guān)鍵就在于Iphone構(gòu)造函數(shù)里面的this.flyweight = flyweightFactory.get(model, screen, memory)。這句代碼通過享元工廠去獲取享元數(shù)據(jù)，而在享元工廠里面，如果已經(jīng)存在相同數(shù)據(jù)的對(duì)象則會(huì)直接返回對(duì)象，多個(gè)iphone對(duì)象共享這部分相同的數(shù)據(jù)，所以原本類似的數(shù)據(jù)已經(jīng)大大減少，減少的內(nèi)存的占用。

    
選項(xiàng)1
    
選項(xiàng)2
    
選項(xiàng)3
    
選項(xiàng)4
    
選項(xiàng)5
    
選項(xiàng)6

點(diǎn)擊菜單項(xiàng)，進(jìn)行相應(yīng)的操作，我們通過jQuery來綁定事件，一般會(huì)這么做：

 $(".item").on("click", function () {
     console.log($(this).text());
 })
 

給每個(gè)列表項(xiàng)綁定事件，點(diǎn)擊輸出相應(yīng)的文本。這樣看暫時(shí)沒有什么問題，但是如果是一個(gè)很長的列表，尤其是在移動(dòng)端特別長的列表時(shí)，就會(huì)有性能問題，因?yàn)槊總€(gè)項(xiàng)都綁定了事件，都占用了內(nèi)存。但是這些事件處理程序其實(shí)都是很類似的，我們就要對(duì)其優(yōu)化。

 $(".menu").on("click", ".item", function () {
     console.log($(this).text());
 })
 

通過這種方式進(jìn)行事件綁定，可以減少事件處理程序的數(shù)量，這種方式叫做事件委托，也是運(yùn)用了享元模式的原理。事件處理程序是公用的內(nèi)在部分，每個(gè)菜單項(xiàng)各自的文本就是外在部分。我們簡單說下事件委托的原理：點(diǎn)擊菜單項(xiàng)，事件會(huì)從li元素冒泡到ul元素，我們綁定事件到ul上，實(shí)際上就綁定了一個(gè)事件，然后通過事件參數(shù)event里面的target來判斷點(diǎn)擊的具體是哪一個(gè)元素，比如低級(jí)第一個(gè)li元素，event.target就是li，這樣就能拿到具體的點(diǎn)擊元素了，就可以根據(jù)不同元素進(jìn)行不同的處理。

參考地址：http://luopq.com/2015/11/20/d...