共计 35703 个字符，预计需要花费 90 分钟才能阅读完成。
设计模式简介：
设计模式是可重用的用于解决软件设计中个别问题的计划。设计模式如此让人着迷，以至在任何编程语言中都有对其进行的摸索。
其中一个起因是它能够让咱们站在伟人的肩膀上，取得前人所有的教训，保障咱们以优雅的形式组织咱们的代码，满足咱们解决问题所须要的条件。
设计模式同样也为咱们形容问题提供了通用的词汇。这比咱们通过代码来向他人传播语法和语义性的形容更为不便。
上面介绍一些 JavaScript 里用到的设计模式：
1、结构器模式
在面向对象编程中，结构器是一个当新建对象的内存被调配后，用来初始化该对象的一个非凡函数。在 JavaScript 中简直所有的货色都是对象，咱们常常会对对象的结构器非常感兴趣。
对象结构器是被用来创立非凡类型的对象的，首先它要筹备应用的对象，其次在对象首次被创立时，通过接管参数，结构器要用来对成员的属性和办法进行赋值。
1.1 创建对象
// 第一种形式
let obj = {};
// 第二种形式
let obj2 = Object.create(null);
// 第三种形式
let obj3 = new Object();1.2 设置对象的属性和办法
// 1.“点号”法
// 设置属性
obj.firstKey = "Hello World";
// 获取属性
let key = obj.firstKey;
// 2.“方括号”法
// 设置属性
obj["firstKey"] = "Hello World";
// 获取属性
let key = newObject["firstKey"];
// 办法 1 和 2 的区别在于用方括号的形式内能够写表达式
// 3. Object.defineProperty 形式
// 设置属性
Object.defineProperty(obj, "firstKey", {
value: "hello world",// 属性的值，默认为 undefined
writable: true, // 是否可批改，默认为 false
enumerable: true,// 是否可枚举（遍历），默认为 false
configurable: true // 示意对象的属性是否能够被删除，以及除 value 和 writable 个性外的其余个性是否能够被批改。});
// 如果下面的形式你感到难以浏览，能够简短的写成上面这样：let defineProp = function (obj, key, value){let config = {};
config.value = value;
Object.defineProperty(obj, key, config);
};
// 4. Object.defineProperties 形式（同时设置多个属性）// 设置属性
Object.defineProperties( obj, {
"firstKey": {
value: "Hello World",
writable: true
},
"secondKey": {
value: "Hello World2",
writable: false
}
});1.3 创立结构器
Javascript 不反对类的概念，但它有一种与对象一起工作的结构器函数。应用 new 关键字来调用该函数，咱们能够通知 Javascript 把这个函数当做一个结构器来用, 前端培训它能够用本人所定义的成员来初始化一个对象。
在这个结构器外部，关键字 this 援用到刚被创立的对象。回到对象创立，一个根本的构造函数看起来像这样:
function Car(model, year, miles) {
this.model = model;
this.year = year;
this.miles = miles;
this.toString = function () {return this.model + "has done" + this.miles + "miles";};
}
// 应用:
// 咱们能够示例化一个 Car
let civic = new Car("Honda Civic", 2009, 20000);
let mondeo = new Car("Ford Mondeo", 2010, 5000);
// 关上浏览器控制台查看这些对象 toString()办法的输入值
// output of the toString() method being called on
// these objects
console.log(civic.toString() );
console.log(mondeo.toString() );下面是简略版本的结构器模式，但它还是有些问题。一个是难以继承，另一个是每个 Car 构造函数创立的对象中，toString()之类的函数都被从新定义。这不是十分好，现实的状况是所有 Car 类型的对象都应该援用同一个函数。
在 Javascript 中函数有一个 prototype 的属性。当咱们调用 Javascript 的结构器创立一个对象时，构造函数 prototype 上的属性对于所创立的对象来说都看见。照这样，就能够创立多个拜访雷同 prototype 的 Car 对象了。上面，咱们来扩大一下原来的例子：
function Car(model, year, miles) {
this.model = model;
this.year = year;
this.miles = miles;
}
Car.prototype.toString = function () {return this.model + "has done" + this.miles + "miles";};
// 应用:
var civic = new Car("Honda Civic", 2009, 20000);
var mondeo = new Car("Ford Mondeo", 2010, 5000);
console.log(civic.toString() );
console.log(mondeo.toString() );通过下面代码，单个 toString()实例被所有的 Car 对象所共享了。
2、模块化模式
模块是任何强壮的应用程序体系结构不可或缺的一部分，特点是有助于放弃利用我的项目的代码单元既能清晰地拆散又有组织。
在 JavaScript 中，实现模块有几个选项，他们包含：
模块化模式
对象表示法
AMD 模块
Commonjs 模块
ECMAScript Harmony 模块
2.1 对象字面值
对象字面值不要求应用新的操作实例，然而不可能在构造体开始应用，因为关上 ”{“ 可能被解释为一个块的开始。
let myModule = {
myProperty: "someValue",
// 对象字面值蕴含了属性和办法（properties and methods）.
// 例如，咱们能够定义一个模块配置进对象：myConfig: {
useCaching: true,
language: "en"
},
// 十分根本的办法
myMethod: function () {console.log( "Where in the world is Paul Irish today?");
},
// 输入基于以后配置 configuration 的一个值
myMethod2: function () {console.log( "Caching is:" + ( this.myConfig.useCaching) ? "enabled" : "disabled" );
},
// 重写以后的配置（configuration）myMethod3: function(newConfig) {if ( typeof newConfig === "object") {
this.myConfig = newConfig;
console.log(this.myConfig.language);
}
}
};
myModule.myMethod();// Where in the world is Paul Irish today?
myModule.myMethod2();// enabled
myModule.myMethod3({
language: "fr",
useCaching: false
});// fr2.2 模块化模式
模块化模式最后被定义为一种对传统软件工程中的类提供公有和公共封装的办法。
在 JavaScript 中，模块化模式用来进一步模仿类的概念，通过这样一种形式：咱们能够在一个繁多的对象中蕴含公共 / 公有的办法和变量，从而从全局范畴中屏蔽特定的局部。
这个后果是能够缩小咱们的函数名称与在页面中其余脚本区域定义的函数名称抵触的可能性。
模块模式应用闭包的形式来将 ” 公有信息 ”, 状态和组织构造封装起来。提供了一种将私有和公有办法，变量封装混合在一起的形式，这种形式避免外部信息泄露到全局中，从而防止了和其它开发者接口产生冲图的可能性。
在这种模式下只有私有的 API 会返回，其它将全副保留在闭包的公有空间中。
这种办法提供了一个比拟清晰的解决方案，深圳前端培训在只裸露一个接口供其它局部应用的状况下，将执行沉重工作的逻辑爱护起来。这个模式十分相似于立刻调用函数式表达式(IIFE- 查看命名空间相干章节获取更多信息)，然而这种模式返回的是对象，而立刻调用函数表达式返回的是一个函数。
须要留神的是，在 javascript 事实上没有一个显式的真正意义上的 ” 公有性 ” 概念，因为与传统语言不同，javascript 没有拜访修饰符。从技术上讲，变量不能被申明为私有的或者公有的，因而咱们应用函数域的形式去模仿这个概念。
在模块模式中，因为闭包的缘故，申明的变量或者办法只在模块外部无效。在返回对象中定义的变量或者办法能够供任何人应用。
let testModule = (function () {
let counter = 0;
return {incrementCounter: function () {return counter++;},
resetCounter: function () {console.log( "counter value prior to reset:" + counter);
counter = 0;
}
};
})();
testModule.incrementCounter();
testModule.resetCounter();在这里咱们看到，其它局部的代码不能间接拜访咱们的 incrementCounter() 或者 resetCounter()的值。counter 变量被齐全从全局域中隔离起来了，因而其体现的就像一个公有变量一样，它的存在只局限于模块的闭包外部，因而只有两个函数能够拜访 counter。
咱们的办法是有名字空间限度的，因而在咱们代码的测试局部，咱们须要给所有函数调用后面加上模块的名字(例如 ”testModule”)。
当应用模块模式时，咱们会发现通过应用简略的模板，对于开始应用模块模式十分有用。上面是一个模板蕴含了命名空间，公共变量和公有变量。
let myNamespace = (function () {
let myPrivateVar, myPrivateMethod;
myPrivateVar = 0;
myPrivateMethod = function(foo) {console.log( foo);
};
return {
myPublicVar: "foo",
myPublicFunction: function(bar) {
myPrivateVar++;
myPrivateMethod(bar);
}
};
})();看一下另外一个例子，上面咱们看到一个应用这种模式实现的购物车。这个模块齐全自蕴含在一个叫做 basketModule 全局变量中。
模块中的购物车数组是公有的，利用的其它局部不能间接读取。只存在与模块的闭包中，因而只有能够拜访其域的办法能够拜访这个变量。
let basketModule = (function () {let basket = [];
function doSomethingPrivate() {//...}
function doSomethingElsePrivate() {//...}
return {addItem: function( values) {basket.push(values);
},
getItemCount: function () {return basket.length;},
doSomething: doSomethingPrivate,
getTotal: function () {let q = this.getItemCount(),
p = 0;
while (q--) {p += basket[q].price;
}
return p;
}
};
}());下面的办法都处于 basketModule 的名字空间中。
请留神在下面的 basket 模块中 域函数是如何在咱们所有的函数中被封装起来的，以及咱们如何立刻调用这个域函数，并且将返回值保留下来。这种形式有以下的劣势：
能够创立只能被咱们模块拜访的公有函数。这些函数没有裸露进去（只有一些 API 是裸露进去的），它们被认为是齐全公有的。
当咱们在一个调试器中，须要发现哪个函数抛出异样的时候，能够很容易的看到调用栈，因为这些函数是失常申明的并且是命名的函数。
这种模式同样能够让咱们在不同的状况下返回不同的函数。我见过有开发者应用这种技巧用于执行测试，目标是为了在他们的模块外面针对 IE 专门提供一条代码门路，然而当初咱们也能够简略的应用特色检测达到雷同的目标。
2.3Import mixins(导入混合)
这个变体展现了如何将全局（例如 jQuery, Underscore）作为一个参数传入模块的匿名函数。这种形式容许咱们导入全局，并且依照咱们的想法在本地为这些全局起一个别名。
let myModule = (function ( jQ, _) {function privateMethod1(){jQ(".container").html("test");
}
function privateMethod2(){console.log( _.min([10, 5, 100, 2, 1000]) );
}
return{publicMethod: function(){privateMethod1();
}
};
}(jQuery, _));// 将 JQ 和 lodash 导入
myModule.publicMethod();2.4Exports（导出）
这个变体容许咱们申明全局对象而不必应用它们。
let myModule = (function () {let module = {},
privateVariable = "Hello World";
function privateMethod() {// ...}
module.publicProperty = "Foobar";
module.publicMethod = function () {console.log( privateVariable);
};
return module;
}());2.5 其它框架特定的模块模式实现
Dojo：
Dojo 提供了一个不便的办法 dojo.setObject() 来设置对象。这须要将以 ”.” 符号为第一个参数的分隔符，如：myObj.parent.child 是指定义在 ”myOjb” 外部的一个对象“parent”，它的一个属性为 ”child”。
应用 setObject()办法容许咱们设置 children 的值，能够创立门路传递过程中的任何对象即便这些它们基本不存在。
例如，如果咱们申明商店命名空间的对象 basket.coreas，能够应用如下形式：
let store = window.store || {};
if (!store["basket"] ) {store.basket = {};
}
if (!store.basket["core"] ) {store.basket.core = {};
}
store.basket.core = {key:value,};Extjs：
// create namespace
Ext.namespace("myNameSpace");
// create application
myNameSpace.app = function () {
// do NOT access DOM from here; elements don't exist yet
// private variables
let btn1,
privVar1 = 11;
// private functions
let btn1Handler = function (button, event) {console.log( "privVar1=" + privVar1);
console.log("this.btn1Text=" + this.btn1Text);
};
// public space
return {
// public properties, e.g. strings to translate
btn1Text: "Button 1",
// public methods
init: function () {if ( Ext.Ext2) {
btn1 = new Ext.Button({
renderTo: "btn1-ct",
text: this.btn1Text,
handler: btn1Handler
});
} else {
btn1 = new Ext.Button( "btn1-ct", {
text: this.btn1Text,
handler: btn1Handler
});
}
}
};
}();jQuery：
因为 jQuery 编码标准没有规定插件如何实现模块模式，因而有很多种形式能够实现模块模式。Ben Cherry 之间提供一种计划，因为模块之间可能存在大量的共性，因而通过应用函数包装器封装模块的定义。
在上面的例子中，定义了一个 library 函数，这个函数申明了一个新的库，并且在新的库（例如 模块）创立的时候，主动将初始化函数绑定到 document 的 ready 上。
function library(module) {$( function() {if ( module.init) {module.init();
}
});
return module;
}
let myLibrary = library(function () {
return {init: function () {// module implementation}
};
}());长处：
既然咱们曾经看到单例模式很有用，为什么还是应用模块模式呢？首先，对于有面向对象背景的开发者来讲，至多从 javascript 语言上来讲，模块模式绝对于真正的封装概念更清晰。
其次，模块模式反对公有数据 - 因而，在模块模式中，公共局部代码能够拜访公有数据，然而在模块内部，不能拜访类的公有局部（没开玩笑！感激 David Engfer 的玩笑）。
毛病：
模块模式的毛病是因为咱们采纳不同的形式拜访私有和公有成员，因而当咱们想要扭转这些成员的可见性的时候，咱们不得不在所有应用这些成员的中央批改代码。
咱们也不能在对象之后增加的办法外面拜访这些公有变量。也就是说，很多状况下，模块模式很有用，并且当应用正确的时候，潜在地能够改善咱们代码的构造。
其它毛病包含不能为公有成员创立自动化的单元测试，以及在紧急修复 bug 时所带来的额定的复杂性。基本没有可能能够对公有成员打补丁。
相同地，咱们必须笼罩所有的应用存在 bug 公有成员的公共办法。开发者不能简略的扩大公有成员，因而咱们须要记得，公有成员并非它们外表上看上去那么具备扩展性。
3、单例模式
单例模式之所以这么叫，是因为它限度一个类只能有一个实例化对象。经典的实现形式是，创立一个类，这个类蕴含一个办法，这个办法在没有对象存在的状况下，将会创立一个新的实例对象。如果对象存在，这个办法只是返回这个对象的援用。
在 JavaScript 语言中, 单例服务作为一个从全局空间的代码实现中隔离进去共享的资源空间是为了提供一个独自的函数拜访指针。
咱们能像这样实现一个单例：
let mySingleton = (function () {
// Instance stores a reference to the Singleton
let instance;
function init() {
// 单例
// 公有办法和变量
function privateMethod(){console.log( "I am private");
}
let privateVariable = "Im also private";
let privateRandomNumber = Math.random();
return {
// 共有办法和变量
publicMethod: function () {console.log( "The public can see me!");
},
publicProperty: "I am also public",
getRandomNumber: function() {return privateRandomNumber;}
};
};
return {
// 如果存在获取此单例实例，如果不存在创立一个单例实例
getInstance: function () {if ( !instance) {instance = init();
}
return instance;
}
};
})();
let myBadSingleton = (function () {
// 存储单例实例的援用
var instance;
function init() {
// 单例
let privateRandomNumber = Math.random();
return {getRandomNumber: function() {return privateRandomNumber;}
};
};
return {
// 总是创立一个新的实例
getInstance: function () {instance = init();
return instance;
}
};
})();
// 应用:
let singleA = mySingleton.getInstance();
let singleB = mySingleton.getInstance();
console.log(singleA.getRandomNumber() === singleB.getRandomNumber()); // true
let badSingleA = myBadSingleton.getInstance();
let badSingleB = myBadSingleton.getInstance();
console.log(badSingleA.getRandomNumber() !== badSingleB.getRandomNumber()); // true创立一个全局拜访的单例实例 (通常通过 MySingleton.getInstance()) 因为咱们不能(至多在动态语言中) 间接调用 new MySingleton() 创立实例. 这在 JavaScript 语言中是不可能的。
在四人帮 (GoF) 的书外面，单例模式的利用形容如下：
每个类只有一个实例，这个实例必须通过一个广为人知的接口，来被客户拜访。
子类如果要扩大这个惟一的实例，客户能够不必批改代码就能应用这个扩大后的实例。
对于第二点，能够参考如下的实例，咱们须要这样编码：
mySingleton.getInstance = function(){if ( this._instance == null) {if ( isFoo() ) {this._instance = new FooSingleton();
} else {this._instance = new BasicSingleton();
}
}
return this._instance;
};在这里，getInstance 有点相似于工厂办法，咱们不须要去更新每个拜访单例的代码。FooSingleton 能够是 BasicSinglton 的子类，并且实现了雷同的接口。
只管单例模式有着正当的应用需要，然而通常当咱们发现自己须要在 javascript 应用它的时候，这是一种信号，表明咱们可能须要去从新评估本人的设计。
这通常表明零碎中的模块要么紧耦合要么逻辑过于扩散在代码库的多个局部。单例模式更难测试，因为可能有多种多样的问题呈现，例如暗藏的依赖关系，很难去创立多个实例，很难清理依赖关系，等等。
4、观察者模式
观察者模式是这样一种设计模式：一个被称作被观察者的对象，保护一组被称为观察者的对象，这些对象依赖于被观察者，被观察者主动将本身的状态的任何变动告诉给它们。
当一个被观察者须要将一些变动告诉给观察者的时候，它将采纳播送的形式，这条播送可能蕴含特定于这条告诉的一些数据。
当特定的观察者不再须要承受来自于它所注册的被观察者的告诉的时候，被观察者能够将其从所保护的组中删除。在这里提及一下设计模式现有的定义很有必要。这个定义是与所应用的语言无关的。
通过这个定义，最终咱们能够更深层次地理解到设计模式如何应用以及其劣势。在四人帮的《设计模式: 可重用的面向对象软件的元素》这本书中，是这样定义观察者模式的：
一个或者更多的观察者对一个被观察者的状态感兴趣，将本身的这种趣味通过附着本身的形式注册在被观察者身上。当被观察者发生变化，而这种便可也是观察者所关怀的，就会产生一个告诉，这个告诉将会被送出去，最初将会调用每个观察者的更新办法。当观察者不在对被观察者的状态感兴趣的时候，它们只须要简略的将本身剥离即可。
咱们当初能够通过实现一个观察者模式来进一步扩大咱们方才所学到的货色。这个实现蕴含一下组件：
被观察者：保护一组观察者，提供用于减少和移除观察者的办法。
观察者：提供一个更新接口，用于当被观察者状态变动时，失去告诉。
具体的被观察者：状态变动时播送告诉给观察者，放弃具体的观察者的信息。
具体的观察者：放弃一个指向具体被观察者的援用，实现一个更新接口，用于察看，以便保障本身状态总是和被观察者状态统一的。
首先，让咱们对被观察者可能有的一组依赖其的观察者进行建模：
function ObserverList(){this.observerList = [];
}
ObserverList.prototype.Add = function(obj){return this.observerList.push( obj);
};
ObserverList.prototype.Empty = function(){this.observerList = [];
};
ObserverList.prototype.Count = function(){return this.observerList.length;};
ObserverList.prototype.Get = function(index){if( index > -1 && index < this.observerList.length){return this.observerList[ index];
}
};
ObserverList.prototype.Insert = function(obj, index){
let pointer = -1;
if(index === 0){this.observerList.unshift( obj);
pointer = index;
}else if(index === this.observerList.length){this.observerList.push( obj);
pointer = index;
}
return pointer;
};
ObserverList.prototype.IndexOf = function(obj, startIndex){
let i = startIndex, pointer = -1;
while(i < this.observerList.length){if( this.observerList[i] === obj ){pointer = i;}
i++;
}
return pointer;
};
ObserverList.prototype.RemoveAt = function(index){if( index === 0){this.observerList.shift();
}else if(index === this.observerList.length -1){this.observerList.pop();
}
};
// Extend an object with an extension
function extend(extension, obj){for ( let key in extension){obj[key] = extension[key];
}
}接着，咱们对被观察者以及其减少，删除，告诉在观察者列表中的观察者的能力进行建模：
function Subject(){this.observers = new ObserverList();
}
Subject.prototype.AddObserver = function(observer){this.observers.Add( observer);
};
Subject.prototype.RemoveObserver = function(observer){this.observers.RemoveAt( this.observers.IndexOf( observer, 0) );
};
Subject.prototype.Notify = function(context){let observerCount = this.observers.Count();
for(let i=0; i < observerCount; i++){this.observers.Get(i).Update(context);
}
};咱们接着定义建设新的观察者的一个框架。这里的 update 函数之后会被具体的行为笼罩。
// The Observer
function Observer(){this.Update = function(){// ...};
}在咱们的样例利用外面，咱们应用下面的观察者组件，当初咱们定义：
一个按钮，这个按钮用于减少新的充当观察者的抉择框到页面上
一个管制用的抉择框 , 充当一个被观察者，告诉其它抉择框是否应该被选中
一个容器，用于搁置新的抉择框
咱们接着定义具体被观察者和具体观察者，用于给页面减少新的观察者，以及实现更新接口。通过查看上面的内联的正文，搞清楚在咱们样例中的这些组件是如何工作的。
html
<button id="addNewObserver">Add New Observer checkbox</button>
<input id="mainCheckbox" type="checkbox"/>
<div id="observersContainer"></div>
Javascript
// 咱们 DOM 元素的援用
let controlCheckbox = document.getElementById("mainCheckbox"),
addBtn = document.getElementById("addNewObserver"),
container = document.getElementById("observersContainer");
// 具体的被观察者
//Subject 类扩大 controlCheckbox 类
extend(new Subject(), controlCheckbox );
// 点击 checkbox 将会触发对观察者的告诉
controlCheckbox["onclick"] = new Function("controlCheckbox.Notify(controlCheckbox.checked)");
addBtn["onclick"] = AddNewObserver;
// 具体的观察者
function AddNewObserver(){
// 建设一个新的用于减少的 checkbox
let check = document.createElement("input");
check.type = "checkbox";
// 应用 Observer 类扩大 checkbox
extend(new Observer(), check );
// 应用定制的 Update 函数重载
check.Update = function(value){this.checked = value;};
// 减少新的观察者到咱们次要的被观察者的观察者列表中
controlCheckbox.AddObserver(check);
// 将元素增加到容器的最初
container.appendChild(check);
}在这个例子外面，咱们看到了如何实现和配置观察者模式，理解了被观察者，观察者，具体被观察者，具体观察者的概念。
观察者模式和公布 / 订阅模式的不同
观察者模式的确很有用，然而在 javascript 工夫外面，通常咱们应用一种叫做公布 / 订阅模式的变体来实现观察者模式。这两种模式很类似，然而也有一些值得注意的不同。
观察者模式要求想要承受相干告诉的观察者必须到发动这个事件的被观察者上注册这个事件。
公布 / 订阅模式应用一个主题 / 事件频道，这个频道处于想要获取告诉的订阅者和发动事件的发布者之间。
这个事件零碎容许代码定义利用相干的事件，这个事件能够传递非凡的参数，参数中蕴含有订阅者所须要的值。这种想法是为了防止订阅者和发布者之间的依赖性。
这种和观察者模式之间的不同，使订阅者能够实现一个适合的事件处理函数，用于注册和承受由发布者播送的相干告诉。
这里给出一个对于如何应用发布者 / 订阅者模式的例子，这个例子中残缺地实现了功能强大的
publish(), subscribe() 和 unsubscribe()。// 一个非常简单的邮件处理器
// 承受的音讯的计数器
let mailCounter = 0;
// 初始化一个订阅者，这个订阅者监听名叫 "inbox/newMessage" 的频道
// 渲染新音讯的粗略信息
let subscriber1 = subscribe("inbox/newMessage", function( topic, data) {
// 日志记录主题，用于调试
console.log("A new message was received:", topic);
// 应用来自于被观察者的数据，用于给用户展现一个音讯的粗略信息
$(".messageSender").html(data.sender);
$(".messagePreview").html(data.body);
});
// 这是另外一个订阅者，应用雷同的数据执行不同的工作
// 更细计数器，显示以后来自于发布者的新信息的数量
let subscriber2 = subscribe("inbox/newMessage", function( topic, data) {$('.newMessageCounter').html(mailCounter++);
});
publish( "inbox/newMessage", [{
sender:"hello@google.com",
body: "Hey there! How are you doing today?"
}]);
// 在之后，咱们能够让咱们的订阅者通过上面的形式勾销订阅来自于新主题的告诉
// unsubscribe(subscriber1,);
// unsubscribe(subscriber2);这个例子的更广的意义是对松耦合的准则的一种推崇。不是一个对象间接调用另外一个对象的办法，而是通过订阅另外一个对象的一个特定的工作或者流动，从而在这个工作或者流动呈现的时候的失去告诉。
长处
观察者和公布 / 订阅模式激励人们认真思考利用不同局部之间的关系，同时帮忙咱们找出这样的层，该层中蕴含有间接的关系，这些关系能够通过一些列的观察者和被观察者来替换掉。
这中形式能够无效地将一个应用程序切割成小块，这些小块耦合度低，从而改善代码的治理，以及用于潜在的代码复用。
应用观察者模式更深层次的动机是，当咱们须要保护相干对象的一致性的时候，咱们能够防止对象之间的严密耦合。例如，一个对象能够告诉另外一个对象，而不须要晓得这个对象的信息。
两种模式下，观察者和被观察者之间都能够存在动静关系。这提供很好的灵活性，而当咱们的利用中不同的局部之间严密耦合的时候，是很难实现这种灵活性的。
只管这些模式并不是万能的灵丹妙药，这些模式依然是作为最好的设计松耦合零碎的工具之一，因而在任何的 JavaScript 开发者的工具箱外面，都应该有这样一个重要的工具。
毛病
事实上，这些模式的一些问题实际上正是来自于它们所带来的一些益处。在公布 / 订阅模式中，将发布者共订阅者上解耦，将会在一些状况下，导致很难确保咱们利用中的特定局部依照咱们预期的那样失常工作。
例如，发布者能够假如有一个或者多个订阅者正在监听它们。比方咱们基于这样的假如，在某些利用处理过程中来记录或者输入谬误日志。如果订阅者执行日志性能解体了（或者因为某些起因不能失常工作），因为零碎自身的解耦实质，发布者没有方法感知到这些事件。
另外一个这种模式的毛病是，订阅者对彼此之间存在没有感知，对切换发布者的代价无从得悉。因为订阅者和发布者之间的动静关系，更新依赖也很能去追踪。
让咱们看一下最小的一个版本的公布 / 订阅模式实现。这个实现展现了公布，订阅的外围概念，以及如何勾销订阅。
let pubsub = {};
(function(q) {let topics = {},
subUid = -1;
q.publish = function(topic, args) {if ( !topics[topic] ) {return false;}
let subscribers = topics[topic],
len = subscribers ? subscribers.length : 0;
while (len--) {subscribers[len].func(topic, args);
}
return this;
};
q.subscribe = function(topic, func) {if (!topics[topic]) {topics[topic] = [];}
let token = (++subUid).toString();
topics[topic].push({
token: token,
func: func
});
return token;
};
q.unsubscribe = function(token) {for ( let m in topics) {if ( topics[m] ) {for ( let i = 0, j = topics[m].length; i < j; i++ ) {if ( topics[m][i].token === token) {topics[m].splice(i, 1);
return token;
}
}
}
}
return this;
};
}(pubsub));咱们当初能够应用公布实例和订阅感兴趣的事件，例如：
let messageLogger = function (topics, data) {console.log( "Logging:" + topics + ":" + data);
};
let subscription = pubsub.subscribe("inbox/newMessage", messageLogger);
pubsub.publish("inbox/newMessage", "hello world!");
// or
pubsub.publish("inbox/newMessage", ["test", "a", "b", "c"] );
// or
pubsub.publish( "inbox/newMessage", {
sender: "hello@google.com",
body: "Hey again!"
});
// We cab also unsubscribe if we no longer wish for our subscribers
// to be notified
// pubsub.unsubscribe(subscription);
pubsub.publish("inbox/newMessage", "Hello! are you still there?");观察者模式在利用设计中，解耦一系列不同的场景上十分有用，如果你没有用过它，我举荐你尝试一下明天提到的之前写到的某个实现。这个模式是一个易于学习的模式，同时也是一个威力微小的模式。
5、中介者模式
如果零碎组件之间存在大量的间接关系，就可能是时候，应用一个核心的控制点，来让不同的组件通过它来通信。中介者通过将组件之间显式的间接的援用替换成通过中心点来交互的形式，来做到松耦合。这样能够帮忙咱们解耦，和改善组件的重用性。
在事实世界中，相似的零碎就是，航行控制系统。一个航站塔（中介者）解决哪个飞机能够腾飞，哪个能够着陆，因为所有的通信（监听的告诉或者播送的告诉）都是飞机和控制塔之间进行的，而不是飞机和飞机之间进行的。一个中央集权的控制中心是这个零碎胜利的要害，也正是中介者在软件设计畛域中所表演的角色。
5.1 根底的实现
中间人模式的一种简略的实现能够在上面找到,publish()和 subscribe()办法都被裸露进去应用：
let mediator = (function(){let topics = {};
let subscribe = function(topic, fn){if ( !topics[topic] ){topics[topic] = [];}
topics[topic].push({ context: this, callback: fn} );
return this;
};
let publish = function(topic){
let args;
if (!topics[topic] ){return false;}
args = Array.prototype.slice.call(arguments, 1);
for (let i = 0, l = topics[topic].length; i < l; i++ ) {let subscription = topics[topic][i];
subscription.callback.apply(subscription.context, args);
}
return this;
};
return {
publish: publish,
subscribe: subscribe,
installTo: function(obj){
obj.subscribe = subscribe;
obj.publish = publish;
}
};
}());长处 & 毛病
中间人模式最大的益处就是，它节约了对象或者组件之间的通信信道，这些对象或者组件存在于从多对多到多对一的零碎之中。因为解耦合程度的因素，增加新的公布或者订阅者是绝对容易的。
兴许应用这个模式最大的毛病是它能够引入一个单点故障。在模块之间搁置一个中间人也可能会造成性能损失，因为它们常常是间接地的进行通信的。因为松耦合的个性，仅仅盯着播送很难去确认零碎是如何做出反馈的。
这就是说，揭示咱们本人解耦合的零碎领有许多其它的益处，是很有用的——如果咱们的模块相互之间间接的进行通信，对于模块的扭转（例如：另一个模块抛出了异样）能够很容易的对咱们零碎的其它局部产生多米诺连锁效应。这个问题在解耦合的零碎中很少须要被思考到。
在一天完结的时候，紧耦合会导致各种头痛，这仅仅只是另外一种可选的解决方案，然而如果失去正确实现的话也可能工作得很好。
6、原型模式
原型模式是指通过克隆的形式基于一个现有对象的模板创建对象的模式。
咱们可能将原型模式认作是基于原型的继承中, 咱们创立作为其它对象原型的对象. 原型对象本身被当做结构器创立的每一个对象的底本高效的应用着. 如果结构器函数应用的原型蕴含例如叫做 name 的属性, 那么每一个通过同一个结构器创立的对象都将领有这个雷同的属性。
咱们能够在上面的示例中看到对这个的展现：
let myCar = {
name: "Ford Escort",
drive: function () {console.log( "Weeee. I'm driving!");
},
panic: function () {console.log( "Wait. How do you stop this thing?");
}
};
let yourCar = Object.create(myCar);
console.log(yourCar.name);// Ford EscortObject.create 也容许咱们简略的继承先进的概念, 比方对象可能间接继承自其它对象, 这种不同的继承. 咱们新近也看到 Object.create 容许咱们应用 供给的第二个参数来初始化对象属性。例如：
let vehicle = {getModel: function () {console.log( "The model of this vehicle is.." + this.model);
}
};
let car = Object.create(vehicle, {
"id": {
value: "1",
// writable:false, configurable:false by default
enumerable: true
},
"model": {
value: "Ford",
enumerable: true
}
});这里的属性能够被 Object.create 的第二个参数来初始化, 应用一种相似于 Object.defineProperties 和 Object.defineProperties 办法所应用语法的对象字面值。
在枚举对象的属性, 和在一个 hasOwnProperty()查看中封装循环的内容时, 原型关系会造成麻烦, 这一事实是值得咱们关注的。
如果咱们心愿在不间接应用 Object.create 的前提下实现原型模式, 咱们能够像上面这样, 依照下面的示例, 模仿这一模式：
let vehiclePrototype = {init: function ( carModel) {this.model = carModel;},
getModel: function () {console.log( "The model of this vehicle is.." + this.model);
}
};
function vehicle(model) {function F() {};
F.prototype = vehiclePrototype;
let f = new F();
f.init(model);
return f;
}
let car = vehicle("Ford Escort");
car.getModel();留神：这种可选的形式不容许用户应用雷同的形式定义只读的属性(因为如果不小心的话 vehicle 原型可能会被扭转)。
原型模式的最初一种可选实现能够像上面这样：
let beget = (function () {function F() {}
return function (proto) {
F.prototype = proto;
return new F();};
})();7、命令模式
命名模式的指标是将办法的调用, 申请或者操作封装到一个独自的对象中, 给咱们酌情执行同时参数化和传递办法调用的能力. 另外, 它使得咱们能将对象从实现了行为的对象对这些行为的调用进行解耦, 为咱们带来了换出具体的对象这一更深水平的整体灵活性。
具体类是对基于类的编程语言的最好解释, 并且同抽象类的理念分割严密。抽象类定义了一个接口, 但并不需要提供对它的所有成员函数的实现。它扮演着驱动其它类的基类角色. 被驱动类实现了缺失的函数而被称为具体类.。命令模式背地的个别理念是为咱们提供了从任何执行中的命令中拆散出收回命令的责任, 取而代之将这一责任委托给其它的对象。
实现理智简略的命令对象, 将一个行为和对象对调用这个行为的需要都绑定到了一起. 它们始终都蕴含一个执行操作 (比方 run() 或者 execute()). 所有带有雷同接口的命令对象可能被简略地依据须要调换, 这被认为是命令模式的更大的益处之一。
为了展现命令模式, 咱们创立一个简略的汽车购买服务：
(function(){
let CarManager = {requestInfo: function( model, id){return "The information for" + model + "with ID" + id + "is foobar";},
buyVehicle: function(model, id){return "You have successfully purchased Item" + id + ", a" + model;},
arrangeViewing: function(model, id){return "You have successfully booked a viewing of" + model + "(" + id + ")";
}
};
})();看一看下面的这段代码, 它兴许是通过间接拜访对象来琐碎的调用咱们 CarManager 的办法。在技术上咱们兴许都会都会对这个没有任何失误达成谅解. 它是齐全无效的 Javascript 然而也会有状况不利的状况。
例如, 设想如果 CarManager 的外围 API 会产生扭转的这种状况. 这可能须要所有间接拜访这些办法的对象也跟着被批改. 这能够被看成是一种耦合, 显著违反了 OOP 方法学尽量实现松耦合的理念. 取而代之, 咱们能够通过更深刻的形象这些 API 来解决这个问题。
当初让咱们来扩大咱们的 CarManager, 以便咱们这个命令模式的应用程序失去接下来的这种成果: 承受任何能够在 CarManager 对象下面执行的办法, 传送任何能够被应用到的数据, 如 Car 模型和 ID。
这里是咱们心愿可能实现的样子：
CarManager.execute("buyVehicle", "Ford Escort", "453543");依照这种构造, 咱们当初应该像上面这样, 增加一个对于 ”CarManager.execute()” 办法的定义：
CarManager.execute = function (name) {return CarManager[name] && CarManager[name].apply(CarManager, [].slice.call(arguments, 1) );
};最终咱们的调用如下所示：
CarManager.execute("arrangeViewing", "Ferrari", "14523");
CarManager.execute("requestInfo", "Ford Mondeo", "54323");
CarManager.execute("requestInfo", "Ford Escort", "34232");
CarManager.execute("buyVehicle", "Ford Escort", "34232");8、外观模式
当咱们提出一个门面，咱们要向这个世界展示的是一个外观，这一外观可能隐匿着一种十分不同凡响的实在。这就是咱们行将要回顾的模式背地的灵感——门面模式。
这一模式提供了面向一种更大型的代码体提供了一个的更高级别的舒服的接口，暗藏了其真正的潜在复杂性。
把这一模式设想成要是出现给开发者简化的 API，一些总是会晋升使用性能的货色。
为了在咱们所学的根底上进行构建，门面模式同时须要简化一个类的接口，和把类同应用它的代码解耦。这给予了咱们应用一种形式间接同子系统交互的能力，这一形式有时候会比间接拜访子系统更加不容易出错。
门面的劣势包含易用，还有经常实现起这个模式来只是一小段路，不费劲。
让咱们通过实际来看看这个模式。这是一个没有通过优化的代码示例，然而这里咱们应用了一个门面来简化跨浏览器事件监听的接口。咱们创立了一个公共的办法来实现，此办法可能被用在查看个性的存在的代码中，以便这段代码可能提供一种平安和跨浏览器兼容计划。
let addMyEvent = function(el,ev,fn){if( el.addEventListener){el.addEventListener( ev,fn, false);
}else if(el.attachEvent){el.attachEvent( "on" + ev, fn);
}else{el["on" + ev] = fn;
}
};门面不仅仅只被用在它们本人身上，它们也可能被用来同其它的模式诸如模块模式进行集成。如咱们在上面所看到的，咱们模块模式的实体蕴含许多被定义为公有的办法。门面则被用来提供拜访这些办法的更加简略的 API：
let module = (function() {
let _private = {
i:5,
get : function() {console.log( "current value:" + this.i);
},
set : function(val) {this.i = val;},
run : function() {console.log( "running");
},
jump: function(){console.log( "jumping");
}
};
return {facade : function( args) {_private.set(args.val);
_private.get();
if (args.run) {_private.run();
}
}
};
}());
module.facade({run: true, val:10} );// "current value: 10" and "running"在这个示例中，调用 module.facade()将会触发一堆模块中的公有办法。但再一次，用户并不需要关怀这些。咱们曾经使得对用户而言不须要放心实现级别的细节就能消受一种个性。
9、工厂模式
工厂模式是另外一种关注对象创立概念的创立模式。它的畛域中同其它模式的不同之处在于它并没有明确要求咱们应用一个结构器。
取而代之，一个工厂能提供一个创建对象的公共接口，咱们能够在其中指定咱们心愿被创立的工厂对象的类型。
上面咱们通过应用结构器模式逻辑来定义汽车。这个例子展现了 Vehicle 工厂能够应用工厂模式来实现。
function Car(options) {
this.doors = options.doors || 4;
this.state = options.state || "brand new";
this.color = options.color || "silver";
}
function Truck(options){
this.state = options.state || "used";
this.wheelSize = options.wheelSize || "large";
this.color = options.color || "blue";
}
function VehicleFactory() {}
VehicleFactory.prototype.vehicleClass = Car;
VehicleFactory.prototype.createVehicle = function (options) {if( options.vehicleType === "car"){this.vehicleClass = Car;}else{this.vehicleClass = Truck;}
return new this.vehicleClass(options);
};
let carFactory = new VehicleFactory();
let car = carFactory.createVehicle( {
vehicleType: "car",
color: "yellow",
doors: 6 } );
console.log(car);何时应用工厂模式
当被利用到上面的场景中时，工厂模式特地有用：
当咱们的对象或者组件设置波及到高水平级别的复杂度时。
当咱们须要依据咱们所在的环境不便的生成不同对象的实体时。
当咱们在许多共享同一个属性的许多小型对象或组件上工作时。
当带有其它仅仅须要满足一种 API 约定 (又名鸭式类型) 的对象的组合对象工作时. 这对于解耦来说是有用的。
何时不要去应用工厂模式
当被利用到谬误的问题类型上时, 这一模式会给应用程序引入大量不必要的复杂性. 除非为创建对象提供一个接口是咱们编写的库或者框架的一个设计上指标, 否则我会倡议应用明确的结构器, 以防止不必要的开销。
因为对象的创立过程被高效的形象在一个接口前面的事实, 这也会给依赖于这个过程可能会有多简单的单元测试带来问题。
形象工厂
理解形象工厂模式也是十分实用的, 它的指标是以一个通用的指标将一组独立的工厂进行封装. 它将一堆对象的实现细节从它们的个别用例中拆散。
形象工厂应该被用在一种必须从其创立或生成对象的形式处独立, 或者须要同多种类型的对象一起工作, 这样的零碎中。
简略且容易了解的例子就是一个发动机工厂, 它定义了获取或者注册发动机类型的形式。形象工厂会被命名为 AbstractVehicleFactory。形象工厂将容许像 ”car” 或者 ”truck” 的发动机类型的定义, 并且结构工厂将仅实现满足发动机合同的类.(例如:Vehicle.prototype.driven 和
Vehicle.prototype.breakDown)。
let AbstractVehicleFactory = (function () {let types = {};
return {getVehicle: function ( type, customizations) {var Vehicle = types[type];
return (Vehicle ? new Vehicle(customizations) : null);
},
registerVehicle: function (type, Vehicle) {
let proto = Vehicle.prototype;
// only register classes that fulfill the vehicle contract
if (proto.drive && proto.breakDown) {types[type] = Vehicle;
}
return AbstractVehicleFactory;
}
};
})();
AbstractVehicleFactory.registerVehicle("car", Car);
AbstractVehicleFactory.registerVehicle("truck", Truck);
let car = AbstractVehicleFactory.getVehicle( "car" , {
color: "lime green",
state: "like new" } );
let truck = AbstractVehicleFactory.getVehicle( "truck" , {
wheelSize: "medium",
color: "neon yellow" } );10、Mixin 模式
mixin 模式指一些提供可能被一个或者一组子类简略继承性能的类, 意在重用其性能。
子类划分
子类划分是一个参考了为一个新对象继承来自一个基类或者超类对象的属性的术语. 在传统的面向对象编程中, 类 B 可能从另外一个类 A 处扩大。这里咱们将 A 看做是超类, 而将 B 看做是 A 的子类。如此, 所有 B 的实体都从 A 处继承了其 A 的办法，然而 B 依然可能定义它本人的办法, 包含那些重载的本来在 A 中的定义的办法。
B 是否应该调用曾经被重载的 A 中的办法, 咱们将这个引述为办法链.B 是否应该调用 A(超类)的结构器, 咱们将这称为结构器链。
为了演示子类划分, 首先咱们须要一个可能创立本身新实体的基对象。
let Person = function(firstName , lastName){
this.firstName = firstName;
this.lastName = lastName;
this.gender = "male";
};接下来, 咱们将制订一个新的类(对象), 它是一个现有的 Person 对象的子类. 让咱们设想咱们想要退出一个不同属性用来分辨一个 Person 和一个继承了 Person” 超类 ” 属性的 Superhero. 因为超级英雄分享了个别人类许多共有的特色(例如:name,gender), 因而这应该很有心愿充沛展现出子类划分是如何工作的。
let clark = new Person("Clark" , "Kent");
let Superhero = function(firstName, lastName , powers){Person.call( this, firstName, lastName);
this.powers = powers;
};
SuperHero.prototype = Object.create(Person.prototype);
let superman = new Superhero("Clark" ,"Kent" , ["flight","heat-vision"] );
console.log(superman);Superhero 结构器创立了一个自 Peroson 降落的对象。这种类型的对象领有链中位于它之上的对象的属性, 而且如果咱们在 Person 对象中设置了默认的值,Superhero 可能应用特定于它的对象的值笼罩任何继承的值。
Mixin(织入指标类)
在 Javascript 中, 咱们会将从 Mixin 继承看作是通过扩大收集性能的一种路径. 咱们定义的每一个新的对象都有一个原型, 从其中它能够继承更多的属性. 原型能够从其余对象继承而来, 然而更重要的是, 可能为任意数量的对象定义属性. 咱们能够利用这一事实来促成性能重用。
Mix 容许对象以最小量的复杂性从它们那里借用 (或者说继承) 性能. 作为一种利用 Javascript 对象原型工作得很好的模式, 它为咱们提供了从不止一个 Mix 处分享性能的相当灵便, 但比多继承无效得多得多的形式。
它们能够被看做是其属性和办法能够很容易的在其它大量对象原型共享的对象. 设想一下咱们定义了一个在一个规范对象字面量中含有实用功能的 Mixin, 如下所示：
let myMixins = {moveUp: function(){console.log( "move up");
},
moveDown: function(){console.log( "move down");
},
stop: function(){console.log( "stop! in the name of love!");
}
};而后咱们能够不便的扩大现有结构器性能的原型, 使其蕴含这种应用一个 如上面的 score.js_.extends()办法辅助器的行为：
function carAnimator(){this.moveLeft = function(){console.log( "move left");
};
}
function personAnimator(){this.moveRandomly = function(){/*..*/};
}
_.extend(carAnimator.prototype, myMixins);
_.extend(personAnimator.prototype, myMixins);
let myAnimator = new carAnimator();
myAnimator.moveLeft();
myAnimator.moveDown();
myAnimator.stop();如咱们所见, 这容许咱们将通用的行为轻易的 ” 混 ” 入相当一般对象结构器中。
在接下来的示例中, 咱们有两个结构器: 一个 Car 和一个 Mixin. 咱们将要做的是静 Car 参数化 (另外一种说法是扩大), 以便它可能继承 Mixin 中的特定办法, 名叫 driveForwar() 和 driveBackward(). 这一次咱们不会应用 Underscore.js。
取而代之，这个示例将演示如何将一个结构器参数化，以便在无需反复每一个结构器函数过程的前提下蕴含其性能。
let Car = function (settings) {
this.model = settings.model || "no model provided";
this.color = settings.color || "no colour provided";
};
// Mixin
let Mixin = function () {};
Mixin.prototype = {driveForward: function () {console.log( "drive forward");
},
driveBackward: function () {console.log( "drive backward");
},
driveSideways: function () {console.log( "drive sideways");
}
};
function augment(receivingClass, givingClass) {if ( arguments[2] ) {for ( var i = 2, len = arguments.length; i < len; i++) {receivingClass.prototype[arguments[i]] = givingClass.prototype[arguments[i]];
}
}else {for ( let methodName in givingClass.prototype) {if ( !Object.hasOwnProperty(receivingClass.prototype, methodName) ) {receivingClass.prototype[methodName] = givingClass.prototype[methodName];
}
}
}
}
augment(Car, Mixin, "driveForward", "driveBackward");
let myCar = new Car({
model: "Ford Escort",
color: "blue"
});
myCar.driveForward();
myCar.driveBackward();
augment(Car, Mixin);
let mySportsCar = new Car({
model: "Porsche",
color: "red"
});
mySportsCar.driveSideways();长处 & 毛病
Mixin 反对在一个零碎中降解性能的重复性, 减少性能的重用性. 在一些应用程序兴许须要在所有的对象实体共享行为的中央, 咱们可能通过在一个 Mixin 中保护这个共享的性能, 来很容易的防止任何反复, 而因而专一于只实现咱们零碎中真正彼此不同的性能。
也就是说, 对 Mixin 的副作用是值得商讨的. 一些开发者感觉将性能注入到对象的原型中是一个坏点子, 因为它会同时导致原型净化和肯定水平上的对咱们原有性能的不确定性. 在大型的零碎中, 很可能是有这种状况的。
然而, 弱小的文档对最大限度的缩小看待性能中的混入源的蛊惑是有帮忙的, 而且对于每一种模式而言, 如果在实现过程中小心行事, 咱们应该是没多大问题的。
11、装璜器模式
装璜器是旨在晋升重用性能的一种结构性设计模式。同 Mixin 相似，它能够被看作是利用子类划分的另外一种有价值的可选计划。
典型的装璜器提供了向一个零碎中现有的类动静增加行为的能力。其创意是装璜自身并不关怀类的根底性能，而只是将它本身拷贝到超类之中。
装璜器模式并不去深刻依赖于对象是如何创立的，而是专一于扩大它们的性能这一问题上。不同于只依赖于原型继承，咱们在一个简略的根底对象下面逐渐增加可能提供附加性能的装璜对象。它的想法是，不同于子类划分，咱们向一个根底对象增加（装璜）属性或者办法，因而它会是更加笨重的。
向 Javascript 中的对象增加新的属性是一个十分直接了当的过程，因而将这一特定牢记于心，一个非常简单的装璜器能够实现如下：
示例 1：带有新性能的装璜结构器
function vehicle(vehicleType){
this.vehicleType = vehicleType || "car";
this.model = "default";
this.license = "00000-000";
}
let testInstance = new vehicle("car");
console.log(testInstance);// vehicle: car, model:default, license: 00000-000
let truck = new vehicle("truck");
truck.setModel = function(modelName){this.model = modelName;};
truck.setColor = function(color){this.color = color;};
truck.setModel("CAT");
truck.setColor("blue");
console.log(truck);// vehicle:truck, model:CAT, color: blue
let secondInstance = new vehicle("car");
console.log(secondInstance);// vehicle: car, model:default, license: 00000-000示例 2：带有多个装璜器的装璜对象
function MacBook() {this.cost = function () {return 997;};
this.screenSize = function () { return 11.6;};
}
function Memory(macbook) {let v = macbook.cost();
macbook.cost = function() {return v + 75;};
}
function Engraving(macbook){let v = macbook.cost();
macbook.cost = function(){return v + 200;};
}
function Insurance(macbook){let v = macbook.cost();
macbook.cost = function(){return v + 250;};
}
let mb = new MacBook();
Memory(mb);
Engraving(mb);
Insurance(mb);
console.log(mb.cost() );// 1522
console.log(mb.screenSize() );// 11.6在下面的示例中，咱们的装璜器重载了超类对象 MacBook()的 object.cost()函数，使其返回的 Macbook 的以后价格加上了被定制后降级的价格。
这被看做是对原来的 Macbook 对象结构器办法的装璜，它并没有将其重写（例如，screenSize())，咱们所定义的 Macbook 的其它属性也放弃不变，完好无缺。
长处 & 毛病
因为它能够被通明的应用，并且也相当的灵便，因而开发者都挺乐意去应用这个模式——如咱们所见，对象能够用新的行为封装或者“装璜”起来，而后持续应用，并不必去放心根底的对象被扭转。在一个更加宽泛的范畴内，这一模式也防止了咱们去依赖大量子类来实现同样的成果。
然而在实现这个模式时，也存在咱们应该意识到的毛病。如果穷于治理，它也会因为引入了许多渺小然而类似的对象到咱们的命名空间中，从而显著的使得咱们的应用程序架构变得复杂起来。这里所担心的是，除了慢慢变得难于治理，其余不能纯熟应用这个模式的开发者也可能会有一段要把握它被应用的理由的艰巨期间。
足够的正文或者对模式的钻研，对此应该有助益，而只有咱们对在咱们的应程序中的多大范畴内应用这一模式有所掌控的话，咱们就能让两方面都失去改善。
12、亨元模式
享元模式是一个优化反复、迟缓和低效数据共享代码的经典结构化解决方案。它的指标是以相干对象尽可能多的共享数据，来缩小应用程序中内存的应用(例如：应用程序的配置、状态等)。
此模式最先由 Paul Calder 和 Mark Linton 在 1990 提出，并用拳击等级中少于 112 磅体重的等级名称来命名。享元 (“Flyweight”英语中的轻量级) 的名称自身是从以帮以助咱们实现缩小分量 (内存标记) 为指标的分量等级推导出的。
理论利用中，轻量级的数据共享采集被多个对象应用的类似对象或数据结构，并将这些数据搁置于单个的扩大对象中。咱们能够把它传递给依附这些数据的对象，而不是在他们每个下面都存储一次。
应用享元
有两种办法来应用享元。第一种是数据层，基于存储在内存中的大量雷同对象的数据共享的概念。第二种是 DOM 层，享元模式被作为事件管理中心，以防止将事件处理程序关联到咱们须要雷同行为父容器的所有子节点上。享元模式通常被更多的用于数据层，咱们先来看看它。
享元和数据共享
对于这个应用程序而言，围绕经典的享元模式有更多须要咱们意识到的概念。享元模式中有一个两种状态的概念——外在和外在。外在信息可能会被咱们的对象中的外部办法所须要，它们相对不能够作为性能被带出。外在信息则能够被移除或者放在内部存储。
带有雷同外在数据的对象能够被一个独自的共享对象所代替，它通过一个工厂办法被创立进去。这容许咱们去显著升高隐式数据的存储数量。
个中的益处是咱们可能留心于曾经被初始化的对象，让只有不同于咱们曾经领有的对象的外在状态时，新的拷贝才会被创立。
咱们应用一个管理器来解决外在状态。如何实现能够有所不同，但针对此的一种办法就是让管理器对象蕴含一个存储外在状态以及它们所属的享元对象的核心数据库。
经典的享元实现
近几年享元模式曾经在 Javascript 中失去了深刻的利用，咱们会用到的许多实现形式其灵感来自于 Java 和 C ++ 的世界。
咱们来看下来自维基百科的针对享元模式的 Java 示例的 Javascript 实现。
在这个实现中咱们将要应用如下所列的三种类型的享元组件：
享元对应的是一个接口，通过此接口可能承受和管制外在状态。
结构享元来理论的理论的实现接口，并存储外在状态。结构享元须是可能被共享的，并且具备操作外在状态的能力。
享元工厂负责管理享元对象，并且也创立它们。它确保了咱们的享元对象是共享的，并且能够对其作为一组对象进行治理，这一组对象能够在咱们须要的时候查问其中的单个实体。如果一个对象曾经在一个组外面创立好了，那它就会返回该对象，否则它会在对象池中新创建一个，并且返回之。
这些对应于咱们实现中的如下定义：
CoffeeOrder：享元
CoffeeFlavor：结构享元
CoffeeOrderContext：辅助器
CoffeeFlavorFactory：享元工厂
testFlyweight：对咱们享元的应用
鸭式冲减的“implements”
鸭式冲减容许咱们扩大一种语言或者解决办法的能力，而不须要变更运行时的源。因为接下的计划须要应用一个 Java 关键字“implements”来实现接口，而在 Javascript 本地看不到这种计划，那就让咱们首先来对它进行鸭式冲减。
Function.prototype.implementsFor 在一个对象结构器下面起作用，并且将承受一个父类（函数—）或者对象，而从继承于一般的继承（对于函数而言）或者虚构继承（对于对象而言）都能够。
// Simulate pure virtual inheritance/"implement" keyword for JS
Function.prototype.implementsFor = function(parentClassOrObject){if ( parentClassOrObject.constructor === Function) {
// Normal Inheritance
this.prototype = new parentClassOrObject();
this.prototype.constructor = this;
this.prototype.parent = parentClassOrObject.prototype;
} else {
// Pure Virtual Inheritance
this.prototype = parentClassOrObject; this.prototype.constructor = this; this.prototype.parent = parentClassOrObject;
}
return this;
};咱们能够通过让一个函数明确的继承自一个接口来补救 implements 关键字的缺失。上面，为了使咱们得以去调配反对一个对象的这些实现的性能，CoffeeFlavor 实现了 CoffeeOrder 接口，并且必须蕴含其接口的办法。
let CoffeeOrder = {
// Interfaces
serveCoffee:function(context){},
getFlavor:function(){}
};
function CoffeeFlavor(newFlavor){
let flavor = newFlavor;
if(typeof this.getFlavor === "function"){this.getFlavor = function() {return flavor;};
}
if(typeof this.serveCoffee === "function"){this.serveCoffee = function( context) {console.log("Serving Coffee flavor"+ flavor+"to table number"+ context.getTable());
};
}
}
CoffeeFlavor.implementsFor(CoffeeOrder);
function CoffeeOrderContext(tableNumber) {
return{getTable: function() {return tableNumber;}
};
}
function CoffeeFlavorFactory() {let flavors = {},
length = 0;
return {getCoffeeFlavor: function (flavorName) {let flavor = flavors[flavorName];
if (flavor === undefined) {flavor = new CoffeeFlavor(flavorName);
flavors[flavorName] = flavor;
length++;
}
return flavor;
},
getTotalCoffeeFlavorsMade: function () {return length;}
};
}
function testFlyweight(){let flavors = new CoffeeFlavor(),
tables = new CoffeeOrderContext(),
ordersMade = 0,
flavorFactory;
function takeOrders(flavorIn, table) {flavors[ordersMade] = flavorFactory.getCoffeeFlavor(flavorIn);
tables[ordersMade++] = new CoffeeOrderContext(table);
}
flavorFactory = new CoffeeFlavorFactory();
takeOrders("Cappuccino", 2);
takeOrders("Cappuccino", 2);
takeOrders("Frappe", 1);
takeOrders("Frappe", 1);
takeOrders("Xpresso", 1);
takeOrders("Frappe", 897);
takeOrders("Cappuccino", 97);
takeOrders("Cappuccino", 97);
takeOrders("Frappe", 3);
takeOrders("Xpresso", 3);
takeOrders("Cappuccino", 3);
takeOrders("Xpresso", 96);
takeOrders("Frappe", 552);
takeOrders("Cappuccino", 121);
takeOrders("Xpresso", 121);
for (var i = 0; i < ordersMade; ++i) {flavors[i].serveCoffee(tables[i]);
}
console.log("total CoffeeFlavor objects made:" + flavorFactory.getTotalCoffeeFlavorsMade());
}转换代码为应用享元模式
接下来，让咱们通过实现一个治理一个图书馆中所有书籍的零碎来持续察看享元。剖析得悉每一本书的重要元数据如下：
ID
题目
作者
类型
总页数
出版商 ID
ISBN
咱们也将须要上面一些属性，来跟踪哪一个成员是被借出的一本特定的书，借出它们的日期，还有预计的偿还日期。
借出日期
借出的成员
规定偿还工夫
可用性
let Book = function(id, title, author, genre, pageCount,publisherID, ISBN, checkoutDate, checkoutMember, dueReturnDate,availability){
this.id = id;
this.title = title;
this.author = author;
this.genre = genre;
this.pageCount = pageCount;
this.publisherID = publisherID;
this.ISBN = ISBN;
this.checkoutDate = checkoutDate;
this.checkoutMember = checkoutMember;
this.dueReturnDate = dueReturnDate;
this.availability = availability;
};
Book.prototype = {getTitle: function () {return this.title;},
getAuthor: function () {return this.author;},
getISBN: function (){return this.ISBN;},
updateCheckoutStatus: function(bookID, newStatus, checkoutDate , checkoutMember, newReturnDate){
this.id = bookID;
this.availability = newStatus;
this.checkoutDate = checkoutDate;
this.checkoutMember = checkoutMember;
this.dueReturnDate = newReturnDate;
},
extendCheckoutPeriod: function(bookID, newReturnDate){
this.id = bookID;
this.dueReturnDate = newReturnDate;
},
isPastDue: function(bookID){let currentDate = new Date();
return currentDate.getTime() > Date.parse( this.dueReturnDate);
}
};这对于最后小规模的藏书可能工作得还好，然而当图书馆裁减至每一本书的多个版本和可用的备份，这样一个大型的库存，咱们会发现管理系统的运行随着工夫的推移会越来越慢。应用成千上万的书籍对象可能会压倒内存，而咱们能够通过享元模式的晋升来优化咱们的零碎。
当初咱们能够像上面这样将咱们的数据拆散成为外在和外在的状态：同书籍对象（题目，版权归属）相干的数据是外在的，而借出数据（借出成员，规定偿还日期）则被看做是外在的。这实际上意味着对于每一种书籍属性的组合仅须要一个书籍对象。这依然具备相当大的数量，但相比之前曾经失去大大的缩减了。
上面的书籍元数据组合的繁多实体将在所有带有一个特定题目的书籍拷贝中共享。
let Book = function (title, author, genre, pageCount, publisherID, ISBN) {
this.title = title;
this.author = author;
this.genre = genre;
this.pageCount = pageCount;
this.publisherID = publisherID;
this.ISBN = ISBN;
};如咱们所见，外在状态曾经被移除了。从图书馆借出所要做的所有都被转移到一个管理器中，因为对象数据当初是分段的，工厂能够被用来做实例化。
一个根本工厂
当初让咱们定义一个十分根本的工厂。咱们用它做的工作是，执行一个查看来看看一本给定题目的书是不是之前曾经在零碎内创立过了；如果创立过了，咱们就返回它 – 如果没有，一本新书就会被创立并保留，使得当前能够拜访它。
这确保了为每一条实质上惟一的数据，咱们只创立了一份繁多的拷贝：
let BookFactory = (function () {let existingBooks = {}, existingBook;
return {createBook: function ( title, author, genre, pageCount, publisherID, ISBN) {existingBook = existingBooks[ISBN];
if (!!existingBook) {return existingBook;} else {let book = new Book( title, author, genre, pageCount, publisherID, ISBN);
existingBooks[ISBN] = book;
return book;
}
}
};
});治理外在状态
下一步，咱们须要将那些从 Book 对象中移除的状态存储到某一个中央——侥幸的是一个管理器（咱们会将其定义成一个单例）能够被用来封装它们。书籍对象和借出这些书籍的图书馆成员的组合将被称作书籍借出记录。
这些咱们的管理器都将会存储，并且也蕴含咱们在对 Book 类进行享元优化期间剥离的同借出相干的逻辑。
let BookRecordManager = (function () {let bookRecordDatabase = {};
return {addBookRecord: function ( id, title, author, genre, pageCount, publisherID, ISBN, checkoutDate, checkoutMember, dueReturnDate, availability) {let book = bookFactory.createBook( title, author, genre, pageCount, publisherID, ISBN);
bookRecordDatabase[id] = {
checkoutMember: checkoutMember,
checkoutDate: checkoutDate,
dueReturnDate: dueReturnDate,
availability: availability,
book: book
};
},
updateCheckoutStatus: function (bookID, newStatus, checkoutDate, checkoutMember, newReturnDate) {let record = bookRecordDatabase[bookID];
record.availability = newStatus;
record.checkoutDate = checkoutDate;
record.checkoutMember = checkoutMember;
record.dueReturnDate = newReturnDate;
},
extendCheckoutPeriod: function (bookID, newReturnDate) {bookRecordDatabase[bookID].dueReturnDate = newReturnDate;
},
isPastDue: function (bookID) {let currentDate = new Date();
return currentDate.getTime() > Date.parse( bookRecordDatabase[bookID].dueReturnDate );
}
};
});这些扭转的后果是所有从 Book 类中撷取的数据当初被存储到了 BookManager 单例（BookDatabase）的一个属性之中——与咱们以前应用大量对象相比能够被认为是更加高效的货色。同书籍借出相干的办法也被设置在这里，因为它们解决的数据是外在的而不外在的。
这个过程的确给咱们最终的解决办法减少了一点点复杂性，然而同曾经理智解决的数据性能问题相比，这只是一个小担心，如果咱们有同一本书的 30 份拷贝，当初咱们只须要存储它一次就够了。
每一个函数也会占用内存。应用享元模式这些函数只在一个中央存在（就是在管理器上），并且不是在每一个对象下面，这节约了内存上的应用。