前端常见的6个设计模式和使用场景

本文介绍了前端开发中常见的六种设计模式:工厂模式用于创建对象,如jQuery和React的创建函数;单例模式确保全局只有一个实例,如Vue、Node App和状态管理的store;代理模式通过Proxy实现访问拦截;观察者模式用于对象状态变化的监听;发布订阅模式处理事件传递;装饰器模式在不改变原有功能基础上扩展,常见于ES和TypeScript的Decorator。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  1. 工厂模式
  2. 单例模式
  3. 代理模式
  4. 观察者模式
  5. 发布订阅者模式
  6. 装饰器模式

工厂模式

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('这是我正常的功能函数')
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值