设计模式
设计模式：针对特定问题的简洁而优雅的解决方案。这些优秀的解决方案经过了大量实际项目的验证。通俗一点说，设计模式就是给这些优秀的解决方案取个名字。
设计模式最初是静态类型语言中的设计模式，但设计模式实际上是解决某些问题的一种思想，与具体使用的语言无关。
设计模式分为三种类型，共23种。
- 创建型模式：单例模式、抽象工厂模式、建造者模式、工厂模式、原型模式。
- 结构型模式：适配器模式、桥接模式、装饰模式、组合模式、外观模式、享元模式、代理模式。
- 行为型模式：模版方法模式、命令模式、迭代器模式、观察者模式、中介者模式、备忘录模式、解释器模式、状态模式、策略模式、职责链模式(责任链模式)、访问者模式。
在许多大型Web项目中，JavaScript代码非常多，我们绝对有必要把一些优秀的设计模式借鉴到JavaScript这门语言中。
程序设计中的主要原则：
开闭原则，即 开放扩展，关闭修改
单一职责原则，指一个类或者模块应该有且只有一个改变的原因
高内聚低耦合，内聚性又称块内联系（模块内各元素联系的紧密性），耦合性也称块间联系（模块之间的独立性）
工厂模式
工厂模式是用来创建对象的一种最常用的设计模式。
在实际开发中，工厂模式主要用于复杂的对象构建、生成多个不同的实例对象等场景。
function factory(engine,speed,color) {
var car = {}; //原料
car.engine = engine; //加工
car.speed = speed; //加工
car.color = color; //加工
car.drive = function () {
console.log('最高时速为：' + car.speed);
}
return car; //出厂
}
var car1 = factory('v4','140km/h','blue');
var car2 = factory('v6','180km/h','red');
var factory = (function (){
var car = {
carA: function (){
this.type = '高配版';
this.engine = 'v8引擎';
this.speed = '最高时速320km/h';
},
carB: function (){
this.type = '中配版';
this.engine = 'v6引擎';
this.speed = '最高时速220km/h';
},
carC: function (){
this.type = '低配版';
this.engine = 'v4引擎';
this.speed = '最高时速180km/h';
}
}
return function (config){
return new car[config]();
}
})();
var car1 = factory('carA');
var car2 = factory('carB');
console.log(car1.type);
console.log(car2.type);
单例模式
单例模式：保证一个类仅有一个实例，并提供一个访问它的全局访问点。
应用场景：对象仅需要创建一个的时候
1.windows的任务管理器
2.多线程的线程池设计
3.全局缓存
4.浏览器的window对象
5.页面中的登录弹窗，无论点击多少次，弹窗只会被创建一次
面试题
function Fun() {
// 在函数中添加代码，使下面的运行结果成立
}
var obj1 = new Fun();
var obj2 = new Fun();
console.log(obj1 === obj2); //true
console.log(obj1.attr); // 'hello world'
最简单的单例--对象字面量
var instance = {
prop1: '属性1',
prop2: '属性2',
doSomething: function (){
console.log('do Something ...');
}}
使用闭包实现
var singleLogin = (function () {
var instance;
var CreateLogin = function () {
if (instance) {
return instance;
}
this.init();
return instance = this;
}
CreateLogin.prototype.init = function () {
var div = document.createElement('div');
div.className = 'login';
div.innerHTML = '登录窗口';
document.body.appendChild(div);
}
return function () {
return new CreateLogin();
};
})();
console.log( singleLogin() === singleLogin() );
优化
var createLogin = function () { //创建对象
var div = document.createElement('div');
div.className = 'login';
div.innerHTML = '登录窗口X';
document.body.appendChild(div);
return div;
}
var getSingle = function (fn) { //管理单例逻辑
var result;
return function () {
// if (result) {
// return result;
// }
// return result = new fn();
return result || ( result = new fn() );
}
}
var singleLogin = getSingle(createLogin);
console.log( singleLogin() === singleLogin() ); //true
代理模式
代理模式:是为一个对象提供一个代理，以便控制对它的访问。
代理模式分成两个部分，一个部分是本体，即为你想要实现的功能；另一部分为代理，代理可以代替本体做一些处理。
Image.png
代理模式是一种非常有意义的模式，在生活中可以找到很多代理模式的场景。
Image.png
不用代理模式：
var Gift = function (n) {
this.name = n;
};
var boy = {
sendGift: function (target) {
var flower = new Gift('花');
target.receiveGift(flower);
}
}
var girl = {
receiveGift: function (gift) {
console.log('收到礼物：' + gift.name);
}
}
boy.sendGift(girl);
使用代理模式：
var Gift = function (n) {
this.name = n;
};
var boy = {
sendGift: function (target) {
var flower = new Gift('花');
target.receiveGift(flower);
}
}
var guimi = {
receiveGift: function (gift) {
girl.receiveGift(gift);
}
}
var girl = {
receiveGift: function (gift) {
console.log('收到礼物：' + gift.name);
}
}
boy.sendGift(guimi);
发布-订阅模式(观察者模式)
发布-订阅模式（观察者模式）它定义对象间的一种 一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。
在JavaScript开发中，我们一般用事件模型来替代传统的发布-订阅模式。最常用且最简单的发布-订阅模式：DOM事件
document.body.addEventListener('click', function () {
alert('消息');
}, false);
订阅document.body上的click事件，当body节点被点击时，body节点便会向订阅者发布这个消息
发布-订阅模式的一个应用场景：售楼处(发布者)给意愿购房者(订阅者)发消息
var saleOffice = { //售楼处
clientList: {}, //缓存列表，存放订阅者的回调函数
addlisten: function (key,fn) { //添加订阅者
if (!this.clientList[key]) { //未订阅过此类消息，创建一个缓存列表
this.clientList[key] = [];
}
this.clientList[key].push(fn); //订阅的消息添加进消息缓存列表
},
trigger: function (key,msg) { //发布消息方法
var fnArr = this.clientList[key]; //取出该消息对应的回调函数集合
if (!fnArr || fnArr.length == 0) {
return false; // 如果未订阅该消息，则返回
}
for (var i = 0; i < fnArr.length; i++) {
fnArr[i](msg); //执行所有回调函数
}
}
}
saleOffice.addlisten('houseTypeA',function (msg) { //订阅消息
console.log('尊敬的客户，您关注房源信息为：' + msg);
});
saleOffice.addlisten('houseTypeB',function (msg) { //订阅消息
console.log('尊敬的客户，您关注房源信息为：' + msg);
});
saleOffice.trigger('houseTypeA','户型A，12000/m，建筑面积90平米。'); //发布消息
saleOffice.trigger('houseTypeB','户型B，12800/m，建筑面积120平米。'); //发布消息
案例：网站登录
假如一个商城网站项目有header头部、nav导航、消息列表、购物车、地址管理等模块，这些模块的渲染有一个共同的前提条件，就是必须先用ajax异步请求获取用户的登录信息。如果它们和用户信息模块产生了强耦合，比如下面这样的形式：
$.ajax({
type: 'post',
url: '[https://www.baidu.com/](https://www.baidu.com/)',
data: 'user=xiaocuo&pass=123456',
dataType: 'json',
success: function (data) {
header.setAvatar(data.avatar); // 设置头部头像
nav.setAvatar(data.avatar); // 设置导航头像
address.refresh(); // 刷新收货地址列表
message.refresh(); // 刷新消息列表
cart.refresh(); // 刷新购物车列表
abc.refresh(data); // 刷新某某列表
// ......
}
})
我们必须知道header模块设置头像的方法叫setAvatar，刷新购物车列表的方法叫refresh，各种新增模块的方法...等等，我们会越来越疲于应付这些突如其来的业务要求！
用发布-订阅模式重构之后，对用户信息感兴趣的业务模块将自行订阅登录成功的消息事件
var loginEvent = { //登录成功的消息事件
clientList: {}, //缓存列表，存放订阅者的回调函数
addlisten: function (key,fn) { //添加订阅者
if (!this.clientList[key]) { //未订阅过此类消息，创建一个缓存列表
this.clientList[key] = [];
}
this.clientList[key].push(fn); //订阅的消息添加进消息缓存列表
},
trigger: function (key,msg) { //发布消息方法
var fnArr = this.clientList[key]; //取出该消息对应的回调函数集合
if (!fnArr || fnArr.length == 0) {
return false; // 如果未订阅该消息，则返回
}
for (var i = 0; i < fnArr.length; i++) {
fnArr[i](msg); //执行所有回调函数
}
}
}
$.ajax({
type: 'post',
url: '[https://www.baidu.com/](https://www.baidu.com/)',
data: 'user=xiaocuo&pass=123456',
dataType: 'json',
success: function (data) {
loginEvent.trigger('loginSucc', data); // 发布登录成功消息
}
})
各个业务模块自己监听登录成功的消息：
var header = (function () { // 头部模块
loginEvent.addlisten('loginSucc', function (data) { //订阅登录成功的消息
header.setAvatar(data.avatar);
});
return {
setAvatar: function (data) {
console.log('设置头部模块头像');
}
}
})();
var nav = (function () { // 导航模块
loginEvent.addlisten('loginSucc', function (data) { //订阅登录成功的消息
nav.setAvatar(data.avatar);
});
return {
setAvatar: function (data) {
console.log('设置导航模块头像');
}
}
})();
var address = (function () { // 地址模块
loginEvent.addlisten('loginSucc', function (obj) { //订阅登录成功的消息
address.refresh(obj);
});
return {
refresh: function (data) {
console.log('刷新收货地址列表');
}
}
})();
// ......