js常见的设计模式一
2024-09-06 21:46:02
1.观察者模式
定义一些一对多的关系，将一系列的观察者对目标函数感兴趣，将自己添加进目标函数，当目标函数状态发生改变时，发送通知，以此通知附加在目标上的观察者
/* 目标 */
class subject {
constructor () {
this.handlers = []
}
addhanler (fn) {
this.handlers.push(fn)
}
notity () {
this.handlers.forEach(hanlder=>{
hanlder.update()
})
}
}
/* 观察者 */
class observer {
constructor (name) {
this.name = name
}
update () {
console.log(this.name)
}
}
let sub = new subject(); sub.addhanler(new observer('czklove'))
sub.addhanler(new observer('czklove1'))
sub.addhanler(new observer('czklove2')) sub.notity()
2.发布订阅者模式
订阅者A和发布者B是通过中间件关联起来的，他们没有直接的交流
/*
pusher 为发布订阅者模式的中间件
相对于观察者模式对了一个中间件，观察者模式，目标是观察者联系紧密
而发布订阅者模式，发布者和订阅者完全没有关系
*/
let pusher = {
clentlist: {},
addhandler (key,fn) {
if(!this.clentlist[key]) {
this.clentlist[key] = []
}
this.clentlist[key].push(fn)
},
notify (key,...args) {
if(this.clentlist[key]) {
this.clentlist[key].forEach(hanlder=>{
hanlder(...args)
})
}
}
}
pusher.addhandler('click',(val)=>{
console.log('1'+val)
})
pusher.addhandler('click',(val)=>{
console.log('2'+val)
})
pusher.addhandler('click',(val)=>{
console.log('3'+val)
})
pusher.notify('click','czklove')
3.中间件模式
中间件模式在js中也广泛引用，如node的express框架，axios源码中的请求拦截器和访问拦截器，我们实现一个简单的中间件
/* 中间件模式 */
class app {
constructor () {
this.hanlders = []
}
/* 使用use将需要执行的目标插入执行队列中 */
use (fn) {
this.hanlders.push(fn)
}
/* 开始执行入口 */
run () {
/* done为当前的执行函数
如果已经执行进入了，则改为flase,
查看回调hanlders是否会调用next，
如果调用next则继续调用下一个回调函数
如果没有next则执行到此为止
*/
let done = true
function next () {
console.log('执行了next')
done = true
}
/* 待执行的队列 */
this.hanlders.forEach(hanlder => {
if (!done) {
return
} else {
done = false
hanlder(next)
}
});
if(done) {
this.callback();
}
}
/* 最终的回调执行函数 */
callback () {
console.log('我们最终需要执行的函数')
}
}
let p = new app();
p.use(next=> {
console.log('中间件1')
next()
})
p.use(next=> {
console.log('中间件2')
next()
})
p.use(next=> {
console.log('中间件3')
next()
})
p.run()
（注，p传入的回调函数，next只是一个形参，不一定非要是next）
中间件1
执行了next
中间件2
执行了next
中间件3
执行了next
我们最终需要执行的函数
如果我们注释掉中间件2的next 则输出的结果为 中间件1
执行了next
中间件2
4.单列模式
对象在全局只有一个实列对象
/* 单列模式 */
/* */
function createperson () {
class person {
constructor (name,age) {
this.name = name;
this.age = age;
}
}
var person1 = null;
return function (name,age) {
if (person) {
} else {
person1 = new person(name,age)
}
return person1
} }
let creatp = createperson(); /* 创建person的实列对象p1 */
let p1 = creatp('czklove','28')
/* 创建person的实列对象p2 */
let p2 = creatp('czklove','29')
console.log(p1===p2)
/* 最终输出true */
/* person全局只能有一个实列对象 */
5 工厂模式
根绝不同的要求，生产出不同的实例对象
/* 工厂模式 */
/* 很简单，大概就是下面这个样子，根据传入的参数，生成对应的实例对象 */
function createobj (type) {
function cj1 () {
this.name = 'czklove',
this.age = '17'
}
function cj2 () {
this.name = 'czklove',
this.age = '18'
}
function cj3 () {
this.name = 'czklove',
this.age = '19'
} switch (type) {
case 'cj1' :
return new cj1();
case 'cj2' :
return new cj2();
case 'cj3' :
return new cj3();
default:
return new cj1();
}
}
console.log(createobj('cj1'))
console.log(createobj('cj2'))
console.log(createobj('cj3')) //cj1 //{name: "czklove", age: "17"}
//{name: "czklove", age: "18"}
//{name: "czklove", age: "19"}
都是一些比较简单的模式，好多都用到了js中的闭包。好好理解闭包真的特别重要
最新文章
- 跨域http头
- mysqld服务器如何查看使用变量的值
- 沈逸老师PHP魔鬼特训笔记(10)
- Apache Hadoop 镜像地址
- 深入理解ob_flush和flush的区别
- 数据读取器对象SqlDataReader与数据适配器对象SqlDataAdapter的使用
- POJ 2892 Tunnel Warfare || HDU 1540（树状数组+二分 || 线段树的单点更新+区间查询）
- WASD控制UI界面血条加减
- 单页面应用SPA架构
- 错误：C:\Windows\System32\ssleay32.dll: Can't load IA 32-bit .dll on a AMD 64-bit
- js中访问对象的方法
- 多线程中join()的用法
- rsync+innotify做到同步式更新
- python os模块详解
- python中的re模块——正则表达式
- Gulp小记
- 算法导论 之 红黑树 - 删除[C语言]【转】
- OpenStack容器网络项目Kuryr（libnetwork）
- awk 文本处理工具
- UI设计必用工具 — AI快捷键大全