JS面向切面（AOP）

最新推荐文章于 2023-06-21 11:44:36 发布

炎魔之王

最新推荐文章于 2023-06-21 11:44:36 发布

阅读量986

点赞数

CC 4.0 BY-SA版权

文章标签： javascript es6 vue.js node.js reactjs

本文链接：https://blog.csdn.net/qq_41636947/article/details/106696460

本文介绍了一种利用ES6的Proxy特性实现面向切面编程(AOP)的方法。通过自定义的aop类，能够在函数调用前和后执行特定的逻辑，如日志记录。该方法提供了一种灵活的手段，用于在不修改原始函数代码的情况下增加额外的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天看了看切面

突发奇想，应该能使用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 ()=>{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