经常在使用各种js类库/框架中，往往他们都提供了各种插件机制，来新增补充各种功能，下面想分享一下最近学习各种框架，自己总结一下插件的实现和使用的方式

哪些情况下需要使用插件或者钩子

前端开发中，我们需要设计一个模块，或者一个小型的框架和库，但是前期的功能，比较少，实现是一个简单的版本，随着版本的迭代，我们需要实现的功能会越来越多，但是往往现在想推到代码重新编写，这样费时费力，如果前些实现功能时，预留插件机制或者钩子，那么在版本迭代的时候可以使用插件或者钩子来实现新功能，这样代码的复用性和维护性都往往提高不少

下面以开发一个图表组件来阐述我的思想

主逻辑

function plugins(Obj)
{
    this.plugins = {}
    this.plugins.Obj = Obj
}

plugins.extends = function(target){
    Object.keys(target).forEach(d => {
        pligins.prototype[d] = target[d]
    })
}

plugins.extends({
    addPlugin: function(hook, fn) {
        var me = this
        if (Object.keys(me.plugins).includes(hook)) {
            me.plugins[hook].push(fn)
        } else {
            me.plugins[hook] = fn
        }
    },
    removePlugin: function(hook, fn) {
        var me = this
        if (me.plugins[hook]) {
            var index = me.plugins[hook].indexOf(fn)
            me.plugins.splice(index, 1)
        }
    },
    notify (hook) {
        this.plugins[hook].forEach(d => {
            d.call(null, this.plugins.Obj) 
        })
    }
})
//  图表的实现
function Chart (ctx, config) 
{
    this.plugins = new plugins(this) // 插件的储存目录
    this.config(config)
    this.update(); // 数据更新和图表绘制
}

Chart.prototype.initialize =  function () {
    var me = this
   // 埋下插件的钩子
   me.plugins.notify('beforeInit')
  //  执行其他逻辑
   me.plugins.notify('afterInit')
   //  后置逻辑
 }

调用代码

var  chart =  new Chart(canvas,  config)

chart.plugins.addPlugin ('beforeInit', function(chart) {
  console.log('前置插件')
})
chart.plugins.addPlugin ('afterInit', function(chart) {
  console.log('后置插件')
})
chart.initialize() // 初始化

以上简单实现来一个简单的函数式插件，需要的逻辑都封装在一个插件函数中，当然这样的实现，可以在前置、后置补充很多逻辑，这种封装做的还不是够完美，其实可以把插件实现类似vue.use() 这样来安装，有一个契约规则，让插件编写的规范化

插件和钩子的思想

对于一个前端组件，其实我们在编写的时候也应该有各种生命周期的概念，这样我们可以更加合理的来组织我们的代码。
以图表组件为例说明。

生命周期图

对于这个组件，应该至少有三个阶段， 初始化， 数据变化， 组件析构

所以，我们需要做插件和钩子应该有两种思想。

• 做钩子函数
  可以利用刚刚写的plugins插件实现在生命周期里的钩子函数，在三个阶段 或者 任何更新函数前，都可以埋点。

• 做插件
  插件其实可以做的更加复杂
  我们可以提供类似这样的代码

var plugins = {
  data,
  afterinit() {},
  update() {},
  beforeinit() {}
}

来注册在生命周期中任何阶段都可以执行的逻辑。

• 扩展类库的本上的方法

jQuery 通过 extend 来提供了 修改原型链上的方法和扩展明名空间上的静态方法

• 拓展组件ui 库

现在流行的mvvm类库，其实都提供了 组件注册的方式来使用。