文章详情 - 首页

##1. 单例模式 
单例模式（Singleton）：确保某一个类只有一个实例 
当需求实例唯一，就可以使用单例模式。 
示例: 
 
 
 // 最基础写法 
 let Popup = document.createElement("div"); 
 Popup.show = function (msg) { 
 this.innerText = msg; 
 document.body.appendChild(this) 
 }; 
 Popup.show("提示1"); 
 Popup.show("提示2"); 
 
 
 //代码分析: 在使用前已经初始化实例,应该最到使用的时候再去初始化实例(v-if,v-show) 
 let Popup = (function () { 
 let instance; 
 return function () { 
 if (!instance) { 
 instance = document.createElement("div"); 
 } 
 instance.show = function (msg) { 
 this.innerText = msg; 
 document.body.appendChild(this); 
 }; 
 return instance; 
 }; 
 })(); 
 Popup().show("测试1"); 
 Popup().show("测试2"); 
 console.log(Popup() === Popup());//测试单例 
 
` 
 
 // 抽象画类处理 
 let Popup = (function () { 
 let instance = null; 
 class Pop{ 
 constructor(){ 
 if( instance ){ 
 return instance; 
 } 
 instance = this; 
 this.ele = document.createElement("div"); 
 this.show = function (msg) { 
 this.ele.innerText = msg; 
 document.body.appendChild(this.ele); 
 }; 
 } 
 } 
 return Pop; 
 })(); 
 let a = new Popup(); 
 a.show("测试1"); 
 let b = new Popup(); 
 b.show("ceshi2"); 
 console.log(a === b);` 
 
 ` 
 
 /*实现核心方法: */ 
 let Single = (function(){ 
 let instance = null; 
 class S{ 
 constructor(){ 
 if(instance){ 
 return instance; 
 } 
 instance = this; 
 //code…… 
 } 
 } 
 })(); 
 console.log( new Single() === new Single() );` 
##2.工厂模式 
工厂模式（Factory）：定义一个用于创建对象的接口，让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到其子类。 
工厂模式就是使 同一类别 的 类 综合起来，以使接口统一方便调用，同时在修改以及扩展时更加方便 
示例: 
 
 class ZhangSan{ 
 constructor(){ 
 this.name = '张三'; 
 this.age = 20; 
 } 
 } 
 
 class Lisi{ 
 constructor(){ 
 this.name = '李四'; 
 this.age = 15; 
 this.sex = '男'; 
 } 
 } 
 
 let zhangsan = new ZhangSan(); 
 let lisi = new Lisi() 
 
 // 改进 
 class Person{ 
 constructor(name){ 
 let result = null 
 switch(name){ 
 case "ZhangSan": 
 result = new ZhangSan(); 
 break; 
 case "Lisi": 
 result = new Lisi(); 
 break; 
 } 
 return result; 
 } 
 } 
 let zhangsan = new Person('ZhangSan'); 
 let lisi = new Person('Lisi') 
 
 // 思考: 如果新增一个人的话,怎么办? 
 
 class Person{ 
 constructor(name){ 
 return this[name].call({}); 
 } 
 ZhangSan(){ 
 this.age = 20 
 return this 
 } 
 Lisi(){ 
 this.zex = '男' 
 return this 
 } 
 } 
 
 let zhangsan = new Person('ZhangSan'); 
 let lisi = new Person('Lisi') 
 let Wangwu = new Person('Wangwu') 
 
##3.建造者模式 
建造者模式（Builder）：将一个复杂对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示。 
 
 
 let Qianduan = function(){ 
 function Before(name){ 
 if( name === '' ){ 
 throw new Error("前台名称错误"); 
 } 
 this.name = name; 
 } 
 function Backend(number){ 
 if( (typeof number !== "number") ){ 
 throw new Error("后台成员数错误！"); 
 } 
 this.number = number; 
 } 
 function All(author){ 
 this.author = author || "前端组"; 
 } 
 
 return class { 
 constructor(name, number, author) { 
 Before.call(this,name); 
 Backend.call(this,author); 
 All.call(this,author); 
 } 
 }; 
 }(); 
 
 let group1 = new Qianduan(1,10,"前端1组"); 
 let group2 = new Qianduan(4,6,"前端2组"); 
##4.原型模式 
多个类使用到了相同的属性或方法 
[原型](http://mp.weixin.qq.com/s?__biz=MzUyMDcyMzc1Nw==&mid=2247489093&idx=2&sn=cc91fd7c8607427a24c933093d31b644&chksm=f9e75a07ce90d311be987d036c5af68a56e11d8b22d480aa95d90747ec38f0216a562aa81e8b&scene=0&xtrack=1#rd "原型") 
[原型链](http://mp.weixin.qq.com/s?__biz=MzUyMDcyMzc1Nw==&mid=2247489179&idx=2&sn=1f8cc94b52744eed92fd722a9e5b6b9b&chksm=f9e75ad9ce90d3cf07969bf66e56dcd70a677f3d65984c46c8218edcc25ac7e4ce8e771408a2&scene=0&xtrack=1#rd "原型链") 
[对象继承][1] 
##5.外观模式 
外观模式（Facede）：为一组复杂的子接口提供一个统一接口，以便更方便的去实现子接口的功能。 
最常见的外观模式就是对各种API的统一的兼容处理 
示例: 
 
 const div = document.getElementById('#container') 
 if( document.addEventListener ){ 
 div.addEventListener("click" , click, false); 
 }else if(document.attachEvent){ 
 div.attachEvent("onclick" , click); 
 }else{ 
 div.onclick = click; 
 } 
 
 // 不建议,DOM0级事件,下次添加会被覆盖 
 
 // 封装 
 function addEvent(dom , eName , fn){ 
 if( document.addEventListener ){ 
 dom.addaddEventListener(eName,fn,false); 
 }else if( document.attachEvent ){ 
 dom.attachEvent("on"+eName,fn); 
 }else{ 
 dom["on"+eName] = fn; 
 } 
 } 
 //使用 
 addEvent(oDiv , "click" ,click); 
 function click(){ 
 //code…… 
 } 
 
// JQuery模式 
 
 // DOM 0级事件 
 模式1: <input onclick="clickFn"></input> 
 模式2: document.getElementById('btn').onclick = function(){} 
 
 // DOM2级事件 
 document.getElementById('btn').addeventLister('click', function(){}) 
 
##6.适配器模式 
##7.代理模式 
##8.装饰器模式 
##9.桥接模式 
##10.组合模式 
##11.享元模式 
##12.观察者模式 
``` 
 // 创建一个事件订阅器对象 
 const eventEmitter = { 
 events: {}, 
 // 订阅事件 
 subscribe(event, callback) { 
 if (!this.events[event]) { 
 this.events[event] = []; 
 } 
 this.events[event].push(callback); 
 }, 
 // 发布事件 
 publish(event, data) { 
 if (this.events[event]) { 
 this.events[event].forEach(callback => { 
 callback(data); 
 }); 
 } 
 }, 
 // 取消订阅 
 unsubscribe(event, callback) { 
 if (this.events[event]) { 
 this.events[event] = this.events[event].filter(cb => cb !== callback); 
 } 
 } 
 }; 
 
 // 定义事件处理函数 
 function handleEvent1(data) { 
 console.log('事件1被触发，数据为:', data); 
 } 
 
 function handleEvent2(data) { 
 console.log('事件2被触发，数据为:', data); 
 } 
 
 // 订阅事件 
 eventEmitter.subscribe('event1', handleEvent1); 
 eventEmitter.subscribe('event2', handleEvent2); 
 
 // 发布事件 
 eventEmitter.publish('event1', 'Hello, World!'); 
 eventEmitter.publish('event2', { message: 'Hello, JavaScript!' }); 
 
 // 取消订阅事件 
 eventEmitter.unsubscribe('event1', handleEvent1); 
 
 // 再次发布事件 
 eventEmitter.publish('event1', '这个事件订阅被取消了，所以不会触发处理函数。'); 
 eventEmitter.publish('event2', '我还在接收事件2！'); 
``` 
 
``` 
class Dep { 
 subs:any[] 
 constructor() { 
 this.subs = [] 
 } 
 defined(watch:any) { 
 this.subs.push(watch) 
 } 
 notify() { 
 this.subs.forEach((e) => { 
 if (typeof e.update === 'function') { 
 try { 
 e.update.apply(e) 
 } catch (err) { 
 console.error(err) 
 } 
 } 
 }) 
 } 
} 
 
class Watch { 
 name:string 
 cb:Function 
 constructor(name:string, fn:Function) { 
 this.name = name; 
 this.cb = fn; 
 } 
 add(dep:any) { 
 dep.subs.push(this); 
 } 
 update() { 
 const cb = this.cb; 
 cb(this.name); 
 } 
} 
 
function addMethod() { 
 let historyDep = new Dep(); 
 return function (name:string) { 
 switch (name) 
 { 
 case 'historychange': 
 return function (name:string, fn:Function) { 
 let event = new Watch(name, fn) 
 historyDep.defined(event); 
 } 
 default: 
 let method = (history as any)[name] ; 
 return function () { 
 method.apply(history, arguments as any); 
 historyDep.notify(); 
 } 
 } 
 } 
} 
 
const historyListener = ()=>{ 
 const addHistoryMethod = addMethod() 
 window.addHistoryListener = addHistoryMethod('historychange'); 
 (history as any).pushState = addHistoryMethod('pushState'); 
 (history as any).replaceState = addHistoryMethod('replaceState'); 
} 
export default historyListener 
``` 
 
##13.状态模式 
##14.策略模式 
##15.命令模式 
##16.职责链模式 
##17.访问者模式 
##18.中介者模式 
##19.备忘录模式 
##20.迭代器模式 
##21.解释器模式 
[1]: https://www.yuque.com/akeggn/kh62bc/hvgq70 "对象继承"