今天看了看切面,不是太懂
但是突发奇想,应该能使用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