說(shuō)起來(lái), 面向切面編程(AOP)自從誕生之日起，一直都是計(jì)算機(jī)科學(xué)領(lǐng)域十分熱門的話題，但是很奇怪的是，在前端圈子里，探討AOP的文章似乎并不是多，而且多數(shù)拘泥在給出理論，然后實(shí)現(xiàn)個(gè)片段的定式）難免陷入了形而上學(xué)的尷尬境地，本文列舉了兩個(gè)生產(chǎn)環(huán)境的實(shí)際例子論述webpack和AOP預(yù)編譯處理的結(jié)合，意在拋磚引玉。當(dāng)然，筆者能力有限，如果有覺得不妥之處，還請(qǐng)大家積極的反饋出來(lái)， 共同進(jìn)步哈。

重要的概念

AOP： 面向切面編程，通過(guò)預(yù)編譯方式和運(yùn)行期動(dòng)態(tài)代理實(shí)現(xiàn)程序功能的統(tǒng)一維護(hù)的一種技術(shù)。

Joint point：表示在程序中明確定義的點(diǎn)，典型的包括方法調(diào)用，對(duì)類成員的訪問(wèn)以及異常處理程序塊的執(zhí)行等等，它自身還可以嵌套其它 joint point。

Advice：Advice 定義了在 pointcut 里面定義的程序點(diǎn)具體要做的操作，它通過(guò) before、after 和 around 來(lái)區(qū)別是在每個(gè) joint point 之前、之后還是代替執(zhí)行的代碼。

通過(guò)前面的定義，我們可以提煉出一句更簡(jiǎn)單的定義，利用靜/動(dòng)態(tài)的方式使代碼塊在何時(shí)/何地運(yùn)行。

性能統(tǒng)計(jì)

項(xiàng)目的背景是一個(gè)利用vue+webpack打造的多頁(yè)面應(yīng)用 （多入口點(diǎn)），她的結(jié)構(gòu)大概是這個(gè)樣子的

var baseConf = {// code hereentry: {index: 'src/index',list: 'src/list',detail: 'src/detail',// and so on ...},// code here}

然后以index入口點(diǎn)舉例，大概代碼為src/index/index.js

import Vue from 'vue'import App from './app'new Vue({el: '#app',render: h => h(App)})

期望引入一個(gè)vue插件，能夠自動(dòng)的監(jiān)控當(dāng)前頁(yè)面的性能，于是，代碼看起來(lái)像是這個(gè)樣子

import Vue from 'vue'Vue.use(performance) //性能統(tǒng)計(jì)import App from './app'new Vue({el: '#app',render: h => h(App)})

由于這種方式意味著每個(gè)入口點(diǎn)均需要進(jìn)行修改，(實(shí)際上這個(gè)項(xiàng)目的入口點(diǎn)超過(guò)30個(gè)，而且隨時(shí)可能繼續(xù)增加下去)簡(jiǎn)直就是一個(gè)體力活。所以，讓我們用AOP的思想來(lái)考慮一下如何處理這個(gè)問(wèn)題

首先觀察入口點(diǎn)邏輯

原：引入vue -> 引入app組件 -> 實(shí)例化vue組件

新：引入vue -> 應(yīng)用性能統(tǒng)計(jì)組件 -> 引入app組件 -> 實(shí)例化vue組件

套用到我們的定義上，可以輕松的得到

Joint point(何處) 引入vue

advice(何時(shí)) 之后

這樣理論上的東西似乎閉著眼睛都可以推論出來(lái)，但是如何將這樣的步驟替換到每一個(gè)入口點(diǎn)就是一個(gè)大問(wèn)題了orz。幸運(yùn)的是這是一個(gè)import，而翻閱webpack的文檔恰好有著這樣一個(gè)神奇的屬性--alias

resolve: {alias: {'vue$': resolve('src/vueHook.js')}

src/vueHook.js

import vue from 'vue/dist/vue.common'vue.use(performance)export default vue