循序漸進VUE+Element 前端應用開發(22）--- 簡化main.js處理程式碼，抽取過濾器、全局介面函數、組件註冊等處理邏輯到不同的文件中

在我們開發程式碼的時候，一般都喜歡進行一定程度的重構，以達到簡化程式碼、關注點分離、提高程式碼可讀性等等方面的考慮，本篇隨筆介紹在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])
})

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

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

這個裡面的過濾器很多比較常見，介紹參考//github.com/freearhey/vue2-filters

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

 或者

 是不是覺得很方便。

 

4、常見組件註冊

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

例如，我們可以創建一個plugin.js的文件，用來分離全局註冊註冊的處理過程，在其中引入我們常用的一些組件，並進行註冊處理。

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

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

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

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

 

 

Tags:

VirMach 便宜 VPS