JS面向切面（AOP）

今天看了看切面，不是太懂

但是突發奇想，應該能使用ES6的proxy來寫一個控制在函數Before和after執行其他內容的小玩具

class aop {
        constructor(obj, beforeFork, afterFork) {
            return new Proxy(obj, {
                get: function (target, propKey, receiver) {
                    for (let key in beforeFork) {
                        if (Object.prototype.toString.call(target[propKey]) == "[object " + key + "]") {
                            beforeFork[key]?.(target[propKey]);
                        }
                    }
                    beforeFork[propKey]?.(target[propKey]);
                    //before

                    var re = Reflect.get(target, propKey, receiver);

                    for (let key in afterFork) {
                        if (Object.prototype.toString.call(target[propKey]) == "[object " + key + "]") {
                            afterFork[key]?.(target[propKey]);
                        }
                    }
                    afterFork[propKey]?.(target[propKey]);
                    //after

                    return re;
                },
                set: function (target, propKey, value, receiver) {
                    return Reflect.set(target, propKey, value, receiver);
                }
            });
        }
    }

定義了aop之後，創建實例

可以監控object對應的類別，比如get的對象爲Function類別時，可以定義都會調用的before函數

let pro = new aop(
        {
            transfer:function(){
                
            }
        },// 函數本身
        {
            Function:function(item){
                console.log("%c"+item.name+" 被調用了，已經記錄",'color:#0f0;')
            },
            transfer:function(item){
                console.log(item.name+"  before")
            }
        },// before
        {
            transfer:function(item){
                console.log(item.name+"  after")
            }
        }// after
    )

 通過aop的構造函數的三個對象參數，實現了分層

第一個Object是函數本身

第二個Object是函數Before時運行的

第三個Object是函數After時運行的

 

調用後控制檯輸出如下

pro.transfer()//調用
//transfer 被調用了，已經記錄
//transfer  before
//transfer  after

 之後想要思考一下怎麼方便的批量添加before 和 after