一, 参考文献: <<Javascipt 设计模式与开发实践>> -- 曾探
二, 设计模式的目的
- 设计模式是为了更好的代码重用性, 可读性,可靠性, 可维护性
- 学会理解了设计模式, 就会发现生活中无处不在
三, 设计模式分类
- 创建型: 工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式
- 结构型: 适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。
- 行为型: 策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。 以下我们将学习常见的设计模式:
四, 常见设计模式
1. 单例模式
- 定义: 保证一个类仅有一个实例, 并提供一个访问他的全局访问点
- 比如有些对象我们只需要一个, 比如线程池, 全局缓存, 登录, 购物车等, 这种我们适合使用单例模式
class SingleObj {
login() {}
}
SingleObj.getInstance = (function() {
let instance;
return function() {
if (!instance) {
// 如果实例没有被创建， 则创建新的实例
instance = new SingleObj();
}
return instance;
};
})();
let a = SingleObj.getInstance();
let b = SingleObj.getInstance();
// console.log("a", a == b);
- 应用场景：JQuery中的$、Vuex中的Store、Redux中的Store等
2. 策略模式
- 定义： 定义一系列的算法， 并把他们一个个封装起来， 并且使他们可以相互替换
let strategy = {
A: function(price) {
return price * 2;
},
B: function(price) {
return price * 2;
},
C: function(price) {
return price * 2;
}
};
function calc(price, type) {
return strategy[type](price);
}
calc(100, "A");
- 应用场景: 表单验证等
3. 代理模式
- 定义: 为一个对象提供一个代用品或占位符, 以便控制对他的访问
// 案例: jack 通过代理对象送花给rose
class Flower {}
class Jack {
constructor(target) {
this.target = target;
}
sendFlower(target) {
// jack送花 rose收到花
const flower = new Flower(); // 创建花
this.target.receiveFlower(flower); // 目标对象收到花
}
}
// 目标对象
class Rose {
receiveFlower(flower) {
console.log("收到花", flower);
}
}
class Proxy {
constructor() {
this.target = new Rose(); // 目标对象为rose
}
sendFlower(flower) {
// 代理对象送花
this.receiveFlower(flower);
}
// 目标对象收到花
receiveFlower(flower) {
this.target.receiveFlower(flower);
}
}
let proxyPerson = new Proxy(); // 代理对象
let jack = new Jack(proxyPerson); // 杰克
jack.sendFlower(proxyPerson); // 杰克送花
- 应用场景: ES6 proxy, Vuex中对于getters访问、图片预加载等
4. 迭代器模式
- 定义: 按一个方法顺序访问一个聚合对象中的每一个元素, 而又无需暴露该对象的内部显示
内部迭代器
- 内部定义好迭代规则, 外部只需要调用一次
const each = (args, fn) => {
for (let i = 0; i < args.length; i++) {
const value = fn(args[i], i, args);
if (!value) break; // 跳出循环
}
};
each([1, 2, 3], function(item, index) {
console.log(item, index);
});
外部迭代器
- 必须显示的请求迭代下一个元素。
class Iterator {
constructor(list) {
this.list = list;
this.index = 0;
}
next() {
if (this.hasNext()) {
return this.list[this.index++];
}
return null;
}
hasNext() {
if (this.list.length === this.index) {
return false;
}
return true;
}
}
let ite = new Iterator([1, 2, 3, 4]);
ite.next();
- 应用场景: JS Iterator、JS Generator
5. 工厂模式
- 定义: 常见的实例化对象模式
// 具体的对象
class Product {
constructor(name) {
this.name = name;
}
}
// 工厂类
class Creator {
create(name) {
return new Product(name);
}
}
let creators = new Creator();
creators.create("jojo");
- 应用场景：JQuery中的$、Vue.component异步组件、React.createElement等
6. 发布订阅者模式
- [欢迎查看本人的另外一篇文章- 发布订阅者模式解析] (juejin.cn/post/694117…)
7. 装饰者模式
- 定义: 在不改变对象本身的基础上, 在程序运行期间动态的添加方法
- 简单版
class Plane {
fire() {
console.log("开火");
}
}
class Mixin {
constructor(obj) {
this.obj = obj;
}
attack() {
this.obj.fire();
console.log("开炮");
}
}
let plane = new Plane();
let mixin = new Mixin(plane);
mixin.attack();
- 利用AOP给函数动态添加功能
Function.prototype.before = function(fn) {
let self = this; // 保存原函数引用
return function() {
fn.apply(this, arguments); // 新函数执行
return self.apply(this, arguments); // 原函数执行
};
};
Function.prototype.after = function(fn) {
let self = this;
return function() {
let ret = self.apply(this, arguments);
fn.apply(this, arguments);
return ret;
};
};
function f1() {
console.log(1);
}
let f = f1
.before(function() {
console.log(2);
})
.after(function() {
console.log(3);
});
f();
- 应用场景：ES7装饰器、Vuex中1.0版本混入Vue时，重写init方法、Vue中数组变异方法实现等
8.适配器模式
- 定义: 用来解决两个接口不兼容的问题, 由一个对象包裹不兼容的对象, 比如参数转换, 允许直接访问
class Adapter {
specify() {
return "德国标准插头";
}
}
class Target {
constructor(target) {
this.target = new Adapter();
}
requset() {
let tips = this.target.specify();
console.log(`${tips} - 转换器 - 中国标准插头`);
}
}
let target1 = new Target();
target1.requset();
9. 中介者模式
- 定义: 通过一个中介者对象，其他所有的相关对象都通过该中介者对象来通信，而不是相互引用，
- 当其中的一个对象发生改变时，只需要通知中介者对象即可。通过中介者模式可以解除对象与对象之间的紧耦合关系。
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);
};
10. 外观模式
- 为一组复杂的子系统接口提供一个更高级的统一接口, 通过这个接口更容易访问子系统接口, 不符合开放封闭原则
class A {
eat() {}
}
class B {
eat() {}
}
class C {
eat() {
const a = new A();
const b = new B();
a.eat();
b.eat();
}
}
// 跨浏览器事件监听
function addEvent(el, type, fn) {
if (window.addEventListener) {
el.addEventListener(type, fn, false);
} else if (window.attachEvent) {
el.attachEvent('on' +type, fn);
} else {
el["on" + type] = fn;
}
}
- 应用场景：JS事件不同浏览器兼容处理、同一方法可以传入不同参数兼容处理等
今天真是让人头凸且充实的一天啊~~~
