javascript AOP的实现javascript

以前学习java的spring框架时,这是个很强大的东西,用于实现调用者和被调用者之间的解耦。虽然在js中也提供了call与apply动态改变调用者,但在复杂的ui组件中,这是远远不够了。前段时间也在无忧中看到一个类似的需求,说要“如何继承自己”,辞不达意,乱七八糟,但回贴都是精华,让我见识到aop在js的运用,逐研究了下这个东西。

以下是我最初的实现,它取用的方式是在某个实例方法的前面或后面织入通知函数。

// pointcut: 织入点对象 ,target:被织入的对象 ,method:被织入的方法名字 ,advice: 通知函数

function person(){

this.say =function(){

alert("高谈阔论!");

}

this.cry =function(){

alert("鬼哭神嚎!");

}

this.round =function(){

alert("天地无用!");

}

}

aspects = function(){};

aspects.prototype={

before:function(target,method,advice){

(advice)();

for(var i in target){

if(i == method){

target[i]();

};

};

},

after:function(target,method,advice){

for(var i in target){

if(i == method){

target[i]();

};

};

(advice)();

},

around:function(target,method,advice){

(advice)();

for(var i in target){

if(i == method){

target[i]();

};

};

(advice)();

}

}

window.onload = function(){

var t = new person;

var a = new aspects;

a.before(t,"say",function(){alert("一马当先")})

a.after(t,"cry",function(){alert("事后孔明")})

a.around(t, "round", function(){alert("十面埋伏")})

alert("===========================");

t.say();

}

运行代码

非常糟糕!它马上就执行了,而不等到我们调用t.say()时执行!改变一下思路,把通知函数织入实例方法中,然后在这个被织入的方法中执行原来的逻辑与新织入的逻辑!

function person(){

this.say =function(name){

alert("我的名字叫做"+name+"……");

}

}

aspects = function(){};

aspects.prototype={

before:function(target,method,advice){

var original= target[method];

target[method] = function(){

(advice)();

original();

}

return target

},

after:function(target,method,advice){

var original= target[method];

target[method] = function(){

original();

(advice)();

}

return target

},

around:function(target,method,advice){

var original= target[method];

target[method] = function(){

(advice)();

original();

(advice)();

}

return target

}

}

window.onload = function(){

var t = new person;

var a = new aspects;

t = a.before(t,"say",function(){alert("请你介绍一下自己!")});

alert("===========================")

t.say("司徒正美");

}

运行代码

发现不能传入参数,我们可以用apply来绑定参数。之所以选择apply,是因为它比call更灵活。

/******************略**********************/

before:function(target,method,advice){

var original= target[method];

target[method] = function(){

(advice)();

original.apply(target, arguments);

}

return target

},

/******************略**********************/

运行代码

最后放出一个现实点的例子吧,看看你能联想到什么?!

运行代码

想到了吗?联想一下我们博客园,可能以这个作例子有点不妥……它为了安全在我们点击提交表单时,都会对我们输入的内容进行正则替换,把一些危险的代码过滤掉,或换成>、<之类不能运行的编码。如果我们用aop hack一下这个提交按钮,在博客园替换完后我们再替换回去,就可以做出一些不为人齿的事来,当然不希望大家这样做……我们应该用到正当的途径上,如ext就大量利用aop来增强组件的功能了。又譬如,我们编写了一个复杂的grid控件,但无法事先预计哪些方法需要触发事件。这种情况下,你可以直接拦截控件的某些方法来模拟事件处理。另,在权限验证、内容传输、错误处理、调试、记录跟踪等方面,aop都有一番作用,我们应该好好掌握这一设计模式,毕竟它被称之为oop的延伸与补充。

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/