常用的设计模式
创建型模式
工厂模式
创建对象时不会对客户端暴露创建逻辑，并且时通过使用一个共同的接口来指向新创建的对象，用工厂方法代替 new 操作的一种模式
class Creator {
create (name) {
return new Animal(name)
}
}
class Animal {
constructor (name) {
this.name = name
}
}
const creator = new Creator()
const duck = creator.create('Duck')
console.log(duck.name)
const chicken = creator.create('Chicken')
console.log(chicken.name)单例模式
保证一个类仅有一个实例，并提供一个访问它的全局访问点
// 实例如果已经创建，则直接返回
class Person {
info (kg = 60, cm = 174) {
let key = `${kg}kg_${cm}cm`
if (Person.result[key]) {
console.log('已经存在')
return Person.result[key]
} else {
console.log('第一次')
const obj = {height: cm, weight: kg}
Person.result[key] = obj
return obj
}
}
}
Person.result = {}
let a = Person()
a.info()
let b = Person()
b.info()原型模式
用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象
const prototype = {
name: 'jack',
getName: function () {
return this.name
}
}
const obj = Object.create(prototype, {
job: {
value: 'IT'
}
})
console.log(obj.getName())
console.log(obj.job)
console.log(obj.__proto__ === prototype)
// 1. 方法继承
const Parent = function () {
console.log(1)
}
Parent.prototype.show = function () {
console.log(2)
}
const Child = function () {}
// Child继承Parent的所有原型方法
Child.prototype = new Parent()
let a = new Child()
a.show()
// 2. 所有函数默认继承Object
const Foo = function () {}
console.log(Foo.prototype.__proto__ === Object.prototype)
// 3. Object.create
const proto = {a: 1}
const propertiesObject = {
b: {
value: 2
}
}
const obj = Object.create(proto, propertiesObject)
console.log(obj.__proto__ === proto)
// 4. isPrototypeOf
proto.isPrototypeOf(obj)
// 5. instanceof
obj instanceof contructor
// 6. getPrototypeOf
Object.getPrototypeOf(obj)
// 7.setPrototypeOf
const obj = {}
const prototypeObj = {
show () {
console.log(1)
}
}
Object.setPrototypeOf(obj, prototypeObj)
console.log(obj.__proto__ === prototypeObj)
obj.show()结构型模式
适配器模式
解决俩个软件实体间的接口不兼容的问题。使用适配器模式之后，原本由于接口不兼容而不能工作的俩个软件实体可以一起工作
class GoogleMap {
show () {
console.log('渲染谷歌地图')
}
}
class BaiduMap {
display () {
console.log('渲染百度地图')
}
}
// 定义适配器,进行二次封装
class BaiduMapAdapter {
show () {
const baiduMap = new BaiduMap()
return baiduMap.display()
}
}
function render (map) {
if (map.show instanceof Function) {
map.show()
}
}
let googleMap = new GoogleMap()
let baiduMap = new BaiduMapAdapter()
render(googleMap)
render(baiduMap)代理模式
为一个对象提供一个代用品或占位符,以便控制对它的访问
class MyImage {
constructor () {
this.img = new Image()
document.body.appendChild(this.img)
}
// 此方法为方便废弃预加载时，可以直接使用本体的setSrc方法,删除代理类即可
setSrc (src) {
this.img.src = src
}
}
class ProxyImage () {
constructor () {
this.proxyImage = new Image()
}
setSrc (src) {
let myImageObj = new MyImage()
myImageObj.img.src = 'xxxx.png' // 本地路径
this.proxyImage.src = src
this.proxyImage.onload = function () {
myImageObj.img.src = src
}
}
}
let proxyImage = new ProxyImage()
proxyImage.setSrc('http://xxx.png')行为型模式
策略模式
定义一系列的算法,把他们一个个封装起来,并使他们可以替换
const fnA = function (val) {
return val * 1
}
const fnB = function (val) {
return val * 2
}
const fnC = function (val) {
return val * 3
}
var calculate = function (fn, val) {
return fn(val)
}
console.log(calculate(fnA, 100))
console.log(calculate(fnB, 200))
console.log(calculate(fnC, 300))迭代器模式
迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。
class Creator {
constructor (list) {
this.list = list
}
createIterator () {
return new Iterator(this)
}
}
class Iterator {
constructor (creator) {
this.list = creator.list
this.keyArr = Object.entries(this.list)
this.index = 0
}
isDone () {
return this.index >= this.keyArr.length
}
next () {
return this.keyArr[this.index++][1]
}
}
const arr = [1, 2, 3, 4]
const obj = {a: 1, b:2}
const creator1 = new Creator(arr)
const iterator1 = creator1.createIterator()
while (!iterator1.isDone()) {
console.log(iterator1.next())
}
const creator2 = new Creator(obj)
const iterator2 = creator2.createIterator()
while (!iterator2.isDone()) {
console.log(iterator2.next())
}观察者模式(发布-订阅)
定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。
class EventEmitter {
constructor () {
// 缓存列表
this.list = {}
}
// 订阅
on (event, fn) {
// 如果没有event值,就给event创建个缓存列表
// 如果有对应的event值,把fn添加到对应event的缓存列表里
(this.list[event] || (this.list[event] = [])).push(fn)
return this
}
// 监听一次
once (event, fn) {
// 先绑定,调用后删除
function on () {
this.off(event, on)
fn.apply(this, arguments)
}
on.fn = fn
this.on(event, on)
return this
}
// 取消订阅
off (event, fn) {
let fns = this.list[event]
// 如果缓存列表中没有对应的fn,返回false
if (!fns) return false
if (!fn) {
// 如果fn不存在,就会将event值对应缓存列表中的fn都清空
fns && (fns.length = 0)
} else {
// 如果有fn, 遍历缓存列表,看看传入的fn与那个函数相同,如果相同就直接从缓存列表中删除
let cb
let cbLen = fns.length
for (let i = 0; i < cbLen; i++) {
cb = fns[i]
if (cb === fn || cb.fn === fn) {
fns.splice(i, 1)
break
}
}
}
return this
}
// 发布
emit () {
// 第一个参数对应的event值,直接用数组的shift方法取出
let event = [].shift.call(arguments)
let fns = [...this.list[event]]
// 如果缓存列表里没有fn就返回false
if (!fns || fns.length === 0) {
return false
}
// 遍历event值对应的缓存列表,依次执行fn
fns.forEach(fn => {
fn.apply(this, arguments)
})
return this
}
}
// 测试
function user1 (content) {
console.log('用户1订阅了: ', content)
}
function user2 (content) {
console.log('用户2订阅了: ', content)
}
function user3 (content) {
console.log('用户3订阅了: ', content)
}
function user4 (content) {
console.log('用户4订阅了: ', content)
}
let eventEmitter = new EventEmitter()
// 订阅
eventEmitter.on('article1', user1)
eventEmitter.on('article1', user2)
eventEmitter.on('article1', user3)
// 取消user2方法的订阅
eventEmitter.off('article1', user2)
eventEmitter.once('article2', user4)
// 发布
eventEmitter.emit('article1', 'JS 发布-订阅模式')
eventEmitter.emit('article1', 'JS 发布-订阅模式')
eventEmitter.emit('article2', 'JS 观察者模式')
eventEmitter.emit('article2', 'JS 观察者模式')命令模式
定义一个传令者，暴露一个统一的接口给发布者，发布者不用去管接受者如何执行命令，做到发布者和接受者的解耦。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cmd-demo</title>
</head>
<body>
<div>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
</div>
<script>
const btn1 = document.getElementById('btn1')
const btn2 = document.getElementById('btn2')
// 定义一个执行者
class Executor {
setCommand (btn, command) {
btn.onclick = function () {
command.excute()
}
}
}
// 定义一个传令者
class Menu {
refresh () {
console.log('刷新菜单')
}
addMenu () {
console.log('增加菜单')
}
}
// 定义一个传令者:接收刷新菜单的命令
class RefreshMenu {
constructor (receiver) {
this.receiver = receiver
}
excute () {
this.receiver.refresh()
}
}
// 定义一个传令者:接收增加菜单的命令
class Addmenu {
constructor (receiver) {
this.receiver = receiver
}
excute () {
this.receiver.addMenu()
}
}
const menu = new Menu()
const excutor = new Executor()
// 按钮1添加刷新功能
const refreshMenu = new RefreshMenu(menu)
excutor.setCommand(btn1, refreshMenu)
// 按钮2增加菜单
const addMenu = new Addmenu(menu)
excutor.setCommand(btn2, addMenu)
</script>
</body>
</html>
状态模式
状态模式的意图是让一个对象在其内部状态改变的时候，其行为也随之改变。状态模式需要对每一个系统可能取得的状态创立一个状态类的子类。当系统的状态变化时，系统便改变所选的子类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>state-demo</title>
</head>
<body>
<button id="btn">开关</button>
<script>
// 关闭状态
class OffLightState {
constructor (light) {
this.light = light
}
pressBtn () {
this.light.setState(this.light.weekLightState)
console.log('开启弱光')
}
}
// 弱光状态
class WeekLightState {
constructor (light) {
this.light = light
}
pressBtn () {
this.light.setState(this.light.strongLightState)
console.log('开启强光')
}
}
// 强光状态
class StrongLightState {
constructor (light) {
this.light = light
}
pressBtn () {
this.light.setState(this.light.offLightState)
console.log('关闭电灯')
}
}
class Light {
constructor () {
this.offLightState = new OffLightState(this)
this.weekLightState = new WeekLightState(this)
this.strongLightState = new StrongLightState(this)
this.currentState = this.offLightState
}
setState (newState) {
this.currentState = newState
}
}
let light = new Light()
const btn = document.getElementById('btn')
btn.onclick = function () {
light.currentState.pressBtn()
}
</script>
</body>
</html>
参考
Last updated