在我們開發代碼的時候，一般都喜歡進行一定程度的重構，以達到簡化代碼、關注點分離、提高代碼可讀性等等方面的考慮，本篇隨筆介紹在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 前端應用系統模塊的界面參考下，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/192521.html
標籤：其他
上一篇：循序漸進VUE+Element 前端應用開發(22）--- 簡化main.js處理代碼，抽取過濾器、全域界面函式、組件注冊等處理邏輯到不同的檔案中
下一篇：css盒子模型圖解