装饰器模式

Decoration

概述

对原有功能的扩充

不改变原有功能|代码

可插拔式的使用

功能拓展

前置函数、后置函数：主要功能实现的同时，统计用户行为：日志、点赞、收藏等、Ajax请求中token的使用：有的页面需要，有的页面不需要

参考代码

Function.prototype.before = function (beforeFn) {
  let _this = this
  return function () {
    beforeFn.apply(this, arguments)
    return _this.apply(this, arguments)
  }
}

Function.prototype.after = function (afterFn) {
  let _this = this
  return function () {
    let res = _this.apply(this, arguments)
    afterFn.apply(this, arguments)
    return res
  }
}

function test() {
  console.log('11111111111');
}

let fn = test.before(() => {
  console.log('before');
}).after(() => {
  console.log('after');
})

function log() {
  console.log('logging');
}

function render() {
  console.log('rendering');
}

//如果需要记录，就扩展
render = render.before(log)

let btn = document.querySelector('button')
btn.addEventListener('click', () => {
  render()
})