JAVASCRIPT常用设计模式
单例模式
单例模式的定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否,如果存在则直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。
适用场景:一个单一对象。比如:弹窗,无论点击多少次,弹窗只应该被创建一次。
因为单体模式是只实例化一次,所以下面的实例是相等的。
class CreateUser { constructor(name) { this.name = name; this.getName(); } getName() { return this.name; } } // 代理实现单例模式 var ProxyMode = (function() { var instance = null; return function(name) { if(!instance) { instance = new CreateUser(name); } return instance; } })(); // 测试单体模式的实例 var a = new ProxyMode("aaa"); var b = new ProxyMode("bbb"); // 因为单体模式是只实例化一次,所以下面的实例是相等的 console.log(a === b); //true
装饰者模式
装饰者模式的定义:在不改变对象自身的基础上,在程序运行期间给对象动态地添加方法。
例如:现有4种型号的自行车分别被定义成一个单独的类,如果给每辆自行车都加上前灯、尾灯、铃铛这3个配件,如果用类继承的方式,需要创建4*3=12个子类。但如果通过装饰者模式,只需要创建3个类。
装饰者模式适用的场景:原有方法维持不变,在原有方法上再挂载其他方法来满足现有需求;函数的解耦,将函数拆分成多个可复用的函数,再将拆分出来的函数挂载到某个函数上,实现相同的效果但增强了复用性。
Function.prototype.before = function(beforefn) { var self = this; //保存原函数引用 return function(){ //返回包含了原函数和新函数的 '代理函数' beforefn.apply(this, arguments); //执行新函数,修正this 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; } } var func = function() { console.log('2'); } //func1和func3为挂载函数 var func1 = function() { console.log('1'); } var func3 = function() { console.log('3'); } func = func.before(func1).after(func3); func();
中介者模式
中介者模式的定义:通过一个中介者对象,其他所有的相关对象都通过该中介者对象来通信,而不是相互引用,当其中的一个对象发生改变时,只需要通知中介者对象即可。通过中介者模式可以解除对象与对象之间的紧耦合关系。
例如:现实生活中,航线上的飞机只需要和机场的塔台通信就能确定航线和飞行状态,而不需要和所有飞机通信。同时塔台作为中介者,知道每架飞机的飞行状态,所以可以安排所有飞机的起降和航线安排。
中介者模式适用的场景:例如购物车需求,存在商品选择表单、颜色选择表单、购买数量表单等等,都会触发change事件,那么可以通过中介者来转发处理这些事件,实现各个事件间的解耦,仅仅维护中介者对象即可。
var goods = { //手机库存 'red|32G': 3, 'red|64G': 1, 'blue|32G': 7, 'blue|32G': 6, }; //中介者 var mediator = (function() { var colorSelect = document.getElementById('colorSelect'); var memorySelect = document.getElementById('memorySelect'); var numSelect = document.getElementById('numSelect'); return { changed: function(obj) { switch(obj){ case colorSelect: //TODO break; case memorySelect: //TODO break; case numSelect: //TODO break; } } } })(); colorSelect.onchange = function() { mediator.changed(this); }; memorySelect.onchange = function() { mediator.changed(this); }; numSelect.onchange = function() { mediator.changed(this); };
观察者模式
又叫发布-订阅模式。它定义对象间的一种一对多的依赖关系,当一个对象的状态生改变时,所有依赖于它的对象都将得到通知。在js中,一般用事件模型代替它。
//发布者与订阅模式 var shoeObj = {}; // 定义发布者 shoeObj.list = []; // 缓存列表 存放订阅者回调函数 // 增加订阅者 shoeObj.listen = function(fn) { shoeObj.list.push(fn); // 订阅消息添加到缓存列表 } // 发布消息 shoeObj.trigger = function() { for (var i = 0, fn; fn = this.list[i++];) { fn.apply(this, arguments);//第一个参数只是改变fn的this, } } // 小红订阅如下消息 shoeObj.listen(function(color, size) { console.log("颜色是:" + color); console.log("尺码是:" + size); }); // 小花订阅如下消息 shoeObj.listen(function(color, size) { console.log("再次打印颜色是:" + color); console.log("再次打印尺码是:" + size); }); shoeObj.trigger("红色", 40); shoeObj.trigger("黑色", 42);
迭代器模式
提供一种方法,顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。不需要关心对象的内部构造,也可以按顺序访问其中的每个元素。很多语言都有自己内置的迭代器,比如js的Array.prototype.forEach。
- JavaScript 常用的设计模式之工厂模式
- JavaScript中几种常用的设计模式
- JavaScript的设计模式常用的几种方式(一)
- Javascript常用的设计模式详解
- Javascript常用的设计模式详解
- JavaScript的设计模式常用的几种方式(二)
- javascript中常用的设计模式
- JavaScript中几种常用的设计模式
- 奇舞javaScript 常用设计模式和组件化开发 -笔记
- Javascript常用的设计模式详解
- JavaScript创建对象时常用的设计模式
- Javascript十六种常用设计模式
- Javascript常用的设计模式详解(一)
- JavaScript常用设计模式
- Javascript常用的设计模式详解
- GOF提出的23种设计模式是哪些 设计模式有创建形、行为形、结构形三种类别 常用的Javascript中常用设计模式的其中17种 详解设计模式六大原则
- javaScript常用设计模式
- javascript常用的设计模式
- 常用设计模式——创建型