设计模式：juejin.cn/post/684490… juejin.im/post/5afe64… mp.weixin.qq.com/s/X40KEH37c… juejin.cn/post/684490…
面向对象编程：类的创建，数据的封装以及类的继承
设计模式分类
创建型模式5种
工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。
结构型模式7种
适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。
行为型模式11种
策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式
其实还有两类：并发型模式和线程池模式。
发布订阅模式
事件发布/订阅模式 (PubSub) 在异步编程中帮助我们完成更松的解耦, 甚至在 MVC、MVVC 的架构中以及设计模式中也少不了发布-订阅模式的参与
- 优点: 在异步编程中实现更深的解耦
- 缺点: 如果过多的使用发布订阅模式, 会增加维护的难度 发布订阅模式
单例模式
保证一个类
仅有一个实例，并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否，如果存在则直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象 适用场景：一个单一对象。比如：弹窗，无论点击多少次，弹窗只应该被创建一次，全局缓存
以及另外的应用场景：JQuery中的$、Vuex中的Store、Redux中的Store等
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
策略模式
定义一系列的算法，把他们一个个封装起来，并且使他们可以相互替换
或者：根据不同参数可以命中不同的策略 策略模式的目的就是将算法的使用算法的实现分离开来
一个基于策略模式的程序至少由两部分组成。第一个部分是一组策略类（可变），策略类封装了具体的算法，并负责具体的计算过程。第二个部分是环境类Context（不变），Context接受客户的请求，随后将请求委托给某一个策略类。要做到这一点，说明Context中要维持对某个策略对象的引用
- 优点
- 能减少大量的 if 语句
- 复用性好 未使用策略模式：
var calculateBonus = function( performanceLevel, salary ){
if ( performanceLevel === 'S' ){
return salary * 4;
}
if ( performanceLevel === 'A' ){
return salary * 3;
}
if ( performanceLevel === 'B' ){
return salary * 2;
}
};
calculateBonus( 'B', 20000 ); // 输出:40000
calculateBonus( 'S', 6000 ); // 输出:24000
/*策略类*/
const levelOBJ = {
"A": function(money) {
return money * 4;
},
"B" : function(money) {
return money * 3;
},
"C" : function(money) {
return money * 2;
}
};
/*环境类*/
const calculateBouns =function(level,money) {
return levelOBJ[level](money);
};
console.log(calculateBouns('A',10000)); // 40000
在函数是一等公民的 JS 中, 策略模式的使用常常隐藏在高阶函数中, 稍微变换下上述 demo 的形式如下, 可以发现我们平时已经在使用它了, 恭喜我们又掌握了一种设计模式
const S = function(salary) {
return salary * 4
}
const A = function(salary) {
return salary * 3
}
const B = function(salary) {
return salary * 2
}
const calculateBonus = function(func, salary) {
return func(salary)
}
calculateBonus(A, 10000) // 30000
其他案例：表单校验
- 未使用策略模式
var registerForm = document.getElementById( 'registerForm' );
registerForm.onsubmit = function(){
if ( registerForm.userName.value === '' ){
alert ( '用户名不能为空' );
return false;
}
if ( registerForm.password.value.length < 6 ){
alert ( '密码长度不能少于 6 位' );
return false;
}
if ( !/(^1[3|5|8][0-9]{9}$)/.test( registerForm.phoneNumber.value ) ){
alert ( '手机号码格式不正确' );
return false;
}
}
- 使用策略模式
var strategies = {
isNonEmpty: function( value, errorMsg ){
if ( value === '' ){
return errorMsg ;
}
},
minLength: function( value, length, errorMsg ){
if ( value.length < length ){
return errorMsg;
}
},
isMobile: function( value, errorMsg ){ // 手机号码格式
if ( !/(^1[3|5|8][0-9]{9}$)/.test( value ) ){
return errorMsg;
}
}
};
var Validator = function(){
this.cache = []; // 保存校验规则
};
Validator.prototype.add = function(
var ary = rule.split( ':' );
this.cache.push(function(){ //
var strategy = ary.shift();
ary.unshift( dom.value );
ary.push( errorMsg ); //
return strategies[strategy].apply(dom, ary);
});
};
Validator.prototype.start = function(){
for ( var i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){
var msg = validatorFunc(); // 开始校验，并取得校验后的返回信息
if ( msg ){ // 如果有确切的返回值，说明校验没有通过
return msg;
}
}
};
var validataFunc = function(){
var validator = new Validator(); // 创建一个 validator 对象
/***************添加一些校验规则****************/
validator.add( registerForm.userName, 'isNonEmpty', '用户名不能为空' );
validator.add( registerForm.password, 'minLength:6', '密码长度不能少于 6位');
validator.add( registerForm.phoneNumber, 'isMobile', '手机号码格式不正确' );
var errorMsg = validator.start(); // 获得校验结果
return errorMsg; // 返回校验结果
}
var registerForm = document.getElementById( 'registerForm' ); registerForm.onsubmit = function(){
var errorMsg = validataFunc(); // 如果 errorMsg 有确切的返回值，说明未通过校验
if ( errorMsg ){
alert ( errorMsg );
return false; // 阻止表单提交
}
};
代理模式
为其他对象提供一种代理，便以控制对这个对象的访问，不能直接访问目标对象
应用场景：ES6 Proxy、Vuex中对于getters访问、图片预加载等
场景：小明追女生 A
- 非代理模式: 小明 =花=> 女生 A
- 代理模式: 小明 =花=> 让女生 A 的好友 B 帮忙 =花=> 女生 A 代理模式的种类有很多, 在 JS 中最常用的为虚拟代理和缓存代理。
//小明类似案例
var Flower = function(){};
var xiaoming = {
sendFlower: function( target){
var flower = new Flower();
target.receiveFlower( flower );
}
};
var B = {
receiveFlower: function( flower ){
A.listenGoodMood(function(){
var flower = new Flower();
A.receiveFlower( flower );
});
}
};
var A = {
receiveFlower: function( flower ){
// 监听 A 的好心情
console.log( '收到花 ' + flower );
},
listenGoodMood: function( fn ){
setTimeout(function(){ // 假设 10 秒之后 A 的心情变好
fn();
}, 10000 );
}
};
xiaoming.sendFlower( B );
由上面的例子可以引出两种代理模式
- 保护代理
代理 B 可以帮助 A 过滤掉一些请求，比如送花的人中年龄太大的或者没有宝马的，这种请求就可以直接在代理 B 处被拒绝掉
- 虚拟代理
假设现实中的花价格不菲，导致在程序世界里，new Flower 也是一个代价昂贵的操作， 那么我们可以把 new Flower 的操作交给代理 B 去执行，代理 B 会选择在 A 心情好时再执行 new Flower
//虚拟代理实现图片预加载
//下面这段代码运用代理模式来实现图片预加载, 可以看到通过代理模式巧妙地将创建图片与预加载逻辑分离, 并且在未来如果不需要预加载, 只要改成请求本体代替请求代理对象就行
var imgFunc = (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() {// http 图片加载完毕后才会执行
imgFunc.setSrc(this.src);
}
return {
setSrc: function(src) {
imgFunc.setSrc('./loading,gif');// 本地 loading 图片
img.src = src;
}
}
})();
proxyImage.setSrc('./pic.png');
- 虚拟代理合并HTTP请求 假设我们在做一个文件同步的功能，当我们选中一个 checkbox 的时候，它对应的文件就会被同 步到另外一台备用服务器上面。当一次选中过多时，会产生频繁的网络请求。将带来很大的开销。可以通过一个代理函数 proxySynchronousFile 来收集一段时间之内的请求， 最后一次性发送给服务器
var synchronousFile = function( id ){
console.log( '开始同步文件，id 为: ' + id );
};
var proxySynchronousFile = (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; // 清空 ID 集合
}, 2000 );
}// 2 秒后向本体发送需要同步的 ID 集合
})();
var checkbox = document.getElementsByTagName( 'input' );
for ( var i = 0, c; c = checkbox[ i++ ]; ){
c.onclick = function(){
if ( this.checked === true ){
proxySynchronousFile( this.id ); }
}
};
//缓存代理实现乘积计算
const mult = function() {
let a = 1
for (let i = 0, l; l = arguments[i++];) {
a = a * l
}
return a
}
const proxyMult = (function() {
const cache = {}
return function() {
const tag = Array.prototype.join.call(arguments, ',')
if (cache[tag]) {
return cache[tag]
}
cache[tag] = mult.apply(this, arguments)
return cache[tag]
}
})()
proxyMult(1, 2, 3, 4) // 24
使用代理模式实现图片懒加载的优点还有符合单一职责原则。减少一个类或方法的粒度和耦合度。
其他案例：
class Flower {}
// 源对象
class Jack {
constructor (target) {
this.target = target;
}
sendFlower (target) {
const flower = new Flower();
this.target.receiveFlower(flower)
}
}
// 目标对象
class Rose {
receiveFlower (flower) {
console.log('收到花: ' + flower)
}
}
// 代理对象
class ProxyObj {
constructor () {
this.target = new Rose();
}
receiveFlower (flower) {
this.sendFlower(flower)
}
sendFlower (flower) {
this.target.receiveFlower(flower)
}
}
const proxyObj = new ProxyObj();
const jack = new Jack(proxyObj);
jack.sendFlower(proxyObj); // 收到花：[object Object]
中介者模式
通过一个中介者对象，其他所有的相关对象都通过该中介者对象来通信，而不是相互引用，当其中的一个对象发生改变时，只需要通知中介者对象即可。通过中介者模式可以解除对象与对象之间的紧耦合关系 或者说中介者模式: 对象和对象之间借助第三方中介者进行通信。
中介者模式适用的场景：例如购物车需求，存在商品选择表单、颜色选择表单、购买数量表单等等，都会触发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);
};
案例二：一场测试结束后, 公布结果: 告知解答出题目的人挑战成功, 否则挑战失败。
const player = function(name) {
this.name = name
playerMiddle.add(name)
}
player.prototype.win = function() {
playerMiddle.win(this.name)
}
player.prototype.lose = function() {
playerMiddle.lose(this.name)
}
const playerMiddle = (function() { // 将就用下这个 demo, 这个函数当成中介者
const players = []
const winArr = []
const loseArr = []
return {
add: function(name) {
players.push(name)
},
win: function(name) {
winArr.push(name)
if (winArr.length + loseArr.length === players.length) {
this.show()
}
},
lose: function(name) {
loseArr.push(name)
if (winArr.length + loseArr.length === players.length) {
this.show()
}
},
show: function() {
for (let winner of winArr) {
console.log(winner + '挑战成功;')
}
for (let loser of loseArr) {
console.log(loser + '挑战失败;')
}
},
}
}())
const a = new player('A 选手')
const b = new player('B 选手')
const c = new player('C 选手')
a.win()
b.win()
c.lose()
// A 选手挑战成功;
// B 选手挑战成功;
// C 选手挑战失败;
//在这段代码中 A、B、C 之间没有直接发生关系, 而是通过另外的 playerMiddle 对象建立链接, 姑且将之当成是中介者模式了。
装饰者模式
在不改变对象自身的基础上，在程序运行期间给对象动态地添加方法 或者说：动态地给函数赋能
装饰者模式适用的场景：原有方法维持不变，在原有方法上再挂载其他方法来满足现有需求；函数的解耦，将函数拆分成多个可复用的函数，再将拆分出来的函数挂载到某个函数上，实现相同的效果但增强了复用性
应用场景：ES7装饰器、Vuex中1.0版本混入Vue时，重写init方法、Vue中数组变异方法实现等
//例：用AOP装饰函数实现装饰者模式
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();
案例二：天气冷了, 就添加衣服来保暖；天气热了, 就将外套脱下；这个例子很形象地含盖了装饰器的神韵, 随着天气的冷暖变化, 衣服可以动态的穿上脱下
let wear = function() {
console.log('穿上第一件衣服')
}
const _wear1 = wear
wear = function() {
_wear1()
console.log('穿上第二件衣服')
}
const _wear2 = wear
wear = function() {
_wear2()
console.log('穿上第三件衣服')
}
wear()
// 穿上第一件衣服
// 穿上第二件衣服
// 穿上第三件衣服
//这种方式有以下缺点: 1: 临时变量会变得越来越多；2: this 指向有时会出错
AOP 装饰函数
/ 前置代码
Function.prototype.before = function(fn) {
const self = this
return function() {
fn.apply(new(self), arguments) // https://github.com/MuYunyun/blog/pull/30#event-1817065820
return self.apply(new(self), arguments)
}
}
// 后置代码
Function.prototype.after = function(fn) {
const self = this
return function() {
self.apply(new(self), arguments)
return fn.apply(new(self), arguments)
}
}
//用后置代码来实验下上面穿衣服的 demo,
const wear1 = function() {
console.log('穿上第一件衣服')
}
const wear2 = function() {
console.log('穿上第二件衣服')
}
const wear3 = function() {
console.log('穿上第三件衣服')
}
const wear = wear1.after(wear2).after(wear3)
wear()
// 穿上第一件衣服
// 穿上第二件衣服
// 穿上第三件衣服
但这样子有时会污染原生函数, 可以做点通变
const after = function(fn, afterFn) {
return function() {
fn.apply(this, arguments)
afterFn.apply(this, arguments)
}
}
const wear = after(after(wear1, wear2), wear3)
wear()
或者另外类似案例：
class Plane {
fire () {
console.log('发送普通子弹');
}
}
// 装饰过的对象
class Missile {
constructor (plane) {
this.plane = plane;
}
fire () {
this.plane.fire();
console.log('发射导弹');
}
}
let plane = new Plane();
plane = new Missile(plane);
console.log(plane.fire()); // 依次打印 发送普通子弹 发射导弹
利用AOP给函数动态添加功能，即Function的after或者before
Function.prototype.before = function (beforeFn) {
const _self = this;
return function () {
beforeFn.apply(this, arguments);
return _self.apply(this, arguments);
}
}
Function.prototype.after = function (afterFn) {
const _self = this;
return function () {
const ret = _self.apply(this, arguments);
afterFn.apply(this, arguments);
return ret;
}
}
let func = function () {
console.log('2');
}
func = func.before(function() {
console.log('1');
}).after(function() {
console.log('3');
})
func();
console.log(func()); // 依次打印 1 2 3
观察者模式
应用场景：JS事件、JS Promise、JQuery.$CallBack、Vue watch、NodeJS自定义事件，文件流等
场景：
- 场景一: 当观察的数据对象发生变化时, 自动调用相应函数。比如 vue 的双向绑定;
- 场景二: 每当调用对象里的某个方法时, 就会调用相应'访问'逻辑。比如给测试框架赋能的 spy 函数; 场景一: 双向绑定 Object.defineProperty
使用 Object.defineProperty(obj, props, descriptor) 实现观察者模式, 其也是 vue 双向绑定 的核心, 示例如下(当改变 obj 中的 value 的时候, 自动调用相应相关函数):
var obj = {
data: { list: [] },
}
Object.defineProperty(obj, 'list', {
get() {
return this.data['list']
},
set(val) {
console.log('值被更改了')
this.data['list'] = val
}
})
Proxy
Proxy/Reflect 是 ES6 引入的新特性, 也可以使用其完成观察者模式, 示例如下(效果同上):
var obj = {
value: 0
}
var proxy = new Proxy(obj, {
set: function(target, key, value, receiver) { // {value: 0} "value" 1 Proxy {value: 0}
console.log('调用相应函数')
Reflect.set(target, key, value, receiver)
}
})
proxy.value = 1 // 调用相应函数
场景二：下面来实现 sinon 框架的 spy 函数:
const sinon = {
analyze: {},
spy: function(obj, fnName) {
const that = this
const oldFn = Object.getOwnPropertyDescriptor(obj, fnName).value
Object.defineProperty(obj, fnName, {
value: function() {
oldFn()
if (that.analyze[fnName]) {
that.analyze[fnName].count = ++that.analyze[fnName].count
} else {
that.analyze[fnName] = {}
that.analyze[fnName].count = 1
}
console.log(`${fnName} 被调用了 ${that.analyze[fnName].count} 次`)
}
})
}
}
const obj = {
someFn: function() {
console.log('my name is someFn')
}
}
sinon.spy(obj, 'someFn')
obj.someFn()
// my name is someFn
// someFn 被调用了 1 次
obj.someFn()
// my name is someFn
// someFn 被调用了 2 次
vue 在 3.0 版本上使用 Proxy 重构的原因 首先罗列 Object.defineProperty() 的缺点:
- Object.defineProperty() 不会监测到数组引用不变的操作(比如 push/pop 等);
- Object.defineProperty() 只能监测到对象的属性的改变, 即如果有深度嵌套的对象则需要再次给之绑定 Object.defineProperty(); 关于 Proxy 的优点
- 可以劫持数组的改变;
- defineProperty 是对属性的劫持, Proxy 是对对象的劫持; 其他案例：
class Subject {
constructor () {
this.state = 0;
this.observers = [];
}
getState () {
return this.state;
}
setState (state) {
this.state = state;
this.notify();
}
notify () {
this.observers.forEach(observer => {
observer.update();
})
}
attach (observer) {
this.observers.push(observer);
}
}
class Observer {
constructor (name, subject) {
this.name = name;
this.subject = subject;
this.subject.attach(this);
}
update () {
console.log(`${this.name} update, state: ${this.subject.getState()}`);
}
}
let sub = new Subject();
let observer1 = new Observer('o1', sub);
let observer2 = new Observer('o2', sub);
sub.setState(1);
适配者模式
用来解决两个接口不兼容问题，由一个对象来包装不兼容的对象，比如参数转换，允许直接访问、即 主要用于解决两个接口之间不匹配的问题。 应用场景：Vue的computed、旧的JSON格式转换成新的格式等
// 老接口
const zhejiangCityOld = (function() {
return [
{
name: 'hangzhou',
id: 11,
},
{
name: 'jinhua',
id: 12
}
]
}())
console.log(getZhejiangCityOld())
// 新接口希望是下面形式
{
hangzhou: 11,
jinhua: 12,
}
// 这时候就可采用适配者模式
const adaptor = (function(oldCity) {
const obj = {}
for (let city of zhejiangCityOld) {
obj[city.name] = city.id
}
return obj
}())
案例二：
class Adapter {
specificRequest () {
return '德国标准插头';
}
}
// 适配器对象，对原来不兼容对象进行包装处理
class Target {
constructor () {
this.adapter = new Adapter();
}
request () {
const info = this.adapter.specificRequest();
console.log(`${info} - 转换器 - 中国标准插头`)
}
}
const target = new Target();
console.log(target.request()); // 德国标准插头 - 转换器 - 中国标准插头
状态模式
关键是区分事物内部的状态，事物内部状态往往会带来事物的行为改变，即允许对象在内部状态发生改变时改变它的行为
- 概念: 将事物内部的每个状态分别封装成类, 内部状态改变会产生不同行为。
- 优点: 用对象代替字符串记录当前状态, 状态易维护
- 缺点: 需编写大量状态类对象 场景：某某牌电灯, 按一下按钮打开弱光, 按两下按钮打开强光, 按三下按钮关闭灯光。
应用场景：灯泡状态、红绿灯切换等
// 将状态封装成不同类
const weakLight = function(light) {
this.light = light
}
weakLight.prototype.press = function() {
console.log('打开强光')
this.light.setState(this.light.strongLight)
}
const strongLight = function(light) {
this.light = light
}
strongLight.prototype.press = function() {
console.log('关灯')
this.light.setState(this.light.offLight)
}
const offLight = function(light) {
this.light = light
}
offLight.prototype.press = function() {
console.log('打开弱光')
this.light.setState(this.light.weakLight)
}
const Light = function() {
this.weakLight = new weakLight(this)
this.strongLight = new strongLight(this)
this.offLight = new offLight(this)
this.currentState = this.offLight // 初始状态
}
Light.prototype.init = function() {
const btn = document.createElement('button')
btn.innerHTML = '按钮'
document.body.append(btn)
const self = this
btn.addEventListener('click', function() {
self.currentState.press()
})
}
Light.prototype.setState = function(state) { // 改变当前状态
this.currentState = state
}
const light = new Light()
light.init()
// 打开弱光
// 打开强光
// 关灯
非面向对象实现的状态模式
//借助于 JavaScript 的委托机制, 可以像如下实现状态模式:
const obj = {
'weakLight': {
press: function() {
console.log('打开强光')
this.currentState = obj.strongLight
}
},
'strongLight': {
press: function() {
console.log('关灯')
this.currentState = obj.offLight
}
},
'offLight': {
press: function() {
console.log('打开弱光')
this.currentState = obj.weakLight
}
},
}
const Light = function() {
this.currentState = obj.offLight
}
Light.prototype.init = function() {
const btn = document.createElement('button')
btn.innerHTML = '按钮'
document.body.append(btn)
const self = this
btn.addEventListener('click', function() {
self.currentState.press.call(self) // 通过 call 完成委托
})
}
const light = new Light()
light.init()
其他案例：
// 红灯
class RedLight {
constructor (state) {
this.state = state;
}
light () {
console.log('turn to red light');
this.state.setState(this.state.greenLight)
}
}
// 绿灯
class greenLight {
constructor (state) {
this.state = state;
}
light () {
console.log('turn to green light');
this.state.setState(this.state.yellowLight)
}
}
// 黄灯
class yellowLight {
constructor (state) {
this.state = state;
}
light () {
console.log('turn to yellow light');
this.state.setState(this.state.redLight)
}
}
class State {
constructor () {
this.redLight = new RedLight(this)
this.greenLight = new greenLight(this)
this.yellowLight = new yellowLight(this)
this.setState(this.redLight) // 初始化为红灯
}
setState (state) {
this.currState = state;
}
}
const state = new State();
state.currState.light() // turn to red light
setInterval(() => {
state.currState.light() // 每隔3秒依次打印红灯、绿灯、黄灯
}, 3000)
工厂模式
常见的实例化对象模式，工厂模式就相当于创建实例对象的new，提供一个创建对象的接口
应用场景：JQuery中的$、Vue.component异步组件、React.createElement等
// 某个需要创建的具体对象
class Product {
constructor (name) {
this.name = name;
}
init () {}
}
// 工厂对象
class Creator {
create (name) {
return new Product(name);
}
}
const creator = new Creator();
const p = creator.create(); // 通过工厂对象创建出来的具体对象
组合模式
- 组合模式在对象间形成树形结构;
- 组合模式中基本对象和组合对象被一致对待;
- 无须关心对象有多少层, 调用时只需在根部进行调用;
- demo1 —— 宏命令 遥控器操纵多个事情
- 煮咖啡
- 打开电视、打开音响
- 打开空调、打开电脑
//结合了命令模式和组合模式的具体实现:
const MacroCommand = function() {
return {
lists: [],
add: function(task) {
this.lists.push(task)
},
excute: function() { // ①: 组合对象调用这里的 excute,
for (let i = 0; i < this.lists.length; i++) {
this.lists[i].excute()
}
},
}
}
const command1 = MacroCommand() // 基本对象
command1.add({
excute: () => console.log('煮咖啡') // ②: 基本对象调用这里的 excute,
})
const command2 = MacroCommand() // 组合对象
command2.add({
excute: () => console.log('打开电视')
})
command2.add({
excute: () => console.log('打开音响')
})
const command3 = MacroCommand()
command3.add({
excute: () => console.log('打开空调')
})
command3.add({
excute: () => console.log('打开电脑')
})
const macroCommand = MacroCommand()
macroCommand.add(command1)
macroCommand.add(command2)
macroCommand.add(command3)
macroCommand.excute()
// 煮咖啡
// 打开电视
// 打开音响
// 打开空调
// 打开电脑
//可以看出在组合模式中基本对象和组合对象被一致对待, 所以要保证基本对象(叶对象)和组合对象具有一致方法
- demo2 —— 扫描文件夹 文件夹和文件之间的关系，非常适合用组合模式来描述。文件夹里既可以包含文件，又可以 包含其他文件夹，最终可能组合成一棵树 当使用用杀毒软件扫描该文件夹时，往往不会关心里面有多少文件和子文件夹，组合模式使得我们只需要操作最外层的文件夹进行扫描
//扫描文件夹时, 文件夹下面可以为另一个文件夹也可以为文件, 我们希望统一对待这些文件夹和文件, 这种情形适合使用组合模式。
const Folder = function(folder) {
this.folder = folder
this.lists = []
}
Folder.prototype.add = function(resource) {
this.lists.push(resource)
}
Folder.prototype.scan = function() {
console.log('开始扫描文件夹: ', this.folder)
for (let i = 0, folder; folder = this.lists[i++];) {
folder.scan()
}
}
const File = function(file) {
this.file = file
}
File.prototype.add = function() {
throw Error('文件下不能添加其它文件夹或文件')
}
File.prototype.scan = function() {
console.log('开始扫描文件: ', this.file)
}
const folder = new Folder('根文件夹')
const folder1 = new Folder('JS')
const folder2 = new Folder('life')
const file1 = new File('深入React技术栈.pdf')
const file2 = new File('JavaScript权威指南.pdf')
const file3 = new File('小王子.pdf')
folder1.add(file1)
folder1.add(file2)
folder2.add(file3)
folder.add(folder1)
folder.add(folder2)
folder.scan()
// 开始扫描文件夹: 根文件夹
// 开始扫描文件夹: JS
// 开始扫描文件: 深入React技术栈.pdf
// 开始扫描文件: JavaScript权威指南.pdf
// 开始扫描文件夹: life
// 开始扫描文件: 小王子.pdf
迭代器模式
提供一种方法顺序访问一个聚合对象中各个元素, 而又无须暴露该对象的内部表示、、或者说能访问到聚合对象的顺序与元素
- 内部迭代器：内部已经定义好迭代规则，外部只需要调用一次即可 应用场景： JQuery.each方法
//实现内部
function each(arr, fn) {
for (let i = 0; i < arr.length; i++) {
fn(i, arr[i])
}
}
each([1, 2, 3], function(i, n) {
console.log(i) // 0 1 2
console.log(n) // 1 2 3
})
可以看出内部迭代器在调用的时候非常简单, 使用者不用关心迭代器内部实现的细节, 但这也是内部迭代器的缺点。比如要比较两数组是否相等, 只能在其回调函数中作文章了, 代码如下:
const compare = function(arr1, arr2) {
each(arr1, function(i, n) {
if (arr2[i] !== n) {
console.log('两数组不等')
return
}
})
console.log('两数组相等')
}
const arr1 = [1, 2, 3]
const arr2 = [1, 2, 3]
compare(arr1, arr2) // 两数组相等
- 外部迭代器：必须显示的请求迭代下一个元素。 相较于内部迭代器, 外部迭代器将遍历的权利转移到外部, 因此在调用的时候拥有了更多的自由性, 不过缺点是调用方式较复杂。
应用场景：JS Iterator、JS Generator
const iterator = function(arr) {
let current = 0
const next = function() {
current = current + 1
}
const done = function() {
return current >= arr.length
}
const value = function() {
return arr[current]
}
return {
next,
done,
value,
}
}
const arr1 = [1, 2 ,3]
const arr2 = [1, 2, 3]
const iterator1 = iterator(arr1)
const iterator2 = iterator(arr2)
const compare = function(iterator1, iterator2) {
while (!iterator1.done() && !iterator2.done()) {
if (iterator1.value() !== iterator2.value()) {
console.log('两数组不等')
return
}
iterator1.next() // 外部迭代器将遍历的权利转移到外部
iterator2.next()
}
console.log('两数组相等')
}
compare(iterator1, iterator2)
- 倒序迭代器
var reverseEach = function( ary, callback ){
for ( var l = ary.length - 1; l >= 0; l-- ){
callback( l, ary[ l ] ); }
};
}
reverseEach( [ 0, 1, 2 ], function( i, n ){
console.log( n ); // 分别输出:2, 1 ,0
});
- 中止迭代器
var each = function( ary, callback ){
for ( var i = 0, l = ary.length; i < l; i++ ){
if ( callback( i, ary[ i ] ) === false ){
break;
}
}
};
each( [ 1, 2, 3, 4, 5 ], function( i, n ){
if ( n > 3 ){
return false;
}
console.log( n );
});
其他案例：
//内部
const each = (args, fn) => {
for (let i = 0, len = args.length; i < len; i++) {
const value = fn(args[i], i, args);
if (value === false) break;
}
}
//外部
// 迭代器
class Iterator {
constructor (list) {
this.list = list;
this.index = 0;
}
next () {
if (this.hasNext()) {
return this.list[this.index++]
}
return null;
}
hasNext () {
if (this.index === this.list.length) {
return false;
}
return true;
}
}
const arr = [1, 2, 3, 4, 5, 6];
const ite = new Iterator();
while(ite.hasNext()) {
console.log(ite.next()); // 依次打印 1 2 3 4 5 6
}
模板方法模式
在继承的基础上, 在父类中定义好执行的算法
//可以清晰地看出仅仅在步骤 2 和 4 上有细微的差别, 下面着手实现:
/*创建一个抽象父类来表示泡一杯饮料的整个过程。
不论是 Coffee,还是 Tea,都被我们用Beverage来表示*/
const Drinks = function() {}
Drinks.prototype.firstStep = function() {
console.log('烧开水')
}
Drinks.prototype.secondStep = function() {}
Drinks.prototype.thirdStep = function() {
console.log('倒入杯子')
}
Drinks.prototype.fourthStep = function() {}
Drinks.prototype.init = function() { // 模板方法模式核心: 在父类上定义好执行算法
this.firstStep()
this.secondStep()
this.thirdStep()
this.fourthStep()
}
const Tea = function() {}
Tea.prototype = new Drinks
Tea.prototype.secondStep = function() {
console.log('浸泡茶叶')
}
Tea.prototype.fourthStep = function() {
console.log('加柠檬')
}
const Coffee = function() {}
Coffee.prototype = new Drinks
Coffee.prototype.secondStep = function() {
console.log('冲泡咖啡')
}
Coffee.prototype.fourthStep = function() {
console.log('加糖')
}
const tea = new Tea()
tea.init()
// 烧开水
// 浸泡茶叶
// 倒入杯子
// 加柠檬
const coffee = new Coffee()
coffee.init()
// 烧开水
// 冲泡咖啡
// 倒入杯子
// 加糖
钩子
//假如客人不想加佐料(糖、柠檬)怎么办, 这时可以引人钩子来实现之, 实现逻辑如下:
// ...
Drinks.prototype.ifNeedFlavour = function() { // 加上钩子
return true
}
Drinks.prototype.init = function() { // 模板方法模式核心: 在父类上定义好执行算法
this.firstStep()
this.secondStep()
this.thirdStep()
if (this.ifNeedFlavour()) { // 默认是 true, 也就是要加调料
this.fourthStep()
}
}
// ...
const Coffee = function() {}
Coffee.prototype = new Drinks()
// ...
Coffee.prototype.ifNeedFlavour = function() {
return window.confirm('是否需要佐料吗？') // 弹框选择是否佐料
}
命令模式
命令模式与策略模式有些类似, 在 JavaScript 中它们都是隐式的。重要性: 较低
//命令模式在 JavaScript 中也比较简单, 下面代码中对按钮和命令进行了抽离, 因此可以复杂项目中可以使用命令模式将界面的代码和功能的代码交付给不同的人去写
const setCommand = function(button, command) {
button.onClick = function() {
command.excute()
}
}
// -------------------- 上面的界面逻辑由A完成, 下面的由B完成
const menu = {
updateMenu: function() {
console.log('更新菜单')
},
}
const UpdateCommand = function(receive) {
return {
excute: receive.updateMenu,
}
}
const updateCommand = UpdateCommand(menu) // 创建命令
const button1 = document.getElementById('button1')
setCommand(button1, updateCommand)
享元模式
享元模式是一种优化程序性能的模式, 本质为减少对象创建的个数 以下情况可以使用享元模式:
- 有大量相似的对象, 占用了大量内存
- 对象中大部分状态可以抽离为外部状态 设计场景： 某商家有 50 种男款内衣和 50 种款女款内衣, 要展示它们
方案一: 造 50 个塑料男模和 50 个塑料女模, 让他们穿上展示, 代码如下:
const Model = function(gender, underwear) {
this.gender = gender
this.underwear = underwear
}
Model.prototype.takephoto = function() {
console.log(`${this.gender}穿着${this.underwear}`)
}
for (let i = 1; i < 51; i++) {
const maleModel = new Model('male', `第${i}款衣服`)
maleModel.takephoto()
}
for (let i = 1; i < 51; i++) {
const female = new Model('female', `第${i}款衣服`)
female.takephoto()
}
方案二: 造 1 个塑料男模特 1 个塑料女模特, 分别试穿 50 款内衣
const Model = function(gender) {
this.gender = gender
}
Model.prototype.takephoto = function() {
console.log(`${this.sex}穿着${this.underwear}`)
}
const maleModel = new Model('male')
const femaleModel = new Model('female')
for (let i = 1; i < 51; i++) {
maleModel.underwear = `第${i}款衣服`
maleModel.takephoto()
}
for (let i = 1; i < 51; i++) {
femaleModel.underwear = `第${i}款衣服`
femaleModel.takephoto()
}
对比发现: 方案一创建了 100 个对象, 方案二只创建了 2 个对象, 在该 demo 中, gender(性别) 是内部对象, underwear(穿着) 是外部对象。
方案二的 demo 中, 还可以进一步改善:一开始就通过构造函数显示地创建实例, 可用工场模式将其升级成可控生成 在实例上手动添加 underwear 不是很优雅, 可以在外部单独在写个 manager 函数
const Model = function(gender) {
this.gender = gender
}
Model.prototype.takephoto = function() {
console.log(`${this.gender}穿着${this.underwear}`)
}
const modelFactory = (function() { // 优化第一点
const modelGender = {}
return {
createModel: function(gender) {
if (modelGender[gender]) {
return modelGender[gender]
}
return modelGender[gender] = new Model(gender)
}
}
}())
const modelManager = (function() {
const modelObj = {}
return {
add: function(gender, i) {
modelObj[i] = {
underwear: `第${i}款衣服`
}
return modelFactory.createModel(gender)
},
copy: function(model, i) { // 优化第二点
model.underwear = modelObj[i].underwear
}
}
}())
for (let i = 1; i < 51; i++) {
const maleModel = modelManager.add('male', i)
modelManager.copy(maleModel, i)
maleModel.takephoto()
}
for (let i = 1; i < 51; i++) {
const femaleModel = modelManager.add('female', i)
modelManager.copy(femaleModel, i)
femaleModel.takephoto()
}
责任链模式
外观模式
为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更容易，不符合单一职责原则和开放封闭原则 应用场景：JS事件不同浏览器兼容处理、同一方法可以传入不同参数兼容处理等
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;
}
}
备忘录模式
访问者模式
解释器模式
桥接模式
委托模式
数据访问模式
节流模式
原型模式
参与者模式
简单模板模式
惰性模式
等待者模式
同步模块模式
MVVM模式
MVC模式
MVP模式
Widget模式
观察者模式与发布/订阅模式区别
本质上的区别是调度的地方不同
虽然两种模式都存在订阅者和发布者（具体观察者可认为是订阅者、具体目标可认为是发布者），但是观察者模式是由具体目标调度的，而发布/订阅模式是统一由调度中心调的，所以观察者模式的订阅者与发布者之间是存在依赖的，而发布/订阅模式则不会。
---观察者模式：目标和观察者是基类，目标提供维护观察者的一系列方法，观察者提供更新接口。具体观察者和具体目标继承各自的基类，然后具体观察者把自己注册到具体目标里，在具体目标发生变化时候，调度观察者的更新方法。
比如有个“天气中心”的具体目标A，专门监听天气变化，而有个显示天气的界面的观察者B，B就把自己注册到A里，当A触发天气变化，就调度B的更新方法，并带上自己的上下文。
---发布/订阅模式：订阅者把自己想订阅的事件注册到调度中心，当该事件触发时候，发布者发布该事件到调度中心（顺带上下文），由调度中心统一调度订阅者注册到调度中心的处理代码。
比如有个界面是实时显示天气，它就订阅天气事件（注册到调度中心，包括处理程序），当天气变化时（定时获取数据），就作为发布者发布天气信息到调度中心，调度中心就调度订阅者的天气处理程序。
