面向切面编程(aop)一个小实例

现在有一个test函数，test可能有异步操作，需要计算test消耗的时间

function test(){
    alert(2);
    return 'me test';
}

---

方法一：

在执行test之前计算一下时间，执行后计算一下时间，2个时间一减就行了，但是如果需要计算的函数太多，插入这些计算时间的方法，上线就要删除很麻烦和不安全

function test(){
    const start=new Date();
    alert(2);
    const end=new Date();
    console.log(end-start);
}

---

方法二：

利用面向切面编程的无侵入式的切入方法计算时间

步骤一

function test(){
    alert(2);
    return 'me test';
}
Function.prototype.before=function(fn){
    fn();
    var __self=this;
    __self.apply(__self,arguments);
}
Function.prototype.after=function(fn){
    var __self=this;
    __self.apply(__self,arguments);
    fn();
}
test.before(function(){
    alert(1);
});
test.after(function(){
    alert(3);
});

此时会发现test()执行了2遍，这时是不是将计算之后的时间然后除以2就行了呢，这个不完美，而且2个异步请求的话返回的时间与后台有点关系了，万一请求2个时间是1+1>2呢。

步骤二

这个时候就只能用闭包了，执行before之后把返回一个函数，这个函数继承了Function原型链上的方法有了after方法，然后调用after方法

function test() {
    alert(2);
    return 'me test';
}
Function.prototype.before = function(fn) {
    var __self = this;
    return function() {
        fn.apply(__self,arguments);//执行fn
        return __self.apply(__self, arguments); //执行self,并返回test函数
    }
}
Function.prototype.after = function(fn) {
    var __self = this;  //这个this是before返回的函数
    __self.apply(__self, arguments); 
    fn.apply(__self,arguments);//执行fn
}
test.before(function() {
    alert(1);
}).after(function(){
    alert(3);
})();

alt aop步骤二

步骤三

最后报错了发现是after也需要返回值，并且如果先调用after方法再调用before方法，这个时候after就需要返回一个函数了

function test() {
    alert(2);
    return 'me test';
}
Function.prototype.before = function(fn) {
    var __self = this;
    return function() {
        fn.apply(__self,arguments);//执行fn
        return __self.apply(__self, arguments); //执行self,并返回test函数
    }
}
Function.prototype.after = function(fn) {
    var __self = this;  //这个this是before返回的函数
    return function(){
        __self.apply(__self, arguments); 
        fn.apply(__self,arguments);//执行fn
    }
}
test.after(function(){
    alert(3);
}).before(function() {
    alert(1);
})();

步骤四
发现 return 'me test',没返回来，所以最后需要在after里面返回test的值

function test() {
    alert(2);
    return 'me test';
}
Function.prototype.before = function(fn) {
    var __self = this;
    return function() {
        fn.apply(__self,arguments);//执行fn
        return __self.apply(__self, arguments); //执行self,并返回test函数
    }
}
Function.prototype.after = function(fn) {
    var __self = this;  //这个this是before返回的函数
    return function(){
        const result=__self.apply(__self, arguments); 
        fn.apply(__self,arguments);//执行fn
        return result;
    }
}
test.after(function(){
    alert(3);
}).before(function() {
    alert(1);
})();

步骤五
如果before执行的时候就是报错，这个时候需要容错处理，下面的都不执行了

function test() {
    alert(2);
    return 'me test';
}
Function.prototype.before = function(fn) {
    var __self = this;
    return function() {
        if(fn.apply(__self,arguments)==false){
            return false;
        }
        fn.apply(__self,arguments);//执行fn
        return __self.apply(__self, arguments); //执行self,并返回test函数
    }
}
Function.prototype.after = function(fn) {
    var __self = this;  //这个this是before返回的函数
    return function(){
        const result=__self.apply(__self, arguments); 
        fn.apply(__self,arguments);//执行fn
        return result;
    }
}
test.after(function(){
    alert(3);
}).before(function() {
    alert(1);
    return false;
})();

成功的代码就是把步骤五before回调的return false去掉

效果如下：