摘要：示例輸出第一步先不考慮插件，在已有的中是沒(méi)有這個(gè)公共方法的，如果要簡(jiǎn)單實(shí)現(xiàn)的話可以通過(guò)鉤子函數(shù)來(lái)，即在里面驗(yàn)證邏輯。按照插件的開(kāi)發(fā)流程，應(yīng)該有一個(gè)公開(kāi)方法，在里面使用全局的方法添加一些組件選項(xiàng)，方法包含一個(gè)鉤子函數(shù)，在鉤子函數(shù)中驗(yàn)證。

（關(guān)注福利，關(guān)注本公眾號(hào)回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實(shí)戰(zhàn)、面試指導(dǎo)）

Vue進(jìn)階系列匯總?cè)缦?，歡迎閱讀，歡迎加高級(jí)前端進(jìn)階群一起學(xué)習(xí)（文末）。

Vue 進(jìn)階系列（一）之響應(yīng)式原理及實(shí)現(xiàn)

Vue 進(jìn)階系列（二）之插件原理及實(shí)現(xiàn)

Vue 進(jìn)階系列（三）之Render函數(shù)原理及實(shí)現(xiàn)

插件的詳細(xì)使用方法詳情看Vue官網(wǎng)

Vue官網(wǎng)之插件Plugins

概括出來(lái)就是

1、通過(guò)Vue.use(MyPlugin)使用，本質(zhì)上是調(diào)用MyPlugin.install(Vue)

2、使用插件必須在new Vue()啟動(dòng)應(yīng)用之前完成，實(shí)例化之前就要配置好。

3、如果使用Vue.use多次注冊(cè)相同插件，那只會(huì)注冊(cè)成功一次。

Vue.use源碼如下

Vue.use = function (plugin) {   
    // 忽略已注冊(cè)插件
    if (plugin.installed) {
      return
    }
    
    // 集合轉(zhuǎn)數(shù)組，并去除第一個(gè)參數(shù)
    var args = toArray(arguments, 1);
    
    // 把this（即Vue）添加到數(shù)組的第一個(gè)參數(shù)中
    args.unshift(this);
    
    // 調(diào)用install方法
    if (typeof plugin.install === "function") {
      plugin.install.apply(plugin, args);
    } else if (typeof plugin === "function") {
      plugin.apply(null, args);
    }
    
    // 注冊(cè)成功
    plugin.installed = true;
    return this;
  };

Vue.use接受一個(gè)對(duì)象參數(shù)plugin，首先判斷是否已注冊(cè)，如果多次注冊(cè)相同插件那么只會(huì)注冊(cè)成功一次，在注冊(cè)成功后設(shè)置plugin.installed = true。

然后執(zhí)行toArray(arguments, 1)方法，arguments是一個(gè)表示所有參數(shù)的類(lèi)數(shù)組對(duì)象，需要轉(zhuǎn)換成數(shù)組之后才能使用數(shù)組的方法。

function toArray (list, start) {
  start = start || 0;
  var i = list.length - start;
  var ret = new Array(i);
  // 循環(huán)去除 前start元素
  while (i--) {
    ret[i] = list[i + start];
  }
  return ret
}

上面進(jìn)行了一次轉(zhuǎn)換，假設(shè)list是[1, 2, 3, 4]，start是1，首先創(chuàng)建一個(gè)包含3個(gè)元素的數(shù)組，依次執(zhí)行ret[2] = list[ 2 + 1]、ret[1] = list[ 1 + 1]、ret[0] = list[ 0 + 1]，實(shí)際上就是去除arguments的第一個(gè)參數(shù)然后把剩余的類(lèi)數(shù)組賦值給新的數(shù)組，其實(shí)就是去除plugin參數(shù)，因?yàn)檎{(diào)用plugin.install的時(shí)候不需要這個(gè)參數(shù)。

還可以通過(guò)如下幾種方式實(shí)現(xiàn)類(lèi)數(shù)組轉(zhuǎn)換成數(shù)組，但是使用slice會(huì)阻止某些JavaScript引擎中的優(yōu)化（參考自MDN）。

// ES5
var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);

// ES6
const args = Array.from(arguments);
const args = [...arguments];

轉(zhuǎn)換成數(shù)組之后調(diào)用args.unshift(this)，把Vue對(duì)象添加到args的第一個(gè)參數(shù)中，這樣就可以在調(diào)用plugin.install方法的時(shí)候把Vue對(duì)象傳遞過(guò)去。

要求創(chuàng)建一個(gè)告訴Vue組件處理自定義rules規(guī)則選項(xiàng)的插件，這個(gè)rules需要一個(gè)對(duì)象，該對(duì)象指定組件中的數(shù)據(jù)的驗(yàn)證規(guī)則。

示例：

const vm = new Vue({
  data: { foo: 10 },
  rules: {
    foo: {
      validate: value => value > 1,
      message: "foo must be greater than one"
    }
  }
})

vm.foo = 0 // 輸出 foo must be greater than one

第一步先不考慮插件，在已有的VueAPI中是沒(méi)有rules這個(gè)公共方法的，如果要簡(jiǎn)單實(shí)現(xiàn)的話可以通過(guò)鉤子函數(shù)來(lái)，即在created里面驗(yàn)證邏輯。

const vm = new Vue({
    data: { foo: 10 },
    rules: {
        foo: {
          validate: value => value > 1,
          message: "foo must be greater than one"
        }
    },
    created: function () {
      
        // 驗(yàn)證邏輯
        const rules = this.$options.rules
        if (rules) {
          Object.keys(rules).forEach(key => {
          
            // 取得所有規(guī)則
            const { validate, message } = rules[key]
            
            // 監(jiān)聽(tīng)，鍵是變量，值是函數(shù)
            this.$watch(key, newValue => {
            
              // 驗(yàn)證規(guī)則
              const valid = validate(newValue)
              if (!valid) {
                console.log(message)
              }
            })
          })
        }
      }
    
})

可以通過(guò)this.$options.rules獲取到自定義的rules對(duì)象，然后對(duì)所有規(guī)則遍歷，使用自定義的validate(newValue)驗(yàn)證規(guī)則。

第二步實(shí)現(xiàn)這個(gè)rules插件，為了在Vue中直接使用，可以通過(guò)Vue.mixin注入到Vue組件中，這樣所有的Vue實(shí)例都可以使用。

按照插件的開(kāi)發(fā)流程，應(yīng)該有一個(gè)公開(kāi)方法install，在install里面使用全局的mixin方法添加一些組件選項(xiàng)，mixin方法包含一個(gè)created鉤子函數(shù)，在鉤子函數(shù)中驗(yàn)證this.$options.rules。

實(shí)現(xiàn)代碼如下：

import Vue from "vue"

// 定義插件
const RulesPlugin = {

  // 插件應(yīng)該有一個(gè)公開(kāi)方法install
  // 第一個(gè)參數(shù)是Vue 構(gòu)造器
  // 第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象
  install (Vue) {
  
    // 注入組件
    Vue.mixin({
    
      // 鉤子函數(shù)
      created: function () {
      
        // 驗(yàn)證邏輯
        const rules = this.$options.rules
        if (rules) {
          Object.keys(rules).forEach(key => {
          
            // 取得所有規(guī)則
            const { validate, message } = rules[key]
            
            // 監(jiān)聽(tīng)，鍵是變量，值是函數(shù)
            this.$watch(key, newValue => {
            
              // 驗(yàn)證規(guī)則
              const valid = validate(newValue)
              if (!valid) {
                console.log(message)
              }
            })
          })
        }
      }
    })
  }
}

// 調(diào)用插件，實(shí)際上就是調(diào)用插件的install方法
// 即RulesPlugin.install(Vue)
Vue.use(RulesPlugin)

Vue官網(wǎng)之插件Plugins  
MDN之Arguments 對(duì)象

本人Github鏈接如下，歡迎各位Star

http://github.com/yygmind/blog

我是木易楊，網(wǎng)易高級(jí)前端工程師，跟著我每周重點(diǎn)攻克一個(gè)前端面試重難點(diǎn)。接下來(lái)讓我?guī)阕哌M(jìn)高級(jí)前端的世界，在進(jìn)階的路上，共勉！

如果你想加群討論每期面試知識(shí)點(diǎn)，公眾號(hào)回復(fù)[加群]即可