按部就班VUE+Element 前端應用開發(22）--- 簡化main.js處理代碼，抽取過濾器、全局界面函數、組件註冊等處理邏輯到不一樣的文件中

在咱們開發代碼的時候，通常都喜歡進行必定程度的重構，以達到簡化代碼、關注點分離、提升代碼可讀性等等方面的考慮，本篇隨筆介紹在VUE+Element 前端應用開發過程當中，實現簡化main.js處理代碼，抽取過濾器、全局界面函數、組件註冊等處理邏輯到不一樣的文件中作法。

一、main.js處理邏輯

咱們知道Vue的前端應用，main.js函數裏面承載的邏輯內容不少，每每涉及到一些經常使用過濾器函數、全局界面函數、組件註冊等常規的處理過程，在咱們應用越來愈大，引入的控件愈來愈多的時候，每每須要不少代碼來實現這些功能，可是單個文件代碼行數到達必定程度的時候，可讀性就下降了，並且可維護性就複雜了，因而咱們每每須要對代碼進行重構處理，本篇介紹的處理就是實現關注點分離，把不一樣的邏輯抽離到不一樣的文件裏面，這樣大大減小了main.js的代碼行數，並提升main.js的可維護性。

main.js處理邏輯的內容大概能夠分爲幾個重要的部分，以下圖所示，同時這個也是咱們分離邏輯代碼的思路。

 

二、全局函數掛載

使用vue 時，有時須要設置公共的函數，便於在全部組件中調用或者在組件的生命週期中均可調用，這便須要自定義全局函數。

在main.js中寫入函數

Vue.prototype.getToken = function (){
  ...
}

那麼，在全部組件裏均可調用函數

this.getToken();

裏面咱們把常規常常用到的一些JS處理函數，以及一些界面信息處理函數，經過全局掛載的方式，使得它們在任何模塊頁面均可以使用。

咱們把這些處理放在一個單獨的文件，如prototype.js裏面，以下所示。

 而後在main.js函數裏面，使用以下代碼加入便可。

// 導入一些全局函數
import prototype from './prototype'
Vue.use(prototype)

這樣咱們就能夠在任何頁面、模塊裏面使用咱們全局的函數了。

或者

 

三、全局過濾器掛載

和全局函數作法相似，也能夠用相同的方法掛載全局過濾器，過濾器處理通常用於對界面部分的內容進行格式化或者轉義的操做。

咱們能夠自定義一些經常使用的過濾器放在filter/index.js文件裏面，以下所示。

裏面放置一些常見的js函數處理，以下所示。

export function uppercaseFirst(string) {
  return string.charAt(0).toUpperCase() + string.slice(1)
}

而後咱們在main.js裏面引入這個全局過濾器便可。

// 導入自定義全局過濾器
import * as filters from './filters'
// 註冊全局過濾器
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

除了一些本身自定義過濾器外，建議可使用一些第三方的經常使用過濾器，以下所示

// 導入第三方常見過濾器，介紹參考https://github.com/freearhey/vue2-filters
import Vue2Filters from 'vue2-filters'
Vue.use(Vue2Filters)

這個裏面的過濾器不少比較常見，介紹參考https://github.com/freearhey/vue2-filters

 引入後，直接在界面中使用便可，以下使用代碼。

 或者

 是否是以爲很方便。

 

四、常見組件註冊

組件的註冊，分爲全局main.js函數中註冊，和頁面組件中註冊，通常咱們能夠把常見的組件放置到全局中註冊，這樣避免每一個頁面都重複填寫註冊組件的代碼，省卻不少功夫。

例如，咱們能夠建立一個plugin.js的文件，用來分離全局註冊註冊的處理過程，在其中引入咱們經常使用的一些組件，並進行註冊處理。

有了這些文件的定義處理，咱們在main.js裏面，進行簡單的導入使用便可。

// 導入常見的組件，進行註冊
import common from './components/Common/plugin'
Vue.use(common)

最後這些就是實現了咱們常規的幾個過程的處理，包括抽取過濾器、全局界面函數、組件註冊等處理邏輯到不一樣的文件中，並簡化全局掛載的操做。

截取幾個VUE+Element 前端應用系統模塊的界面參考下。