Javascript 设计模式
创建型模式
工厂模式
建造者模式
行为模式
中介者模式
职责链模式
观察者模式
工厂模式
描述： 通过不同的type new不同的类, 只需要和工厂打交道
应用场景： 封装
// 抽象工厂模式 通过不同的type new不同的类
class Button {
constructor(color,text) {
this.color = color;
this.text = text;
}
click(fn) {
console.log('click')
fn && fn()
}
}
class PrimaryBtn extends Button { // 按钮对象
constructor(text) {
super('blue',text)
}
}
class WarningBtn extends Button { // 按钮对象
constructor(text) {
super('yellow',text)
}
}
class ButtonFactory {
static types = {}
static getButton(type,text) {
let cls = this.types[type];
if (cls) {
return new cls(text)
} else {
return null
}
}
static registerButton(type,Button) {
this.types[type] = Button;
}
}
// 注册才能使用
ButtonFactory.registerButton('primary',PrimaryBtn)
ButtonFactory.registerButton('warning',WarningBtn)
// 演示
let primary = ButtonFactory.getButton('primary','搜索')
console.log(primary);
建造者模式
描述： 通过一个中介者对象控制其他的对象
应用场景： 封装DOM事件绑定
// Builder 建造者模式。根据需要创建对象的属性
class BuildHouse {
constructor(name) {
this.name = name
}
buildWindow() {
this.window = true;
return this;
}
buildBalcony() {
this.balcony= true
return this;
}
}
new BuildHouse('Mike').buildWindow().buildBalcony() // 有窗户有阳台
new BuildHouse('Amy').buildWindow() // 只有窗户
中介者模式
描述： 根据需要创建对象的属性
应用场景： 创建自定义对象
let btn = document.querySelector('#btn')
let submitBtn = document.querySelector('#btnSubmit')
let input = document.querySelector('input')
let eventManager = { // 通过这个控制事件
btnClick() { },
inputChange() {},
submitClick() {}
}
btn.onclick = eventManager.btnClick
submitBtn.onclick = eventManager.submitClick
input.onchange = eventManager.inputChange
职责链模式
描述： 当这个事件执行完毕接着执行下一个事件
应用场景： 改善回调地狱
// 职责链
class Chain {
constructor() {
this._chainItem = [];
this._index = -1;
}
setNext(fn) {
this._chainItem.push(fn);
return this;
}
toNext(...args) {
this._index++;
if (this._index !== this._chainItem.length) {
return this._chainItem[this._index](...args);
}
}
start(...args) {
return this.toNext(...args)
}
}
// 事件-------
// 打8折
function discount8(array) {
let result = array.map(item=>Math.floor(item*0.8));
return queryChain.toNext(result);
}
// 加单位
function addUnit(array) {
let result = array.map(item=>item+'元')
return result;
}
// 演示
let queryChain = new Chain();
queryChain.setNext(discount8).setNext(addUnit); // 打完8折加价格单位
queryChain.start([199,499,758,50]) // ["159元", "399元", "606元", "40元"]
观察者模式
描述： 每个对象都可以向观察者订阅一个事件，观察者发布一个事件把订阅该事件的所有事件运行
应用场景： 下拉框change时触发函数。可以改这个些函数订阅change事件，下拉框change时发布change事件。
// 观察者模式
class Observer {
constructor(name='') {
this.name = name
this._subscribes = {} // 保存订阅的事件
}
// 订阅事件
// @param{String} event 事件名称
// @param{Function} fn 执行的函数
subscribe(event,fn) {
let subscribes = this._subscribes[event];
if (subscribes) {
subscribes.push(fn)
} else {
this._subscribes[event] = [fn]
}
}
// 发布订阅事件
// @param{String} event 事件名称
// @param{*} args 传递给执行事件的参数
publish(event,...args) {
let subscribes = this._subscribes[event] || [];
subscribes.forEach(fn=>{
fn(...args);
})
}
// 删除订阅事件
// @param{String}event 事件名称
// @param{Function} fn 有名称的函数
// @return{Function} 返回被删除的函数
remove(event,fn) {
let subscribes = this._subscribes[event] || [];
let result = null;
subscribes.forEach((item,itemI)=>{
if (Object.is(fn,item)) {
result = subscribes.splice(itemI,1)
}
})
return result;
}
}
// 演示
let fn1 = (param) => { console.log(param + 1)}
let fn2 = (param) => { console.log(param + 2)}
let selectObserver = new Observer('select');
selectObserver.subscribe('change', fn1)
selectObserver.subscribe('change', fn2)
selectObserver.publish('change','change')
selectObserver.remove('change',fn1)
发表评论 (审核通过后显示评论)：