JavaScript面向切面编程入门

来源极客网学习视频

关键词Javascript AOP编程

例子1:

function test() {
    alert(2);
}
//理解,所谓的传入一个"回调",该怎样设计before函数
test.before(function(){
    alert(1);
});

//思路1:声明一个大Function然后在它的"原型链"上绑上一个before方法,代码如下
Function.prototype.before = function(fn){
    var __self = this;        //怎样拿到当前函数
    fn();
    __self.apply(this,arguments);
};

例子2: 为我们自定义的JavaScript的Function设计一"行为",如下例子,声明我们的一个test方法

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

要求实现如下效果,为test"赋予"一能力, 在test执行前,先执行我们的另外设计的一个function,比如叫  function before() ,并达到如下效果

test.before(function(){
    alert(1); 
})(); 

例子3:

function test() {
    alert(2);
}
//思路1:声明一个大Function然后在它的"原型链"上绑上一个before方法,代码如下
//思路2:实现在test()被调用的时候,我们定义的function被回调?  所以为function增加回调函数参数,第7行的fn
//思路3:怎样让before执行在test之前?
Function.prototype.before = function(fn){
    var __self = this;        //怎样拿到当前函数
    fn();
    return __self.apply(this,arguments);
};

Function.prototype.after = function(fn){
    //after先执行本身this, 再执行"回调"
    var __self = this;
    __self.apply(this, arguments);
    fn();
};
//阅读代码, 调用test的before()方法,并输入一个回调函数
test.before(function(){
    alert(1); //输入的回调函数是被"谁"调的,答,由before函数实现代码决定的
})
//理解: 1.所谓的传入一个"回调"; 2.下面的代码可以理解成,我们需要设计function test的after行为
test.after(function(){
    alert(3);
});
//注意点: 从第20行起开始执行, 默认函数test()被执行了2遍

例子4: 执行test前,先执行before(), 实际运行的效果先后打印1,2

Function.prototype.before = function(fn){
    var __self = this;
    return function(){
        fn.apply(__self,arguments);
        __self.apply(__self,arguments);
    }
};

解读:第4行表示先执行回调函数, 同时将调用者自身传入进去; 第5行表示执行调用者自身,同时将自己以及参数传入进去

在实际coding过程中发现将第4,第5行写成如下形式,执行效果一样,先后打印1,2

fn.apply();
__self.apply();

 进一步理解,再看下面的代码,其中 test() 方法同上

Function.prototype.before = function(fn){
    var __self = this;
    return function(){
        fn.apply(this,arguments);//理解JavaScript中所谓的"动态改变指针"的特性
        __self.apply(__self,arguments);//__self.apply(this,arguments);
    }
};

Function.prototype.after = function(fn){
    //after先执行本身this, 再执行"回调"
    var __self = this;
    return function(){
        __self.apply(__self, arguments);
        fn.apply(this,arguments);
    }    
};
//当完成上面的设计后,我们就可以将after"移"到before之后,代码如下
test.before(function(){
    alert(1); 
}).after(function(){
    alert(3); 
})(); 

将第5行__self改成this也是可以的,表示将调用者的"指针"传入进去
将第13行注释掉,则只打印3,
说明: test.before(function(){alert(1); })  被整个传入了 after() 方法中去了并且被执行了