装饰者模式在日常开发中的缩影和vue中的使用详解

目录

• 一、日常开发
• 1、数据埋点
• 2、表单校验
• 二、框架功能（vue）
• 1、数组监听
• 2、重写挂载
• 总结

一、日常开发

装饰者模式以其不改变原对象，并且与原对象有着相同接口的特点，广泛应用于日常开发和主流框架的功能中。

1、数据埋点

假如我们开发了一个移动端网页，有图书搜索、小游戏、音频播放和视频播放等主要功能，初期，我们并不知道这几个功能用户的使用规律。

有一天，产品经理说，我想要各个功能用户的使用规律，并且通过echarts绘制折线图和柱状图，能加吗？

这就加......

起初:

<button id="smallGameBtn">小游戏</button>
<script>
    var enterSmallGame = function () {
        console.log('进入小游戏')
    }
    document.getElementById('smallGameBtn').onclick = enterSmallGame;
</script>

通过装饰者模式增加数据埋点之后:

<button id="smallGameBtn">小游戏</button>
<script>
     Function.prototype.after= function (afterFn) {
        var selfFn = this;
        return function () {
            var ret = selfFn.apply(this, arguments)
            afterFn.apply(this.arguments)
            return ret
        }
    }
    var enterSmallGame = function () {
        console.log('进入小游戏')
    }
    var dataLog = function () {
        console.log('数据埋点')
    }
    enterSmallGame = enterSmallGame.after(dataLog)
    document.getElementById('smallGameBtn').onclick = enterSmallGame;
</script>

定义Function.prototype.after函数，其中通过闭包的方式缓存selfFn，然后返回一个函数，该函数首先执行selfFn，再执行afterFn，这里也很清晰的可以看出两个函数的执行顺序。

在当前例子中，首先执行进入小游戏的功能，然后，再执行数据埋点的功能。

可以看出，加了数据埋点，执行函数是enterSmallGame，不加也是。同时，也未对函数enterSmallGame内部进行修改。

2、表单校验

假如，我们开发了登录页面，有账号和密码输入框。

我们知道，校验是必须加的功能。

不加校验：

账号：<input id="account" type="text">
密码：<input id="password" type="password">
<button id="loginBtn">登录</button>
<script>
    var loginBtn = document.getElementById('loginBtn')
    var loginFn = function () {
        console.log('登录成功')
    }
    loginBtn.onclick = loginFn;
</script>

通过装饰者模式加校验之后:

账号：<input id="account" type="text">
密码：<input id="password" type="password">
<button id="loginBtn">登录</button>
<script>
    var loginBtn = document.getElementById('loginBtn')
    Function.prototype.before = function (beforeFn) {
        var selfFn = this;
        return function () {
            if (!beforeFn.apply(this, arguments)) {
                return;
            }
            return selfFn.apply(this, arguments)
        }
    }
    var loginFn = function () {
        console.log('登录成功')
    }
    var validateFn = function () {
        var account = document.getElementById('account').value;
        var password = document.getElementById('password').value;
        return account && password;
    }
    loginFn = loginFn.before(validateFn)
    loginBtn.onclick = loginFn;
</script>

定义Function.prototype.before函数，其中通过闭包的方式缓存selfFn，然后返回一个函数，该函数首先执行beforeFn，当其返回true时，再执行afterFn。

在当前例子中，首先执行表单校验的功能，然后，提示登录成功，进入系统。

可以看出，加了表单校验，执行函数是loginFn，不加也是。同时，也未对函数loginFn内部进行修改。

二、框架功能（vue）

1、数组监听

vue的特点之一就是数据响应式，数据的变化会改变视图的变化。但是，数组中通过下标索引的方式直接修改不会引起视图变化，通过push、pop、shift、unshift和splice等方式修改数据就可以。

这里我们只看响应式处理数据的核心逻辑Observer：

export class Observer {
  value: any;
  dep: Dep;
  vmCount: number; // number of vms that have this object as root $data
  constructor (value: any) {
    if (Array.isArray(value)) {
       protoAugment(value, arrayMethods)
    }
  }
}

如果需要响应式处理的数据满足Array.isArray(value)，则可通过protoAugment对数据进行处理。

function protoAugment (target, src: Object) {
  target.__proto__ = src
}

这里修改目标的__proto__ 指向为src，protoAugment(value, arrayMethods)执行的含义就是修改数组的原型指向为arrayMethods：

import { def } from '../util/index'
const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
methodsToPatch.forEach(function (method) {
  // cache original method
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    if (inserted) ob.observeArray(inserted)
    // notify change
    ob.dep.notify()
    return result
  })
})

通过const arrayProto = Array.prototype的方式缓存Array的原型，通过const arrayMethods = Object.create(arrayProto)原型继承的方式让arrayMethods上继承了Array原型上的所有方法。这里有定义了包含push和splice等方法的数组methodsToPatch，循环遍历methodsToPatch数组并执行def方法：

export function def (obj: Object, key: string, val: any, enumerable?: boolean) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    writable: true,
    configurable: true
  })
}

这里的目的是当访问到methodsToPatch中的方法method的时候，先const result = original.apply(this, args)执行的原始方法，获取到方法的执行结果result。然后通过switch (method) 的方式针对不同的方法进行参数的处理，手动响应式的处理，并且进行视图重新渲染的通知ob.dep.notify()。

整个过程可以看出，是对数组的原型进行了装饰者模式的处理。目的是，针对push、pop、shift、unshift和splice等方法进行装饰，当通过这些方法进行数组数据的修改时，在执行本体函数arrayProto[method]的同时，还执行了手动响应式处理和视图更新通知的操作。

2、重写挂载

vue还有特点是支持跨平台，不仅可以使用在web平台运行，也可以使用在weex平台运行。

首先定义了公共的挂载方法：

// public mount method
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}

通过装饰者模式处理平台相关的节点挂载和模板编译：

const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && query(el)
  /* istanbul ignore if */
  if (el === document.body || el === document.documentElement) {
    process.env.NODE_ENV !== 'production' && warn(
      `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
    )
    return this
  }
  const options = this.$options
  // resolve template/el and convert to render function
  if (!options.render) {
    let template = options.template
    if (template) {
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          template = idToTemplate(template)
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && !template) {
            warn(
              `Template element not found or is empty: ${options.template}`,
              this
            )
          }
        }
      } else if (template.nodeType) {
        template = template.innerHTML
      } else {
        if (process.env.NODE_ENV !== 'production') {
          warn('invalid template option:' + template, this)
        }
        return this
      }
    } else if (el) {
      template = getOuterHTML(el)
    }
    if (template) {
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile')
      }
      const { render, staticRenderFns } = compileToFunctions(template, {
        outputSourceRange: process.env.NODE_ENV !== 'production',
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      options.render = render
      options.staticRenderFns = staticRenderFns
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile end')
        measure(`vue ${this._name} compile`, 'compile', 'compile end')
      }
    }
  }
  // 这里执行缓存的与平台无关的mount方法
  return mount.call(this, el, hydrating)
}

可以看出，在web平台中先缓存公共的挂载方法。当其处理完平台相关的挂载节点和模板编译等操作后，再去执行与平台无关的挂载方法。

总结

装饰者模式，是一种可以首先定义本体函数进行执行。然后，在需要进行功能添加的时候，重新定义一个用来装饰的函数。

装饰的函数可以在本体函数之前执行，也可以在本体函数之后执行，在某一天不需要装饰函数的时候，也可以只执行本体函数。因为本体函数和通过装饰者模式改造的函数有着相同的接口，而且也可以不必去熟悉本体函数内部的实现。

以上就是装饰者模式在日常开发中的缩影和vue中的使用详解的详细内容，更多关于vue 使用装饰者模式的资料请关注我们其它相关文章！