在我們開發程式碼的時候，一般都喜歡進行一定程度的重構，以達到簡化程式碼、關注點分離、提高程式碼可讀性等等方面的考慮，本篇隨筆介紹在VUE+Element 前端應用開發過程中，實現簡化main.js處理程式碼，抽取過濾器、全域性介面函式、元件註冊等處理邏輯到不同的檔案中做法。

1、main.js處理邏輯

我們知道Vue的前端應用，main.js函式裡面承載的邏輯內容很多，往往涉及到一些常用過濾器函式、全域性介面函式、元件註冊等常規的處理過程，在我們應用越來愈大，引入的控制元件越來越多的時候，往往需要很多程式碼來實現這些功能，但是單個檔案程式碼行數到達一定程度的時候，可讀性就降低了，而且可維護性就複雜了，於是我們往往需要對程式碼進行重構處理，本篇介紹的處理就是實現關注點分離，把不同的邏輯抽離到不同的檔案裡面，這樣大大減少了main.js的程式碼行數，並提高main.js的可維護性。

main.js處理邏輯的內容大概可以分為幾個重要的部分，如下圖所示，同時這個也是我們分離邏輯程式碼的思路。

2、全域性函式掛載

使用vue 時，有時需要設定公共的函式，便於在所有元件中呼叫或者在元件的生命週期中都可呼叫，這便需要自定義全域性函式。

在main.js中寫入函式

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

那麼，在所有元件裡都可呼叫函式

this.getToken();

裡面我們把常規經常用到的一些JS處理函式，以及一些介面資訊處理函式，通過全域性掛載的方式，使得它們在任何模組頁面都可以使用。

我們把這些處理放在一個單獨的檔案，如prototype.js裡面，如下所示。

然後在main.js函式裡面，使用如下程式碼加入即可。

// 匯入一些全域性函式
import prototype from './prototype'
Vue.use(prototype)

這樣我們就可以在任何頁面、模組裡面使用我們全域性的函數了。

或者

3、全域性過濾器掛載

和全域性函式做法類似，也可以用相同的方法掛載全域性過濾器，過濾器處理一般用於對介面部分的內容進行格式化或者轉義的操作。

我們可以自定義一些常用的過濾器放在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

引入後，直接在介面中使用即可，如下使用程式碼。

或者

是不是覺得很方便。

4、常見元件註冊

元件的註冊，分為全域性main.js函式中註冊，和頁面元件中註冊，一般我們可以把常見的元件放置到全域性中註冊，這樣避免每個頁面都重複填寫註冊元件的程式碼，省卻很多功夫。

例如，我們可以建立一個plugin.js的檔案，用來分離全域性註冊註冊的處理過程，在其中引入我們常用的一些元件，並進行註冊處理。

有了這些檔案的定義處理，我們在main.js裡面，進行簡單的匯入使用即可。

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

最後這些就是實現了我們常規的幾個過程的處理，包括抽取過濾器、全域性介面函式、元件註冊等處理邏輯到不同的檔案中，並簡化全域性掛載的操作。

擷取幾個VUE+Element 前端應用系統模組的介面參考下。