设计模式
代码++整体的结构++ 会更加清楚,管理起来会更加方便,更好地维护
设计模式是一种思想
发布订阅
模块化开发 导入很多模块
容器即数组存储未来要执行的方法,同addEventListener
数组塌陷问题*
由于删除了元素,导致从删除元素的位置开始,之后的每一项****索引向前递进的问题。
如果还像开始一样索引递增+1,那么就会产生某些元素被跳过的现象
(function (){`
` let listeners={}`
` function checkName(name){`
` if(typeof name !== 'string') throw new Error('name must be a string!')`
` }`
` function checkFunc(func){`
` if(typeof func !== 'function') throw new Error('callback must be a function!')`
` }`
` const on=function (name,func){`
` checkName(name)`
` checkFunc(func)`
` if(!listeners.hasOwnProperty(name)) listeners[name]=[]`
` let pond=listeners[name]`
` if(!pond.includes(func)){`
` pond.push(func)`
` }`
` }`
` const off=function (name,func){`
` checkName(name)`
` checkFunc(func)`
` if(!listeners.hasOwnProperty(name)) return;`
` let pond=listeners[name]`
` let index=pond.indexOf(func)`
` if(index>-1){`
` pond[index]=null;`
` }`
` }`
` const emit=function (name,...args){`
` checkName(name)`
` let pond=listeners[name]`
` if(!pond) return;`
` for(let i=0;i
let fn=pond[i]
if(typeof fn !== 'function'){
pond.splice(i,1)
i--;
continue;
}
// fn执行
fn(...args)
}
}
window.$subscribe={
on,
off,
emit
}
})()
const fn1=function (){
console.log('fn1');
}
const fn2=function (){
console.log('fn2');
$subscribe.off('success',fn1)
$subscribe.off('success',fn2)
}
const fn3=function (){
console.log('fn3');
}
const fn4=function (){
console.log('fn4');
}
$subscribe.on('success',fn1)
$subscribe.on('success',fn2)
$subscribe.on('success',fn3)
$subscribe.on('success',fn4)
$subscribe.emit('success')
OOP设计模式
++函数式编程不能中止中间不能结束,也不能控制循环的步骤++
发布订阅设计思想:
vue中父子组件emit/on通信,react中redux中公共状态改变通知各个组件执行,好几个地方加入一些方法,某个阶段把它们统一执行,而加入的方法并没有在同一个js中,这个时候就使用发布订阅。
观察者模式
两个对象:观察者和目标
目标:订阅一些方法和通知方法执行
观察者update,每个观察者执行update
把之前函数=>观察者,往事件池中加的是观察者,每个观察者都有一个结构
区别:
加入的是观察者,而不是一个函数。而通知也是通知observer.update执行。
核心思路:
都有个 容器 ,把要呼叫的东西 放进去 , 到达时间以后通知执行 。
先放个容器 ,把 所有东西订阅进去 或移除订阅,以后 再通知执行fire/notify 。
发布订阅是加方法,观察者是加观察者实例。发布订阅是直接通知方法,而观察者是通知观察者实例执行update。