状态模式
最后更新于：2022-04-01 10:04:10
状态模式的关键是区分事物内部的状态，事物内部状态的改变往往会带来事物的行为改变。
> 当电灯开着，此时按下开关，电灯会切换到关闭状态；再按一次开关，电灯又将被打开。同一个开关在不同的状态下，表现出来的行为是不一样的。
### 一、有限状态机
- 状态总数（state）是有限的。
- 任一时刻，只处在一种状态之中。
- 某种条件下，会从一种状态转变（transition）到另一种状态。
允许一个在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。**
解释：
（1）将状态封装成独立的类，并将请求委托给当前的状态对象，当对象的内部状态发生改变时，会带来不同的行为变化。
（2）使用的对象，在不同的状态下具有截然不同的行为（委托效果）
谈到封装，一般优先考虑封装对象的行为，而不是对象的状态。
但在状态模式中刚好相反，状态模式的关键是把事物的每种状态都封装成单独的类。
### 二、示例
> 点灯程序 （弱光 –> 强光 –> 关灯）循环
~~~
// 关灯
var OffLightState = function(light) {
this.light = light;
};
// 弱光
var OffLightState = function(light) {
this.light = light;
};
// 强光
var StrongLightState = function(light) {
this.light = light;
};
var Light = function(){
/* 开关状态 */
this.offLight = new OffLightState(this);
this.weakLight = new WeakLightState(this);
this.strongLight = new StrongLightState(this);
/* 快关按钮 */
this.button = null;
};
Light.prototype.init = function() {
var button = document.createElement("button"),
self = this;
this.button = document.body.appendChild(button);
this.button.innerHTML = '开关';
this.currentState = this.offLight;
this.button.click = function() {
self.currentState.buttonWasPressed();
}
};
// 让抽象父类的抽象方法直接抛出一个异常（避免状态子类未实现buttonWasPressed方法）
Light.prototype.buttonWasPressed = function() {
throw new Error("父类的buttonWasPressed方法必须被重写");
};
Light.prototype.setState = function(newState) {
this.currentState = newState;
};
/* 关灯 */
OffLightState.prototype = new Light(); // 继承抽象类
OffLightState.prototype.buttonWasPressed = function() {
console.log("关灯！");
this.light.setState(this.light.weakLight);
}
/* 弱光 */
WeakLightState.prototype = new Light();
WeakLightState.prototype.buttonWasPressed = function() {
console.log("弱光！");
this.light.setState(this.light.strongLight);
};
/* 强光 */
StrongLightState.prototype = new Light();
StrongLightState.prototype.buttonWasPressed = function() {
console.log("强光！");
this.light.setState(this.light.offLight);
};
~~~
**PS：说明补充**
必须把OffLightState、WeakLightState、StrongLightState构造函数提前。
~~~
new A("a");
var A = function(a) {
console.log(a)
}
new B("b");
function B(b) {
console.log(b);
}
~~~
函数声明会被提升到普通变量之前。
请参考：[《JavaScript提升（你不知道的JavaScript）》](http://blog.csdn.net/ligang2585116/article/details/46271699)【示例5】
### 三、性能优化点
（1）如何管理状态对象的创建和销毁？
第一种仅当state对象被需要时才创建并随后销毁（state对象比较庞大，优先选择），
另一种是一开始就创建好所有的状态对象，并且始终不销毁它们（状态改变频繁）。
（2）利用享元模式共享一个state对象。
### 四、JavaScript版本的状态机
（1）通过Function.prototype.call方法直接把请求委托给某个字面量对象来执行
~~~
// 状态机
var FSM = {
off: {
buttonWasPressed: function() {
console.log("关灯");
this.button.innerHTML = "下一次按我是开灯"; // 这是Light上的属性！！！
this.currState = FSM.on; // 这是Light上的属性！！！
}
},
on: {
buttonWasPressed: function() {
console.log("开灯");
this.button.innerHTML = "下一次按我是关灯";
this.currState = FSM.off;
}
},
};
var Light = function() {
this.currState = FSM.off; // 设置当前状态
this.button = null;
};
Light.prototype.init = function() {
var button = document.createElement("button");
self = this;
button.innerHTML = "已关灯";
this.button = document.body.appendChild(button);
this.button.onclick = function() {
// 请求委托给FSM状态机
self.currState.buttonWasPressed.call(self);
}
}
var light = new Light();
light.init();
~~~
（2）利用delegate函数
~~~
var delegate = function(client, delegation) {
return {
buttonWasPressed: function() {
return delegation.buttonWasPressed.apply(client, arguments);
}
};
};
// 状态机
var FSM = {
off: {
buttonWasPressed: function() {
console.log("关灯");
this.button.innerHTML = "下一次按我是开灯";
this.currState = this.onState;
}
},
on: {
buttonWasPressed: function() {
console.log("开灯");
this.button.innerHTML = "下一次按我是关灯";
this.currState = this.offState;
}
},
};
var Light = function() {
this.offState = delegate(this, FSM.off);
this.onState = delegate(this, FSM.on);
this.currState = this.offState; // 设置当前状态
this.button = null;
};
Light.prototype.init = function() {
var button = document.createElement("button");
self = this;
button.innerHTML = "已关灯";
this.button = document.body.appendChild(button);
this.button.onclick = function() {
// 请求委托给FSM状态机
self.currState.buttonWasPressed();
}
}
var light = new Light();
light.init();
~~~
转载请标明出处：[http://blog.csdn.net/ligang2585116](http://blog.csdn.net/ligang2585116)
装饰者模式
最后更新于：2022-04-01 10:04:08
有时我们不希望某个类天生就非常庞大，一次性包含许多职责。那么我们就可以使用装饰着模式。
装饰着模式可以动态地给某个对象添加一些额外的职责，从而不影响这个类中派生的其他对象。
装饰着模式将一个对象嵌入另一个对象之中，实际上相当于这个对象被另一个对象包装起来，形成一条包装链。
### 一、不改动原函数的情况下，给该函数添加些额外的功能
#### 1. 保存原引用
~~~
window.onload = function() {
console.log(1);
};
var _onload = window.onload || function() {};
window.onload = function() {
_onload();
console.log(2);
}
~~~
**问题**
（1）必须维护中间变量
（2）可能遇到this被劫持问题
在window.onload的例子中没有这个烦恼，是因为调用普通函数_onload时，this也指向window，跟调用window.onload时一样。
#### 2. this被劫持：
~~~
var _getElementById = document.getElementById;
document.getElementById = function(id) {
console.log(1);
return _getElementById(id);
}
return _getElementById(id); // 报错“Uncaught TypeError: Illegal invocation”
~~~
因为_getElementById是全局函数，当调用全局函数时，this是指向window的，而document.getElementById中this预期指向document。
#### 3. 解决this被劫持：
~~~
var _getElementById = document.getElementById;
document.getElementById = function(id) {
console.log(1);
return _getElementById.call(document, id);
}
~~~
### 二、用AOP装饰函数
~~~
/* 让新添加的函数在原函数之前执行（前置装饰）*/
Function.prototype.before = function(beforefn) {
var _self = this;
return function() {
beforefn.apply(this, arguments); // 新函数接收的参数会被原封不动的传入原函数
return _self.apply(this, arguments);
};
};
~~~
~~~
/* 让新添加的函数在原函数之后执行（后置装饰）*/
Function.prototype.after = function(afterfn) {
var _self = this;
return function() {
var ret = _self.apply(this, arguments);
afterfn.apply(this, arguments);
return ret;
};
};
~~~
~~~
document.getElementById = document.getElementById.before(function() {
console.log(1);
});
~~~
### 三、避免污染原型
~~~
var before = function(fn, beforefn) {
return function() {
beforefn.apply(this, arguments);
return fn.apply(this, arguments);
};
};
var after = function(fn, afterfn) {
return function() {
var ret = fn.apply(this, arguments);
afterfn.apply(this, arguments);
return ret;
};
};
document.getElementById = before(document.getElementById, function(){
console.log(1);
});
~~~
### 四、示例–插件式的表单验证
结合[《JavaScript设计模式–策略模式》](http://blog.csdn.net/ligang2585116/article/details/50365199)中的【表单验证】，运用到ajax提交数据验证，效果很棒！
修改上述before方法
~~~
var before = function(fn, beforefn) {
return function() {
if(beforefn.apply(this, arguments) === false) {
// beforefn返回false，直接return，不执行后面的原函数
return;
}
return fn.apply(this, arguments);
};
};
~~~
~~~
/* 模拟数据验证*/
var validate = function() {
if(username === "") {
console.log("验证失败！");
return false;
}
return true;
}
/* 模拟ajax提交*/
var formSubmit = function() {
console.log("提交！！！");
}
username = 1;
formSubmit = before(formSubmit, validate); // 提交！！！
formSubmit();
username = "";
formSubmit = before(formSubmit, validate); // 验证失败！
formSubmit();
~~~
### 五、装饰者模式和代理模式
**相同点**：
这两种模式都描述了怎么为对象提供一定程度上的间接引用，它们的实现部分都保留了对另外一个对象的引用，并且向那个对象发送请求。
**区别：**
（1）代理模式：当直接访问本地不方便或者不符合需求时，为这个本体提供一个替代者。本地定义关键功能，而代理提供或拒绝对它的访问，或者在访问本体之前走一些额外的事情。（其做的事情还是跟本体一样）
（2）装饰者模式：为对象动态加入行为。（一开始不能确定对象的全部功能，实实在在的为对象添加新的职责和行为）
转载请标明出处：[http://blog.csdn.net/ligang2585116](http://blog.csdn.net/ligang2585116)
中介者模式
最后更新于：2022-04-01 10:04:06
### 一、定义
面向对象设计鼓励将行为分布到各个对象中，把对象划分成更小的粒度，有助于增强对象的可复用性。但由于这些细粒度对象之间的联系激增，又可能反过来降低它们的可复用性。
中介者模式的作用就是解除对象与对象之间的紧耦合关系。
### 二、示例：购买商品
> 假设我们正在开发一个购买手机的页面，购买流程中，可以选择手机颜色以及输入购买数量，同时页面中可以对应展示输入内容。还有一个按钮动态显示下一步操作（该颜色库存量充足，显示下一步；否则显示库存不足）。
~~~
<div>
<span>请选择颜色</span>
<select id="selColor">
<option value="roseGold">玫瑰金</option>
<option value="luxuryGold">土豪金</option>
</select>
</div>
<div>
<span>请输入购买数量：</span>
<input type="text" id="selNum" />
</div>
<div>
<span>您选择的颜色为：</span><strong id="conColor"></strong>
<span>您选择的数量为：</span><strong id="conNum"></strong>
</div>
<button id="nextBtn">加入购物车</button>
~~~
~~~
// 库存量
var goods = {
roseGold: 10,
luxuryGold: 10
};
var colorSelect = document.getElementById("selColor"),
numberInput = document.getElementById("selNum"),
colorInfo = document.getElementById("conColor"),
numberInfo = document.getElementById("conNum"),
nextBtn = document.getElementById("nextBtn");
colorSelect.onchange = function() {
var color = colorSelect.value, // 颜色
number = +numberInput.value, // 数量
stock = goods[color]; // 对应颜色的库存量
colorInfo.innerHTML = color;
if(!color) {
nextBtn.disabled = true;
nextBtn.innerHTML = "请选择手机颜色";
return;
}
if(!number || (((number - 0) | 0) !== (number - 0))) {
nextBtn.disabled = true;
nextBtn.innerHTML = "请选择手机数量";
return;
}
if( number > stock) {
nextBtn.disabled = true;
nextBtn.innerHTML = "库存不足";
return;
}
nextBtn.disabled = false;
nextBtn.innerHTML = "加入购物车";
};
/* 购买数量做同样处理 */
~~~
当页面中新增加另外一个下拉列表框，代表手机内存，上述代码改动面很大。
### 三、引入中介模式
所有的节点对象只跟中介者通信。
当下拉选择框selColor、selMemory亦或文本框selNum发生了事件行为时，仅通知中介者它们被改变了，同时把自己当做参数传入中介者，以便中介者辨别是谁发生了改变，剩下的事情交给中介者对象来完成。
~~~
<div>
<span>请选择颜色：</span>
<select id="selColor">
<option value="roseGold">玫瑰金</option>
<option value="luxuryGold">土豪金</option>
</select>
</div>
<div>
<span>请选择内存：</span>
<select id="selMemory">
<option value="16G">16G</option>
<option value="64G">64G</option>
</select>
</div>
<div>
<span>请输入购买数量：</span>
<input type="text" id="selNum" />
</div>
<div>
<span>您选择的颜色为：</span><strong id="conColor"></strong>
<span>您选择的内存为：</span><strong id="conMemory"></strong>
<span>您选择的数量为：</span><strong id="conNum"></strong>
</div>
<button id="nextBtn">加入购物车</button>
~~~
~~~
// 库存量
var goods = {
"roseGold|16G": 10,
"roseGold|32G": 10,
"luxuryGold|16G": 10,
"luxuryGold|32G": 10
};
var colorSelect = document.getElementById("selColor"),
memorySelect = document.getElementById("selMemory"),
numberInput = document.getElementById("selNum"),
colorInfo = document.getElementById("conColor"),
memeryInfo = document.getElementById("conMemory"),
numberInfo = document.getElementById("conNum"),
nextBtn = document.getElementById("nextBtn");
var mediator = (function() {
return {
changed: function(obj) {
var color = colorSelect.value, // 颜色
memory = memorySelect.value,// 内存
number = +numberInput.value, // 数量
stock = goods[color + '|' + memory]; // 对应颜色的库存量
if(obj === colorSelect) {
colorInfo.innerHTML = color;
}else if(obj === memorySelect) {
memeryInfo.innerHTML = memory;
}else if(obj === numberInput) {
numberInfo.innerHTML = number;
}
if(!color) {
nextBtn.disabled = true;
nextBtn.innerHTML = "请选择手机颜色";
return;
}
if(!memory) {
nextBtn.disabled = true;
nextBtn.innerHTML = "请选择手机内存";
return;
}
if(!number || (((number - 0) | 0) !== (number - 0))) {
nextBtn.disabled = true;
nextBtn.innerHTML = "请选择手机数量";
return;
}
if( number > stock) {
nextBtn.disabled = true;
nextBtn.innerHTML = "库存不足";
return;
}
nextBtn.disabled = false;
nextBtn.innerHTML = "加入购物车";
}
};
})();
// 事件函数
colorSelect.onchange = function() {
mediator.changed(this);
};
memorySelect.onchange = function() {
mediator.changed(this);
};
numberInput.oninput = function() {
mediator.changed(this);
}
~~~
中介者模式是迎合迪米特法则的一种实现。迪米特法则也叫最少知识原则，是指一个对象应该尽可能少地了解另外的对象。避免“城门失火，殃及鱼池”。
缺点：最大的缺点是系统中会增加一个中介对象，因为对象之间交互的复杂性，转移成了中介对象的复杂性，使得中介者对象经常是巨大的，很难维护。
一般来说，如果对象之间的复杂耦合确实导致调用和维护出现了困难，而且这些耦合度随项目的变化呈指数增长，那么我们可以考虑用中介者模式来重构代码。
转载请标明出处：[http://blog.csdn.net/ligang2585116](http://blog.csdn.net/ligang2585116)
责任链模式
最后更新于：2022-04-01 10:04:04
### 一、定义
责任链模式：使多个对象都有机会处理请求，从而避免请求的发送者和接受者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。
### 二、示例
> 假设这么一个场景：
我们负责一个售卖手机的电商网站，经过分别缴纳500元定金和200元定金的两轮预定后，到了正式购买阶段。针对预定用户实行优惠，支付过500元定金的用户会收到100元的商城优惠券，支付过200元定金的用户会收到50元的商城优惠券，没有支付定金的用户归为普通购买，且在库存有限的情况下不一定保证买到。
~~~
/* 传统方式实现 */
// orderType：[1:500, 2:200, 3:普通]，isPaid：true/false，stock：库存量
var order = function(orderType, isPaid, stock) {
if(orderType === 1) {
if(isPaid) {
console.log("500元定金预购，得到100优惠券");
} else {
if(stock > 0) {
console.log("普通购买，无优惠券");
}else {
console.log("库存不足");
}
}
}else if(orderType === 2) {
if(isPaid) {
console.log("200元定金预购，得到50优惠券");
} else {
if(stock > 0) {
console.log("普通购买，无优惠券");
}else {
console.log("库存不足");
}
}
}else if(orderType === 2) {
if(stock > 0) {
console.log("普通购买，无优惠券");
}else {
console.log("库存不足");
}
}
}
order(1, true, 500);
/*职责链 */
var order500 = function(orderType, isPaid, stock) {
if(orderType === 1 && isPaid === true) {
console.log("500元定金预购，得到100优惠券");
}else {
return "nextSuccessor";
}
};
var order200 = function(orderType, isPaid, stock) {
if(orderType === 2 && isPaid === true) {
console.log("200元定金预购，得到50优惠券");
}else {
return "nextSuccessor";
}
};
var orderNormal = function(orderType, isPaid, stock) {
if(stock > 0) {
console.log("普通购买，无优惠券");
}else {
console.log("库存不足");
}
};
Function.prototype.after = function(fn) {
var self = this;
return function() {
var ret = self.apply(this, arguments);
if(ret === "nextSuccessor") {
return fn.apply(this, arguments);
}
return ret;
};
}
var order = order500.after(order200).after(orderNormal);
order(1, true, 10);
~~~
**优点：解耦了请求发送者和N个接受者之间的复杂关系。**
**弊端：不能保证某个请求一定会被链中的节点处理。**
### 三、示例：文件上传对象
示例2：用责任链模式获取文件上传对象
PS：对比[《JavaScript设计模式–迭代器模式》](http://blog.csdn.net/ligang2585116/article/details/50365246)
~~~
function getActiveUploadObj() {
try{
return new ActiveObject("TXFTNActiveX.FTNUpload"); // IE上传控件
}catch(e) {
return "nextSuccessor";
}
}
function getFlashUploadObj() {
if(supportFlash().f === 1) { // supportFlash见《JavaScript设计模式--迭代器模式》
var str = '<object type="application/x-shockwave-flash"></object>';
return $(str).appendTo($("body"));
}
return "nextSuccessor";
}
function getFormUploadObj() {
var str = '<input name="file" type="file" class="ui-file" />';
return $(str).appendTo($("body"));
}
var getUploadObj = getActiveUploadObj.after(getFlashUploadObj).after(getFormUploadObj);
console.log(getUploadObj());
~~~
无论是作用域链、原型链、还是DOM节点中的事件冒泡，我们都能从中找到职责链的影子。
转载请标明出处：[http://blog.csdn.net/ligang2585116](http://blog.csdn.net/ligang2585116)
享元模式
最后更新于：2022-04-01 10:04:01
### 一、定义
享元（flyweight）模式是一种用于性能优化的模式，核心是运用共享技术来有效支持大量细刻度的对象。
在JavaScript中，浏览器特别是移动端的浏览器分配的内存并不算多，如何节省内存就成了一个非常有意义的事情。
享元模式是一种用时间换空间的优化模式
> 内衣工厂有100种男士内衣、100中女士内衣，要求给每种内衣拍照。如果不使用享元模式则需要200个塑料模特；使用享元模式，只需要男女各1个模特。
### 二、什么场景下使用享元模式？
（1）程序中使用大量的相似对象，造成很大的内存开销
（2）对象的大多数状态都可以变为外部状态，剥离外部状态之后，可以用相对较少的共享对象取代大量对象
### 三、如何应用享元模式？
第一种是应用在数据层上，主要是应用在内存里大量相似的对象上；
第二种是应用在DOM层上，享元可以用在中央事件管理器上用来避免给父容器里的每个子元素都附加事件句柄。
享元模式要求将对象的属性分为内部状态和外部状态。
内部状态独立于具体的场景，通常不会改变，可以被一些对象共享；
外部状态取决于具体的场景，并根据场景而变化，外部状态不能被共享。
享元模式中常出现工厂模式，Flyweight的内部状态是用来共享的，Flyweight factory负责维护一个Flyweight pool(模式池)来存放内部状态的对象。
缺点：对象数量少的情况，可能会增大系统的开销，实现的复杂度较大！
### 四、示例：文件上传
~~~
var Upload = function(uploadType) {
this.uploadType = uploadType;
}
/* 删除文件（内部状态） */
Upload.prototype.delFile = function(id) {
uploadManger.setExternalState(id, this); // 把当前id对应的外部状态都组装到共享对象中
// 大于3000k提示
if(this.fileSize < 3000) {
return this.dom.parentNode.removeChild(this.dom);
}
if(window.confirm("确定要删除文件吗？" + this.fileName)) {
return this.dom.parentNode.removeChild(this.dom);
}
}
/** 工厂对象实例化
* 如果某种内部状态的共享对象已经被创建过，那么直接返回这个对象
* 否则，创建一个新的对象
*/
var UploadFactory = (function() {
var createdFlyWeightObjs = {};
return {
create: function(uploadType) {
if(createdFlyWeightObjs[uploadType]) {
return createdFlyWeightObjs[uploadType];
}
return createdFlyWeightObjs[uploadType] = new Upload(uploadType);
}
};
})();
/* 管理器封装外部状态 */
var uploadManger = (function() {
var uploadDatabase = {};
return {
add: function(id, uploadType, fileName, fileSize) {
var flyWeightObj = UploadFactory.create(uploadType);
var dom = document.createElement('div');
dom.innerHTML = "<span>文件名称：" + fileName + "，文件大小：" + fileSize +"</span>"
+ "<button class='delFile'>删除</button>";
dom.querySelector(".delFile").onclick = function() {
flyWeightObj.delFile(id);
};
document.body.appendChild(dom);
uploadDatabase[id] = {
fileName: fileName,
fileSize: fileSize,
dom: dom
};
return flyWeightObj;
},
setExternalState: function(id, flyWeightObj) {
var uploadData = uploadDatabase[id];
for(var i in uploadData) {
// 直接改变形参（新思路！！）
flyWeightObj[i] = uploadData[i];
}
}
};
})();
/*触发上传动作*/
var id = 0;
window.startUpload = function(uploadType, files) {
for(var i=0,file; file = files[i++];) {
var uploadObj = uploadManger.add(++id, uploadType, file.fileName, file.fileSize);
}
};
/* 测试 */
startUpload("plugin", [
{
fileName: '1.txt',
fileSize: 1000
},{
fileName: '2.txt',
fileSize: 3000
},{
fileName: '3.txt',
fileSize: 5000
}
]);
startUpload("flash", [
{
fileName: '4.txt',
fileSize: 1000
},{
fileName: '5.txt',
fileSize: 3000
},{
fileName: '6.txt',
fileSize: 5000
}
]);
~~~
### 五、补充：
（1）直接改变形参Demo
~~~
function f1() {
var obj = {a: 1};
f2(obj);
console.log(obj); // {a: 1, b: 2}
}
function f2(obj) {
obj.b = 2;
}
f1();
~~~
（2）对象池，也是一种性能优化方案，其跟享元模式有一些相似之处，但没有分离内部状态和外部状态的过程。
~~~
var objectPoolFactory = function(createObjFn) {
var objectPool = [];
return {
create: function() {
var obj = objectPool.lenght === 0 ? createObjFn.apply(this, arguments) : objectPool.shift();
return obj;
},
recover: function() {
objectPool.push(obj);
}
};
}
~~~
转载请标明出处：[http://blog.csdn.net/ligang2585116](http://blog.csdn.net/ligang2585116)
模板方法模式
最后更新于：2022-04-01 10:03:59
### 一、定义
模板方法是基于继承的设计模式，可以很好的提高系统的扩展性。 java中的抽象父类、子类
模板方法有两部分结构组成，第一部分是抽象父类，第二部分是具体的实现子类。
### 二、示例
Coffee or Tea
(1) 把水煮沸
(2) 用沸水浸泡茶叶
(3) 把茶水倒进杯子
(4) 加柠檬
~~~
/* 抽象父类：饮料 */
var Beverage = function(){};
// (1) 把水煮沸
Beverage.prototype.boilWater = function() {
console.log("把水煮沸");
};
// (2) 沸水浸泡
Beverage.prototype.brew = function() {
throw new Error("子类必须重写brew方法");
};
// (3) 倒进杯子
Beverage.prototype.pourInCup = function() {
throw new Error("子类必须重写pourInCup方法");
};
// (4) 加调料
Beverage.prototype.addCondiments = function() {
throw new Error("子类必须重写addCondiments方法");
};
/* 模板方法 */
Beverage.prototype.init = function() {
this.boilWater();
this.brew();
this.pourInCup();
this.addCondiments();
}
/* 实现子类 Coffee*/
var Coffee = function(){};
Coffee.prototype = new Beverage();
// 重写非公有方法
Coffee.prototype.brew = function() {
console.log("用沸水冲泡咖啡");
};
Coffee.prototype.pourInCup = function() {
console.log("把咖啡倒进杯子");
};
Coffee.prototype.addCondiments = function() {
console.log("加牛奶");
};
var coffee = new Coffee();
coffee.init();
~~~
通过模板方法模式，在父类中封装了子类的算法框架。这些算法框架在正常状态下是适用大多数子类的，但也会出现“个性”子类。
如上述流程，加调料是可选的。
钩子方法可以解决这个问题，放置钩子是隔离变化的一种常见手段。
~~~
/* 添加钩子方法 */
Beverage.prototype.customerWantsCondiments = function() {
return true;
};
Beverage.prototype.init = function() {
this.boilWater();
this.brew();
this.pourInCup();
if(this.customerWantsCondiments()) {
this.addCondiments();
}
}
/* 实现子类 Tea*/
var Tea = function(){};
Tea.prototype = new Beverage();
// 重写非公有方法
Tea.prototype.brew = function() {
console.log("用沸水冲泡茶");
};
Tea.prototype.pourInCup = function() {
console.log("把茶倒进杯子");
};
Tea.prototype.addCondiments = function() {
console.log("加牛奶");
};
Tea.prototype.customerWantsCondiments = function() {
return window.confirm("需要添加调料吗？");
};
var tea = new Tea();
tea.init();
~~~
JavaScript没有提供真正的类式继承，继承是通过对象与对象之间的委托来实现的。
### 三、“好莱坞原则”：别调用我们，我们会调用你
典型使用场景：
（1）模板方法模式：使用该设计模式意味着子类放弃了对自己的控制权，而是改为父类通知子类。作为子类，只负责提供一些设计上的细节。
（2）观察者模式：发布者把消息推送给订阅者。
（3）回调函数：ajax异步请求，把需要执行的操作封装在回调函数里，当数据返回后，这个回调函数才被执行。
转载请标明出处：[http://blog.csdn.net/ligang2585116](http://blog.csdn.net/ligang2585116)
观察者模式
最后更新于：2022-04-01 10:03:57
### 一、定义
观察者模式（发布-订阅模式）：其定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。
在JavaScript中，一般使用事件模型来替代传统的观察者模式。
好处：
（1）可广泛应用于异步编程中，是一种替代传递回调函数的方案。
（2）可取代对象之间硬编码的通知机制，一个对象不用再显示地调用另外一个对象的某个接口。两对象轻松解耦。
### 二、DOM事件–观察者模式典例
需要监控用户点击document.body的动作，但是我们没有办法预知用户将在什么时间点击。
所以，我们订阅document.body上的click事件，当body节点被点击时，body节点便向订阅者发布这个消息！
~~~
document.body.addEventListener("click", function() {
console.log(1);
}, false);
// 可以多个订阅者
document.body.addEventListener("click", function() {
console.log(2);
}, false);
doucment.body.click();
~~~
某网站有header头部、nav导航、消息列表等模块。这几个模块的渲染都需要获取用户登陆信息。
（1）一般写法：
~~~
$.ajax({
url: './login',
type: 'post',
contentType: 'application/json',
dataType:'json',
success: function(data) {
if(data.status === "success") {
// 登录成功，渲染header、nav
header.setInfo(data.headerInfo);
nav.setInfo(data.navInfo);
}
}
});
~~~
（2）使用观察者模式，很轻松解耦！
~~~
$.ajax({
...,
success: function(data) {
if(data.status === "success") {
// 登录成功，发布登陆成功消息
login.trigger("loginsuccess", data);
}
}
});
var header = (function() {
// 监听消息
login.listen("loginsuccess", function(data){
header.setInfo(data.headerInfo);
});
return {
setInfo: function(data) {
console.log("设置header信息");
}
};
})();
var nav = (function() {
login.listen("loginsuccess", function(data){
nav.setInfo(data.navInfo);
});
return {
setInfo: function(data) {
console.log("设置nav信息");
}
}
})();
~~~
### 三、通用观察者模式
~~~
/*
* 示例：
* Event.create("namespace1").listen('click', function(a){
* console.log(a);
* });
* Event.create("namespace1").trigger("click", 1);
*/
var Event = (function() {
var global = this,
Event,
_default = 'default';
Event = function() {
var _listen,
_trigger,
_remove,
_slice = Array.prototype.slice,
_shift = Array.prototype.shift,
_unshift = Array.prototype.unshift,
namespaceCache = [],
_create,
find,
each = function( ary, fn) {
var ret;
for(var i = 0, l = ary.length; i < l; i++) {
var n = ary[i];
ret = fn.call(n, i, n);
}
return ret;
};
// 订阅
_listen = function(key, fn, cache) {
if(!cache[key]) {
cache[key] = [];
}
cache[key].push(fn);
};
// 移除订阅
_remove = function(key, cache, fn) {
if(cache[key]) {
if(fn) {
for(var i = cache[key].length; i >=0; i++) {
if(cache[key][i] === fn) {
cache[key].splice(i, 1);
}
}
}else {
cache[key] = [];
}
}
};
// 发布
_trigger = function() {
var cache = _shift.call(arguments),
key = _shift.call(arguments),
args = arguments,
_self = this,
ret,
stack = cache[key];
if(!stack || !stack.length) {
return;
}
return each(stack, function() {
return this.apply(_self, args);
});
};
// 创建命名空间
_create = function(namespace) {
var namespace = namespace || _default;
var cache = {},
offlineStack = [], // 离线事件
ret = {
listen: function (key, fn, last) {
_listen(key, fn, cache);
if (offlineStack == null) {
return;
}
if (last === 'last') {
offlineStack.length && offlineStack.pop()();
} else {
each(offlineStack, function () {
this();
});
}
offlineStack = null;
},
one: function (key, fn, last) {
_remove(key, cache);
this.listen(key, fn, last);
},
remove: function(key, fn, last) {
_remove(key, cache, fn);
},
trigger: function() {
var fn,
args,
_self = this;
_unshift.call(arguments, cache);
args = arguments;
fn = function() {
return _trigger.apply(_self, args);
};
if(offlineStack) {
return offlineStack.push(fn);
}
return fn;
}
};
return namespace ? (namespaceCache[namespace] ? namespaceCache[namespace] : namespaceCache[namespace] = ret) : ret;
};
return {
create: _create,
one: function(key, fn, last) {
var event = this.create();
event.one(key, fn, last);
},
remove: function(key, fn) {
var event = this.create();
event.remove(key, fn);
},
listen: function(key, fn, last) {
var event = this.create();
event.listen(key, fn, last);
},
trigger: function() {
var event = this.create();
event.trigger.apply(this, arguments);
}
};
}();
return Event;
})();
~~~
转载请标明出处：[http://blog.csdn.net/ligang2585116](http://blog.csdn.net/ligang2585116)
迭代器模式
最后更新于：2022-04-01 10:03:54
迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。
JavaScript中的Array.prototype.forEach
### 一、jQuery中的迭代器
~~~
$.each([1, 2, 3], function(i, n) {
console.log("当前下标为："+ i + " 当前元素为："+ n );
});
~~~
### 二、实现自己的迭代器
~~~
var each = function(ary, callback) {
for(var i = 0, l = ary.length; i < l; i++) {
callback.call(ary[i], i, ary[i]);
}
};
each([1, 2, 3], function(i, n) {
console.log("当前下标为："+ i + " 当前元素为："+ n );
});
~~~
**注意**：区别于Array.prototype.forEach的参数！！！
~~~
[1, 2, 3].forEach(function(n, i, curAry){
console.log("当前下标为："+ i + " 当前元素为："+ n + " 当前数组为：" + curAry);
})
~~~
### 三、内部迭代器、外部迭代器
（1）内部迭代器：已经定义好了迭代规则，它完全接手整个迭代过程，外部只需一次初始调用。上述自定义each即为内部迭代器！
（2）外部迭代器：必须显示地请求迭代下一个元素。
示例：判断两个数组是否相等
**示例一：内部迭代器**
~~~
// 内部迭代器
var each = function(ary, callback) {
for(var i = 0, l = ary.length; i < l; i++) {
callback.call(ary[i], i, ary[i]);
}
};
// 比较函数
var compareAry = function(ary1, ary2) {
if(ary1.length != ary2.length) {
throw new Error("不相等"); // return console.log("不相等");
}
// 且住
each(ary1, function(i, n) {
if(n !== ary2[i]) {
// return console.log("不相等");
// return 只能返回到each方法外，后续console.log("相等")会继续执行，所以这里得使用throw
throw new Error("不相等");
}
});
console.log("相等");
}
compareAry([1, 2, 3], [1, 2, 4]);
~~~
**示例二：外部迭代器**
~~~
// 外部迭代器
var Iterator = function(obj) {
var current = 0,
next = function() {
current++;
},
isDone = function() {
return current >= obj.length;
},
getCurrentItem = function() {
return obj[current];
};
return {
next: next,
isDone: isDone,
getCurrentItem: getCurrentItem
};
};
// 比较函数
var compareAry = function(iterator1, iterator2) {
while( !iterator1.isDone() && !iterator2.isDone() ){
if(iterator1.getCurrentItem() !== iterator2.getCurrentItem()) {
throw new Error("不相等");
}
iterator1.next();
iterator2.next();
}
console.log("相等");
}
compareAry(new Iterator([1, 2, 3]), new Iterator([1, 2, 4]));
~~~
### 四、终止迭代器
~~~
var each = function(ary, callback) {
for(var i = 0, l = ary.length; i < l; i++) {
if(callback.call(ary[i], i, ary[i]) === false) {
break;
}
}
}
each([1, 2, 4, 1], function(i, n) {
if(n > 3) {
return false;
}
console.log(n);
});
~~~
### 五、应用（落地）
文件上传，根据不同的浏览器获取相应的上传组件对象。
对比[《JavaScript设计模式–责任链模式》](http://blog.csdn.net/ligang2585116/article/details/50365317)
~~~
var iteratorUploadObj = function() {
for(var i = 0, fn; fn = arguments[i]; i++) {
var uploadObj = fn();
if(uploadObj !== false) {
return uploadObj;
}
}
};
var uploadObj = iteratorUploadObj(getActiveUploadObj, getFlashUploadObj, getFormUploadObj);
function getActiveUploadObj() {
try{
return new ActiveObject("TXFTNActiveX.FTNUpload"); // IE上传控件
}catch(e) {
return false;
}
}
function getFlashUploadObj() {
if(supportFlash().f === 1) {
var str = '<object type="application/x-shockwave-flash"></object>';
return $(str).appendTo($("body"));
}
return false;
}
function getFormUploadObj() {
var str = '<input name="file" type="file" class="ui-file" />';
return $(str).appendTo($("body"));
}
// 是否支持flash
function supportFlash() {
var hasFlash = 0; //是否安装了flash
var flashVersion = 0; //flash版本
if (document.all) {
var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
if (swf) {
hasFlash = 1;
VSwf = swf.GetVariable("$version");
flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]);
}
} else {
if (navigator.plugins && navigator.plugins.length > 0) {
var swf = navigator.plugins["Shockwave Flash"];
if (swf) {
hasFlash = 1;
var words = swf.description.split(" ");
for (var i = 0; i < words.length; ++i) {
if (isNaN(parseInt(words[i]))) continue;
flashVersion = parseInt(words[i]);
}
}
}
}
return { f: hasFlash, v: flashVersion };
}
~~~
转载请标明出处：[http://blog.csdn.net/ligang2585116](http://blog.csdn.net/ligang2585116)
代理模式
最后更新于：2022-04-01 10:03:52
> 明星都有经纪人作为代理。如果请明星办一场商演，只能联系其经纪人，经纪人会把商演的细节和报酬谈好，再把合同交给明星签。
### 一、定义
代理模式：为一个对象提供一个代用品或占位符，以便控制对它的访问。
代理分为：保护代理和虚拟代理
保护代理：用于控制不同权限的对象对目标对象的访问，在JavaScript中很难判断谁访问了某个对象，所以保护代理很难实现。
### 二、图片预加载（最常见的虚拟代理应用场景）
图片预加载是一种常用技术，如果直接给某个img标签节点设置src属性，由于图片过大或者网络不佳，图片的位置往往有段时间会有空白。常见的做法事先用一张loading图片占位，然后异步加载图片，待图片加载完成，把其填充到img节点里。
**实现原理：**
创建一个Image对象：var a = new Image();
定义Image对象的src: a.src = “xxx.gif”;
这样做就相当于给浏览器缓存了一张图片。
可通过Image对象的complete属性来检测图像是否加载完成。每个Image对象都有一个complete属性，当图像处于装载过程中时，该属性值false,当发生了onload、onerror、onabort中任何一个事件后，则表示图像装载过程结束，此时complete属性为true。
（1）非代理实现
~~~
var myImage = (function() {
var imgNode = document.createElement("img");
document.body.appendChild(imgNode);
var img = new Image();
img.onload = function() {
imgNode.src = img.src;
};
return {
setSrc: function(src) {
imgNode.src = "./images/loading.gif";
img.src = src;
}
}
})();
myImage.setSrc("./images/originImg.png");
~~~
（2）代理实现
~~~
// 创建图片DOM
var myImage = (function() {
var imgNode = document.createElement("img");
document.body.appendChild(imgNode);
return {
setSrc: function(src) {
imgNode.src = src;
}
};
})();
// 代理
var proxyImage = (function() {
var img = new Image();
img.onload = function() {
myImage.setSrc(this.src); // this指向img！img加载完成后，将img.src传递给myImage
};
return {
setSrc: function(src) {
myImage.setSrc("./images/loading.gif"); // loading
img.src = src;
}
};
})();
proxyImage.setSrc("./images/originImg.png");
~~~
使用代理模式的好处：使每个函数功能单一，实现对象设计的“单一职责原则”！
### 三、文件同步
> 假设我们在做一个文件同步功能，当选中checkbox时候，它对应的文件就会被同步到另外一台服务器。
~~~
<body>
<input type="checkbox" id="1" />文件1
<input type="checkbox" id="2" />文件2
<input type="checkbox" id="3" />文件3
<input type="checkbox" id="4" />文件4
<input type="checkbox" id="5" />文件5
<input type="checkbox" id="6" />文件6
</body>
~~~
没选中一个checkbox就同步一次，显然不太合理。因为在web开发中，最大的开销就是网络请求。
解决方案方案：通过一个代理函数来收集一段时间之内的请求，然后一次性发给服务器。
~~~
var synchronousFile = function(id) {
console.log("开始同步文件，id为：" + id);
};
var proxySynchonousFile = (function() {
var cache = [], // 保存本次需要同步文件的id
timer; // 定时器
return function(id) {
cache.push(id);
if(timer) {
// 不要覆盖已经启动的定时
return;
}
timer = setTimeout(function(){
synchronousFile(cache.join(","));
clearTimeout(timer);
timer = null;
cache.length = 0; // 清空缓存
}, 2000);
}
})();
var checkboxs = document.getElementsByTagName("input");
for(var i = 0, c; c = checkboxs[i]; i++) {
c.onclick = function() {
if(this.checked === true) {
proxySynchonousFile(this.id);
}
}
}
~~~
### 四、缓存代理–计算乘积（序列一模一样）
~~~
var mult = function() {
var result = 1;
for(var i = 0, l = arguments.length; i < l; i++) {
result= result * arguments[i];
}
return result;
};
var proxyMult = (function() {
var cache = {}; // {"1,2,3": 6}
return function() {
var args = Array.prototype.join.call(arguments, ",");
if(args in cache) {
return cache[args];
}
return cache[args] = mult.apply(this, arguments);
}
})();
console.log(proxyMult(1, 2, 3));
// 改造：
var proxyFactory = function(fn) {
var cache = {};
return function() {
var args = Array.prototype.join.call(arguments, ",");
if(args in cache) {
return cache[args];
}
return cache[args] = fn.apply(this, arguments);
}
};
console.log(proxyFactory(mult)(1, 2, 3));
~~~
转载请标明出处：[http://blog.csdn.net/ligang2585116](http://blog.csdn.net/ligang2585116)
策略模式
最后更新于：2022-04-01 10:03:50
把不变的部分和变化的部分隔开是每个设计模式的主题。
> 条条大路通罗马。我们经常会遇到解决一件事情有多种方案，比如压缩文件，我们可以使用zip算法、也可以使用gzip算法。其灵活多样，我们可以采用策略模式解决。
### 一、定义
定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。
基于策略类模式的程序至少由两部分组成。第一个部分是一组策略类，策略类封装了具体的算法，并负责具体的计算过程。第二个部分是环境类Context，Context接收客户的请求，随后把请求委托给某一个策略类。
### 二、示例
> 计算奖金。绩效为S的发放4倍工资，绩效为A的发放3倍工资，绩效为B的发放2倍工资。
~~~
var strategies = {
"S": function(salary) {
return salary * 4;
},
"A": function(salary) {
return salary * 3;
},
"B": function(salary) {
return salary * 2;
}
};
// 接收请求
var calculateBonus = function(level, salary) {
return strategies[level](salary);
};
// 测试
console.log(calculateBonus("S", 20000));
console.log(calculateBonus("A", 20000));
console.log(calculateBonus("B", 20000));
~~~
### 三、延伸：表单验证
~~~
/* 校验策略对象 */
var validateStrategies = {
isEmpty: function (val, errorMsg) {
if (!val) {
return errorMsg;
}
},
isURL: function (val, errorMsg) {
if (!new RegExp("^(http:\\/\\/|https:\\/\\/)?([\\w\\-]+\\.)+[\\w\\-]+(\\/[\\w\\-\\.\\/?\\@\\%\\!\\&=\\+\\~\\:\\#\\;\\,]*)?$").test(val)) {
return errorMsg;
}
},
isEmail: function (val, errorMsg) {
if (!new RegExp('\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+').test(val)) {
return errorMsg;
}
},
isMaxLength: function (val, length, errorMsg) {
if (val.length > length) {
return errorMsg;
}
},
isMinLength: function (val, length, errorMsg) {
if (val.length < length) {
return errorMsg;
}
}
};
/* validator类 */
var validator = function () {
// 缓存验证策略
this.cache = [];
};
/**
* 添加要验证的策略
* @param dom 要验证的dom元素
* @param rules 验证规则
*/
validator.prototype.add = function (dom, rules) {
var self = this;
for (var i = 0, rule; rule = rules[i++];) {
(function (rule) {
var strategyAry = rule.strategy.split(":"); // ["isMaxLength", "10"]
var errorMsg = rule.errorMsg; // "内容长度不能超过10"
self.cache.push(function () {
var strategy = strategyAry.shift(); // "isMaxLength"
strategyAry.unshift(dom.value); // ["1@qq", "10"]
strategyAry.push(errorMsg); // ["1@qq", "10", "内容长度不能超过10"]
return validateStrategies[strategy].apply(dom, strategyAry);
});
})(rule);
}
};
/* 开始校验 */
validator.prototype.start = function () {
for (var i = 0, validateFunc; validateFunc = this.cache[i++];) {
var errorMsg = validateFunc();
if (errorMsg) {
return errorMsg;
}
}
};
// 测试
<label for="email">邮箱：</label><input type="text" name="email" value="1@qq">
var validatorInstance = new validator();
validatorInstance.add(
document.getElementsByName("email")[0],
[{
strategy: "isEmpty",
errorMsg: "内容不能为空"
},{
strategy: "isMaxLength:10",
errorMsg: "内容长度不能超过10"
},{
strategy: "isEmail",
errorMsg: "email格式不对"
}]);
errorMsg = validatorInstance.start();
~~~
转载请标明出处：[http://blog.csdn.net/ligang2585116](http://blog.csdn.net/ligang2585116)
单例模式
最后更新于：2022-04-01 10:03:48
### 一、定义
保证一个类仅有一个实例，并提供一个访问它的全局访问点。
当单击登陆按钮，页面中出现一个登陆浮窗，这个登陆浮窗是唯一的，无论单击多少次登陆按钮，这个浮窗都只会被创建一次，那么这个登陆浮窗就适合用单例模式来创建。
### 二、实现原理
要实现单例并不复杂，使用一个变量来标志当前是否已经为某个类创建过对象，如果是，则在下一次获取该类的实例时，直接返回之前创建的对象。
### 三、假单例
全局变量不是单例模式，但在JavaScript开发中，我们经常会把全局变量当成单例来使用。
~~~
var a = {};
~~~
降低全局变量带来的命名污染
（1）使用命名空间
~~~
var namespace1 = {
a: function(){},
b: 2
}
~~~
（2）使用闭包封装私有变量
~~~
var user = (function() {
var _name = 'lee',
_age = '25';
return {
getUserInfo: function() {
return _name + ":" + _age;
}
};
})();
~~~
### 四、惰性单例：在需要的时候才能创建对象实例。
~~~
var getSingle = function(fn) {
var result;
return function() {
return result || (result = fn.apply(this, arguments));
};
};
// 测试
function testSingle(){}
getSingle(testSingle)() === getSingle(testSingle)(); // true
~~~
### 五、补充：
**（1）懒加载**
~~~
var lazyload = function() {
console.log(1);
lazyload = function() {
console.log(2);
}
return lazyload();
}
lazyload();
~~~
**（2）预加载**
~~~
var preload = (function() {
console.log(1);
preload = function() {
console.log(2);
};
return preload;
})();
preload();
~~~
转载请标明出处：[http://blog.csdn.net/ligang2585116](http://blog.csdn.net/ligang2585116)
前奏
最后更新于：2022-04-01 10:03:45
最近阅读了《JavaScript设计模式与开发实践》（2015年度最佳推荐），收获颇多，自己对设计模式有了全新的了解和认识。在项目实践中也用到了一些，感觉很不错。
设计模式应遵守的原则：
（1）最少知识原则：一个软件实体应当尽可能少地与其他实体发生相互作用（把对象划分成较小的粒度，以便提高复用性）
（2）开放-封闭原则：软件实体（类、模块、函数）等应该是可以扩展的，但是不可修改。
### 一、原型模式
JavaScript基于原型的委托机制实现对象与对象之间的继承。
当对象无法响应某个请求时，会把该请求委托给它自己的原型。
构造器有原型，实例对象没有原型，有一个名为proto的属性，其默认指向它的构造器的原型对象，即{constructor}.prototype。
**示例一：**
~~~
var obj = {name: "ligang"};
var A = function() {};
A.prototype = obj;
var a = new A();
console.log(a.name); // ligang
~~~
（1）遍历对象a中所有属性，未找到name属性
（2）查找name属性的请求被委托给对象a的对象构造器的原型，它被a.**proto**记录着并且指向A.prototype，而其被设置为对象obj
（3）在对象obj中找到name属性，并返回。
**示例二：**
~~~
var obj = {name: "ligang"};
var A = function(name) {
this.name = name;
};
A.prototype = obj;
var a = new A();
console.log(a.name); // undefined
~~~
（1）首选遍历对象a中的所有属性，存在name属性，但未赋值
**示例三：**
~~~
var obj = {name: "ligang"};
var A = function() {};
A.prototype = obj;
var B = function() {};
B.prototype = new A();
var b = new B();
console.log(b.name); // ligang
~~~
查找顺序：
b对象 –> b.proto(即：B.prototype) –> new A()对象 –> B.prototype –> obj
### 二、this
#### 1. 词法作用域
首先明确JavaScript只具备词法作用域（书写代码时函数声明的位置来决定），不具备动态作用域。通过下述示例说明。
备注：词法作用域详见：[《JavaScript词法作用域（你不知道的JavaScript）》](http://blog.csdn.net/ligang2585116/article/details/46367565)
**示例一：**
~~~
function foo() {
console.log(a);
}
function bar() {
var a = 1;
foo();
}
bar(); // ReferenceError
~~~
**示例二：**
~~~
function foo() {
console.log(this.a); // this指向window
}
function bar() {
var a = 1;
foo();
}
bar(); // undefined
~~~
**示例三：**
~~~
function foo() {
console.log(this.a);
}
function bar() {
this.a = 1;
foo();
}
bar(); // 1
~~~
如果JavaScript存在动态作用域，示例一的结果应该为1。
#### 2. this
下面补充几点this注意事项
备注：关于this详见：[《JavaScript中的this（你不知道的JavaScript）》](http://blog.csdn.net/ligang2585116/article/details/47059289)
（1）this指向（构造器调用）
**示例一：**
~~~
var MyClass = function() {
this.age = 25;
this.name = "ligang";
};
var obj = new MyClass();
console.log("姓名：" + obj.name + " 年龄：" + obj.age); // 姓名：ligang 年龄：25
~~~
**示例二：**
~~~
var MyClass = function() {
this.age = 25;
this.name = "ligang";
return {
name: "camile"
};
};
var obj = new MyClass();
console.log("姓名：" + obj.name + " 年龄：" + obj.age); // 姓名：camile 年龄：undefined
~~~
**注意：**如果构造器显式地返回一个object类型的对象，那么此次运算最终返回这个对象，而不是我们之前期待的this。
#### 3. 指定函数内部this指向
call、apply、Function.prototype.bind
其中Function.prototype.bind部分浏览器不兼容，兼容性请查看[http://caniuse.com/](http://caniuse.com/)
模拟实现Function.prototype.bind：
~~~
Function.prototype.bind = function() {
var self = this,
context = [].shift.call(arguments),
args = [].slice.call(arguments);
return function() {
return self.apply(context, [].concat.call(args, [].slice.call(arguments)));
};
};
// 测试
var obj = {
name: "ligang"
};
var func = function(a, b, c) {
console.log(this.name);
console.log([a, b, c])
}.bind(obj, 1, 2);
func(3);
~~~
### 三、闭包和高阶函数
#### 1. 闭包
对象以方法的形式包含了过程，而闭包则是在过程中一环境的形式包含了数据。
**示例：缓存机制**
~~~
var mult = (function() {
var cache = {};
return function() {
var args = Array.prototype.join.call(arguments, ",");
if(args in cache) {
return cache[args];
}
var a = 1;
for(var i = 0, l = arguments.length; i < l; i++) {
a = a * arguments[i];
}
return cache[args] = a;
}
})();
console.log(mult(1, 2, 3));
console.log(mult(1, 2, 3)); // 再次计算，直接从缓存中取
~~~
**注意：**闭包容易导致循环引用，从而导致内存溢出。可以通过把这些变量置为null，回收这些变量。
#### 2. 高阶函数
高阶函数：函数作为参数传递；函数作为返回值输出。
（1）回调函数
~~~
function fun(callback) {
console.log(1);
if(typeof callback === 'function'){
setTimeout(function() {
callback();
});
}
}
fun(function(){console.log(2);});
~~~
（2）判断数据类型
~~~
var isType = function(type) {
return function(obj) {
return Object.prototype.toString.call(obj) === '[object' + type + ']';
}
};
var isArray = isType("Array");
var isNumber = isType("Number");
isArray([]);
isNumber("123");
~~~
（3）单例
~~~
var getSingle = function(fn) {
var result;
return function() {
return result || (result = fn.apply(this, arguments));
};
};
function testSingle(){}
getSingle(testSingle)() === getSingle(testSingle)(); // true
~~~
转载请标明出处：[http://blog.csdn.net/ligang2585116](http://blog.csdn.net/ligang2585116)！
前言
最后更新于：2022-04-01 10:03:43
> 原文出处：[JavaScript设计模式](http://blog.csdn.net/column/details/design-pattern-of-js.html)
作者：[ligang2585116](http://blog.csdn.net/ligang2585116)
**本系列文章经作者授权在看云整理发布，未经作者允许，请勿转载！**
# JavaScript设计模式
> 熟悉设计模式，会对其产生条件反射。在适合的场景出现时，可以很快地找到某种模式作为解决方案。该专栏将常用的JavaScript设计模式与项目实战相结合，给出完整可运行示例供参考。