什麼是AOP？

AOP(面向切面程式設計)的主要作用是把一些跟核心業務邏輯模組無關的功能抽離出來，這些跟業務邏輯無關的功能通常包括日誌統計、安全控制、異常處理等。把這些功能抽離出來之後， 再通過“動態織入”的方式摻入業務邏輯模組中。

AOP能給我們帶來什麼好處？

AOP的好處首先是可以保持業務邏輯模組的純淨和高內聚性，其次是可以很方便地複用日誌統計等功能模組。

JavaScript實現AOP的思路？

通常，在JavaScript中實現 AOP，都是指把一個函式“動態織入”到另外一個函式之中，具體的實現技術有很多，下面我用擴充套件 Function.prototype 來做到這一點。

主要就是兩個函式，在Function的原型上加上before與after，作用就是字面的意思，在函式的前面或後面執行，相當於無侵入

//Aop構造器
function Aop(options){
    this.options = options
}
//業務方法執行前鉤子
Aop.prototype.before = function(cb){
    cb.apply(this)
}
//業務方法執行後鉤子
Aop.prototype.after = function(cb){
    cb.apply(this)
}
//業務方法執行器
Aop.prototype.execute = function(beforeCb,runner,afterCb){
    this.before(beforeCb)
    runner.apply(this)
    this.after(afterCb)
}

var
 
 aop = new Aop({
    afterInfo:'執行後',
    runnerInfo:'執行中',
    beforeInfo:'執行前'
})

var beforeCb = function(){
    console.log(this.options.beforeInfo)
}
var afterCb = function(){
    console.log(this.options.afterInfo)
}
var runnerCb = function(){
    console.log(this.options.runnerInfo)
}

aop.execute(beforeCb,runnerCb,afterCb)
 

廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com

應用的一些例子：

1. 為window.onload新增方法，防止window.onload被二次覆蓋
2. 無侵入統計某個函式的執行時間
3. 表單校驗
4. 統計埋點
5. 防止csrf攻擊