javascript AOP的实现
2009-08-08 08:53
351 查看
loadEvent(function(){
guarder();
})
以前学习java的Spring框架时,这是个很强大的东西,用于实现调用者和被调用者之间的解耦。虽然在JS中也提供了call与apply动态改变调用者,但在复杂的UI组件中,这是远远不够了。前段时间也在无忧中看到一个类似的需求,说要“如何继承自己”,辞不达意,乱七八糟,但回贴都是精华,让我见识到AOP在JS的运用,逐研究了下这个东西。
以下是我最初的实现,它取用的方式是在某个实例方法的前面或后面织入通知函数。
<script type="text/javascript">
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();
}
</script>
运行代码
非常糟糕!它马上就执行了,而不等到我们调用t.say()时执行!改变一下思路,把通知函数织入实例方法中,然后在这个被织入的方法中执行原来的逻辑与新织入的逻辑!
<script type="text/javascript">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("司徒正美"); }</script>
运行代码
发现不能传入参数,我们可以用apply来绑定参数。之所以选择apply,是因为它比call更灵活。
<script type="text/javascript">
function Person(){
this.say = function(name,lang){
alert("我的名字叫做"+name+",专注于"+lang+"……");
}
}
Aspects = function(){};
Aspects.prototype={
before:function(target,method,advice){
var original = target[method];
target[method] = function(){
(advice)();
original.apply(target, arguments);
}
return target
},
after:function(target,method,advice){
var original = target[method];
target[method] = function(){
original.apply(target, arguments);
(advice)();
}
return target
},
around:function(target,method,advice){
var original = target[method];
target[method] = function(){
(advice)();
original.apply(target, arguments);
(advice)();
}
return target
}
}
window.onload = function(){
var t = new Person;
var a = new Aspects;
t = a.before(t,"say",function(){alert("请你介绍一下自己!")});
alert("===========================")
t.say("司徒正美","javascript");
}
</script>
运行代码
最后放出一个现实点的例子吧,看看你能联想到什么?!
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script type="text/javascript">
function voice(){
alert("救命啊!");
}
Aspects = function(){};
Aspects.prototype={
before:function(target,method,advice){
var original = target[method];
target[method] = function(){
(advice)();
original.apply(target, arguments);
}
return target
},
after:function(target,method,advice){
var original = target[method];
target[method] = function(){
original.apply(target, arguments);
(advice)();
}
return target
},
around:function(target,method,advice){
var original = target[method];
target[method] = function(){
(advice)();
original.apply(target, arguments);
(advice)();
}
return target
}
}
window.onload = function(){
var bn = document.getElementById("bn");
var a = new Aspects;
a.after(bn,"onclick",function(){alert("HELP!HELP!")});
}
</script>
<title>非法修改button的onclick事件</title>
</head>
<body>
<input onclick="voice()" type="button" id="bn" value="动我就叫人来">
</body>
</html>
运行代码
想到了吗?联想一下我们博客园,可能以这个作例子有点不妥……它为了安全在我们点击提交表单时,都会对我们输入的内容进行正则替换,把一些危险的代码过滤掉,或换成>、<之类不能运行的编码。如果我们用AOP hack一下这个提交按钮,在博客园替换完后我们再替换回去,就可以做出一些不为人齿的事来,当然不希望大家这样做……我们应该用到正当的途径上,如Ext就大量利用AOP来增强组件的功能了。又譬如,我们编写了一个复杂的Grid控件,但无法事先预计哪些方法需要触发事件。这种情况下,你可以直接拦截控件的某些方法来模拟事件处理。另,在权限验证、内容传输、错误处理、调试、记录跟踪等方面,AOP都有一番作用,我们应该好好掌握这一设计模式,毕竟它被称之为OOP的延伸与补充。
guarder();
})
以前学习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(); }
<script type="text/javascript">
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();
}
</script>
运行代码
非常糟糕!它马上就执行了,而不等到我们调用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("司徒正美"); }
<script type="text/javascript">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("司徒正美"); }</script>
运行代码
发现不能传入参数,我们可以用apply来绑定参数。之所以选择apply,是因为它比call更灵活。
/******************略**********************/ before:function(target,method,advice){ var original = target[method]; target[method] = function(){ (advice)(); original.apply(target, arguments); } return target }, /******************略**********************/
<script type="text/javascript">
function Person(){
this.say = function(name,lang){
alert("我的名字叫做"+name+",专注于"+lang+"……");
}
}
Aspects = function(){};
Aspects.prototype={
before:function(target,method,advice){
var original = target[method];
target[method] = function(){
(advice)();
original.apply(target, arguments);
}
return target
},
after:function(target,method,advice){
var original = target[method];
target[method] = function(){
original.apply(target, arguments);
(advice)();
}
return target
},
around:function(target,method,advice){
var original = target[method];
target[method] = function(){
(advice)();
original.apply(target, arguments);
(advice)();
}
return target
}
}
window.onload = function(){
var t = new Person;
var a = new Aspects;
t = a.before(t,"say",function(){alert("请你介绍一下自己!")});
alert("===========================")
t.say("司徒正美","javascript");
}
</script>
运行代码
最后放出一个现实点的例子吧,看看你能联想到什么?!
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script type="text/javascript">
function voice(){
alert("救命啊!");
}
Aspects = function(){};
Aspects.prototype={
before:function(target,method,advice){
var original = target[method];
target[method] = function(){
(advice)();
original.apply(target, arguments);
}
return target
},
after:function(target,method,advice){
var original = target[method];
target[method] = function(){
original.apply(target, arguments);
(advice)();
}
return target
},
around:function(target,method,advice){
var original = target[method];
target[method] = function(){
(advice)();
original.apply(target, arguments);
(advice)();
}
return target
}
}
window.onload = function(){
var bn = document.getElementById("bn");
var a = new Aspects;
a.after(bn,"onclick",function(){alert("HELP!HELP!")});
}
</script>
<title>非法修改button的onclick事件</title>
</head>
<body>
<input onclick="voice()" type="button" id="bn" value="动我就叫人来">
</body>
</html>
运行代码
想到了吗?联想一下我们博客园,可能以这个作例子有点不妥……它为了安全在我们点击提交表单时,都会对我们输入的内容进行正则替换,把一些危险的代码过滤掉,或换成>、<之类不能运行的编码。如果我们用AOP hack一下这个提交按钮,在博客园替换完后我们再替换回去,就可以做出一些不为人齿的事来,当然不希望大家这样做……我们应该用到正当的途径上,如Ext就大量利用AOP来增强组件的功能了。又譬如,我们编写了一个复杂的Grid控件,但无法事先预计哪些方法需要触发事件。这种情况下,你可以直接拦截控件的某些方法来模拟事件处理。另,在权限验证、内容传输、错误处理、调试、记录跟踪等方面,AOP都有一番作用,我们应该好好掌握这一设计模式,毕竟它被称之为OOP的延伸与补充。
相关文章推荐
- [JavaScript] 你相信么,只需一个函数5行JS代码即可在Javascript中实现完整的AOP功能,
- javascript--aop实现
- JavaScript实现AOP详解(面向切面编程,装饰者模式)
- dojo的connect方法使用与源代码剖析(在JavaScript里实现类似AOP的效果)
- javascript AOP 实现ajax回调函数使用比较方便
- JavaScript:AOP实现
- Javascript如何实现AOP
- javascript实现AOP
- dojo的connect方法使用与源代码剖析(在JavaScript里实现类似AOP的效果)
- javascript AOP 实现,ajax回调函数使用比较方便
- 关于如何在javascript中实现AOP
- JavaScript 基于对象事件的 AOP 实现
- dojo的connect方法使用与源代码剖析(在JavaScript里实现类似AOP的效果)
- JavaScript中AOP的实现和日志记录
- 你相信么,只需一个函数5行JS代码即可在Javascript中实现完整的AOP功能
- dojo的connect方法使用与源代码剖析(在JavaScript里实现类似AOP的效果)
- JavaScript 高级函数实现AOP
- JavaScript实现二叉查找树