摘要：前言最近開(kāi)發(fā)的頁(yè)面以及功能大都以表格為主，接口獲取來(lái)的數(shù)據(jù)大都是需要經(jīng)過(guò)處理，比如時(shí)間戳需要轉(zhuǎn)換，或者狀態(tài)碼的轉(zhuǎn)義。首先，還是在文件中定義一個(gè)狀態(tài)碼對(duì)應(yīng)對(duì)象，這里我們將其對(duì)應(yīng)的內(nèi)容設(shè)為段落。

最近開(kāi)發(fā)的頁(yè)面以及功能大都以表格為主，接口獲取來(lái)的 JSON 數(shù)據(jù)大都是需要經(jīng)過(guò)處理，比如時(shí)間戳需要轉(zhuǎn)換，或者狀態(tài)碼的轉(zhuǎn)義。對(duì)于這樣的問(wèn)題，各大主流框架都提供了類(lèi)似于過(guò)濾的方法，在 Vue 中，一般是在頁(yè)面上定義 filter 然后在模板文件中使用 | 進(jìn)行處理。

這種方法和以前的遍歷數(shù)組洗數(shù)據(jù)是方便了許多，但是，當(dāng)我發(fā)現(xiàn)在許多的頁(yè)面都有相同的 filter 的時(shí)候，每個(gè)頁(yè)面都要復(fù)制一遍就顯的很蛋疼，遂決定用 Vue.mixin() 實(shí)現(xiàn)一次代碼，無(wú)限復(fù)用。

最后，還可以將所有的 filter 包裝成一個(gè) vue 的插件，使用的時(shí)候調(diào)用 Vue.use() 即可，甚至可以上傳 npm 包，開(kāi)發(fā)不同的項(xiàng)目的時(shí)候可以直接 install 使用。（考慮到最近更新的比較快，遂打包上傳這步驟先緩緩，等版本稍微穩(wěn)定了之后來(lái)補(bǔ)全）

閑話(huà)說(shuō)夠，開(kāi)始正題。

學(xué)習(xí)一個(gè)新的框架或者 API 的時(shí)候，最好的途徑就是上官網(wǎng)，這里附上 Vue.mixin() 官方說(shuō)明。

一句話(huà)解釋?zhuān)?b>Vue.mixin() 可以把你創(chuàng)建的自定義方法混入所有的 Vue 實(shí)例。

示例代碼

Vue.mixin({
  created: function(){
    console.log("success")
  }
})

跑起你的項(xiàng)目，你會(huì)發(fā)現(xiàn)在控制臺(tái)輸出了一坨 success。

效果出來(lái)了意思也就出來(lái)了，所有的 Vue 實(shí)例的 created 方法都被改成了我們自定義的方法。

接下來(lái)的思路很簡(jiǎn)單，我們整合所有的 filter 函數(shù)到一個(gè)文件，在 main.js 中引入即可。

在上代碼之前打斷一下，代碼很簡(jiǎn)單，但是我們可以寫(xiě)的更加規(guī)范化，關(guān)于如何做到規(guī)范，在 Vue 的官網(wǎng)有比較詳細(xì)的 風(fēng)格指南 可以參考。

因?yàn)槲覀兊淖远x方法會(huì)在所有的實(shí)例中混入，如果按照以前的方法，難免會(huì)有覆蓋原先的方法的危險(xiǎn)，按照官方的建議，混入的自定義方法名增加前綴 $_ 用作區(qū)分。

創(chuàng)建一個(gè) config.js 文件，用于保存狀態(tài)碼對(duì)應(yīng)的含義，將其暴露出去

export const typeConfig = {
  1: "type one",
  2: "type two",
  3: "type three"
}

再創(chuàng)建一個(gè) filters.js 文件，用于保存所有的自定義函數(shù)

import { typeConfig } from "./config"
export default {
  filters: {
    $_filterType: (value) => {
      return typeConfig[value] || "type undefined"
    }
  }
}

最后，在 main.js 中引入我們的 filters 方法集

import filter from "./filters"
Vue.mixin(filter)

接下來(lái)，我們就可以在 .vue 的模板文件中隨意使用自定義函數(shù)了

接下來(lái)簡(jiǎn)單應(yīng)用一下 Vue 中插件的制作方法。創(chuàng)建插件之后，就可以 Vue.use(myPlugin) 來(lái)使用了。

首先附上插件的 官方文檔。

一句話(huà)解釋?zhuān)b的插件需要一個(gè) install 的方法將插件裝載到 Vue 上。

關(guān)于 Vue.use() 的源碼

function initUse (Vue) {
  Vue.use = function (plugin) {
    var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

    // additional parameters
    var args = toArray(arguments, 1);
    args.unshift(this);
    if (typeof plugin.install === "function") {
      plugin.install.apply(plugin, args);
    } else if (typeof plugin === "function") {
      plugin.apply(null, args);
    }
    installedPlugins.push(plugin);
    return this
  };
}

很直觀的就看到他在最后調(diào)用了 plugin.install 的方法，我們要做的就是處理好這個(gè) install 函數(shù)即可。

上代碼

config.js 文件依舊需要，這里保存了所有狀態(tài)碼對(duì)應(yīng)的轉(zhuǎn)義文字

創(chuàng)建一個(gè) myPlugin.js 文件，這個(gè)就是我們編寫(xiě)的插件

import { typeConfig } from "./config"

myPlugin.install = (Vue) => {
  Vue.mixin({
    filters: {
      $_filterType: (value) => {
        return typeConfig[value] || "type undefined"
      }
    }
  })
}
export default myPlugin

插件的 install 函數(shù)的第一個(gè)參數(shù)為 Vue 的實(shí)例，后面還可以傳入一些自定義參數(shù)。

在 main.js 文件中，我們不用 Vue.mixin() 轉(zhuǎn)而使用 Vue.use() 來(lái)完成插件的裝載。

import myPlugin from "./myPlugin"
Vue.use(myPlugin)

至此，我們已經(jīng)完成了一個(gè)小小的插件，并將我們的狀態(tài)碼轉(zhuǎn)義過(guò)濾器放入了所有的 Vue 實(shí)例中，在 .vue 的模板文件中，我們可以使用 {{ typeStatus | $_filterType }} 來(lái)進(jìn)行狀態(tài)碼轉(zhuǎn)義了。

Vue.mixin() 可以將自定義的方法混入所有的 Vue 實(shí)例中。

本著快速開(kāi)發(fā)的目的，一排腦門(mén)想到了這個(gè)方法，但是這是否是一個(gè)好方法有待考證，雖然不是說(shuō)擔(dān)心會(huì)對(duì)原先的代碼造成影響，但是所有的 Vue 實(shí)例也包括了第三方模板。

本文可以隨意轉(zhuǎn)載，只要附上原文地址即可。

如果您認(rèn)為我的博文對(duì)您有所幫助，請(qǐng)不吝贊賞，點(diǎn)贊也是讓我動(dòng)力滿(mǎn)滿(mǎn)的手段 =3=。

最近碰到一個(gè)問(wèn)題，也是關(guān)于狀態(tài)碼過(guò)濾的，但是實(shí)現(xiàn)的效果是希望通過(guò)不同的狀態(tài)碼顯示不同的 icon 圖標(biāo)，這個(gè)就不同于上面的文本過(guò)濾了，上文使用的 {{ styleStatus | $_filterStyleStatus }} 是利用 v-text 進(jìn)行渲染，若碰到需要渲染 html 標(biāo)簽就頭疼了。

按照前人的做法，是這樣的，我隨意上一段代碼。

...




...

不！這太不 fashion 太不 cool，我本能的拒絕這樣的寫(xiě)法，但是，問(wèn)題還是要解決，我轉(zhuǎn)而尋找他法。

在看 Vue 的文檔的時(shí)候，其中一個(gè) API $options 官方文檔 就引起了我的注意，我正好需要一個(gè)可以訪(fǎng)問(wèn)到當(dāng)前的 Vue 實(shí)例的 API，一拍腦袋，方案就成了。

首先，還是在 config.js 文件中定義一個(gè)狀態(tài)碼對(duì)應(yīng)對(duì)象，這里我們將其對(duì)應(yīng)的內(nèi)容設(shè)為 html 段落。

export const iconStatus = {
  1: "",
  2: "",
  3: "",
  4: ""
}

接著，我們?cè)?filters.js 文件中引入他，寫(xiě)法還是和以前的 filters 一樣。

import { iconStatus } from "./config"
export default {
  $_filterIcon: (value) => {
      return iconStatus[value] || "icon undefined"
  }
}

重頭戲在這里，我們?cè)谀０逦募行枰秩镜牡胤剑褂?v-html 來(lái)進(jìn)行渲染。

大功告成，以后需要根據(jù)狀態(tài)碼來(lái)渲染 icon 的地方都可以通過(guò)這個(gè)辦法來(lái)完成了。

事實(shí)證明，懶并不一定是錯(cuò)誤的，關(guān)鍵看懶的方向，雖然本篇博客寫(xiě)的標(biāo)題是 偷懶 ，但其實(shí)我只是對(duì)于重復(fù)性的無(wú)意義的搬運(yùn)代碼而感到厭煩，在尋找對(duì)應(yīng)解決辦法的時(shí)候可是一點(diǎn)都沒(méi)偷懶，相反的，在尋求更快更好更方便的方法的時(shí)候，我逐漸找回了當(dāng)初敲代碼的樂(lè)趣。