- 工厂模式
- 单例模式
- 代理模式
- 观察者模式
- 发布订阅者模式
- 装饰器模式
工厂模式
jquery \ react createElement 函数(jsx语法的底层函数)返回一个函数
单例模式
全局唯一实例
Vue 项目里中的Vue 实例
Node 项目中的App 实例
Vuex React-Redux中的store
全局唯一的组件,像弹出窗口
class Dog{
constructor(){}
static getInstance(){
return Dog._instance
}
}
const d1 = new Dog()
const d2 = new Dog()
console.log(d1==d2)// false
const d3 = Dog.getInstance()
const d4 = Dog.getInstance()
console.log(d3==d4)//true
代理模式
Proxy 访问一个对象属性之前先做一个拦截(做一些额外的业务或者逻辑操作)
es6 proxy
let obj = {name:'vue',age:9}
let obj2 = new Proxy(obj,{
get(target,property){
console.log
return targt[property]
}
set(target,property,newVal){
targt[property] = newVal
}
})
obj2.age = 10 //触发set
console.log(obj2.name)// 触发get
观察者模式
一个主题,一个观察者,主题发生变化,就触发了观察者的执行(没有媒介)
btn.addEventListener('click',()=>{
})
发布订阅模式
发布者 订阅者 第三方
function fn1 {} // 事件1
function fn2{} // 事件2
// 开启自定义事件监听eventName,从而执行fn1
eventBus.on('eventName',fn1)//订阅者
eventBus.$emit('eventName')//发布者$emit
//删除自动义事件,防止内存泄漏
eventBus.off('eventName',fn1)
装饰器模式
保证原来函数功能不变的同时,增加一个新的功能(Aop面向切面编程)开发封闭
场景:
ES和Typescript 的Decorator 语法、
类装饰器,函数(方法)装饰器模式,属性装饰器
Next.js框架-controller
function deco(){
return function(){
console.log('给fn函数增加新的功能')
}
}
@deco()
function fn(){
console.log('这是我正常的功能函数')
}
本文介绍了前端开发中常见的六种设计模式:工厂模式用于创建对象,如jQuery和React的创建函数;单例模式确保全局只有一个实例,如Vue、Node App和状态管理的store;代理模式通过Proxy实现访问拦截;观察者模式用于对象状态变化的监听;发布订阅模式处理事件传递;装饰器模式在不改变原有功能基础上扩展,常见于ES和TypeScript的Decorator。

被折叠的 条评论
为什么被折叠?



