循序漸進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]) })
除了一些自己自定義過濾器外,建議可以使用一些第三方的常用過濾器,如下所示
// 匯入第三方常見過濾器,介紹參考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 前端應用系統模組的介面參考下。
&n