持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情
关键词：结构型模式 Decorator Wrapper 动态增加功能 原型高达挂载武器模块
在设计上更像是 AOP 的设计思路。也可以理解成 react 中的 HOC。
解决什么问题？
装饰器模式主要解决继承关系过于复杂的问题，通过组合来替代继承。
它主要的作用是给原始类添加增强功能。用于一开始不能确定对象的全部功能时，为对象动态加入行为，也可以说是增强功能。
相对于继承，有两个特殊的地方：
- 装饰器和原始类继承同样的父类，这样我们可以对原始类“嵌套”多个装饰器类。
- 装饰器是对功能的增强，这也是装饰器模式应用场景的一个重要特点。
举个例子：
继承的加强类似假两件，装饰器的加强类似单品穿搭。
class Body {
wear() {
console.log('Body!')
}
}
class TshirtDecorator {
constructor(body) {
this.body = body
}
wear() {
this.body.wear();
console.log('穿T恤')
}
}
class JacketDecorator {
constructor(body) {
this.body = body
}
wear() {
this.body.wear()
console.log('穿夹克')
}
}
let p = new Body();
p = new TshirtDecorator(p)
p = new JacketDecorator(p)
p.wear()
// Body!
// 穿T恤
// 穿夹克
应用场景
不希望某个类天生就非常庞大，一次性包含许多职责。那么我们就可以使用装饰者模式。
侧重于功能，或者拆分方法的时候，推荐使用装饰器模式。并且可以嵌套多个装饰器类。
具体实践
原始代码
修改为一个简单的 HOC 组件
外面再嵌套一个装饰器
工具函数一览
const before = (fn, beforefn) => {
return function () {
beforefn.apply(this, arguments)
return fn.apply(this,arguments)
}
}
const after = (fn, afterfn) => {
return function () {
const res = fn.apply(this,arguments)
afterfn.apply(this, arguments)
return res
}
}
let bf = before(function () { alert(3) }, function () { alert(2) })
bf = before(bf, function () { alert(1) })
bf()
let af = after(function () { alert(3) }, function () { alert(2) })
af = after(af, function () { alert(1) })
af()
数据统计上报
// html
<button id="btn" tag="login">点击打开登录框</button>
const log = (tag) => {
console.log(`上报标签为${tag}`)
}
function showLogin() {
console.log('打开弹窗', this)
log(this.getAttribute('tag'))
}
// 页面登录按钮，点击弹出登录框，并进行数据上报
document.getElementById('btn').addEventListener('click', showLogin)
解耦数据上报和登录弹窗两项功能。
const after = (fn, afterfn) => {
return function () {
const res = fn.apply(this, arguments)
afterfn.apply(this, arguments)
return res
}
}
function showLogin() {
console.log('打开弹窗')
}
function log() {
console.log(`上报标签为${this.getAttribute('tag')}`)
}
showLogin = after(showLogin, log)
document.getElementById('btn').addEventListener('click', showLogin)
动态修改函数参数
const before = (fn, beforefn) => {
return function () {
beforefn.apply(this, arguments)
return fn.apply(this, arguments)
}
}
const getToken = () => 'token'
function ajax(type, url, params) {
console.table(params)
}
// 给请求添加token
ajax = before(ajax, function (type, url, params) {
params.token = getToken()
})
ajax('get', 'url', { name: 'kane' })
插件式表单验证
// html
// 用户名 <input type="text" id="name"/>
// 密码 <input type="password" id="pwd"/>
// <button id="btn" tag="login">提交</button>
const name = document.getElementById('name');
const pwd = document.getElementById('pwd');
const btn = document.getElementById('btn');
Function.prototype.before = function (beforefn) {
const _this = this;
return function () {
if (beforefn.apply(this, arguments) === false) return;
return _this.apply(this, arguments)
}
}
const validata = () => {
if (name.value === '' || pwd.value === '') {
alert(`不能为空`)
return false
}
return true
}
let submit = () => {
const params = {
name: name.value,
pwd: pwd.value,
}
// 提交数据
console.log(params)
}
submit = submit.before(validata)
btn.onclick = () => {
submit()
}
参考资料
