Javascript aop(面向切面编程)之around(环绕)分析


Posted in Javascript onMay 01, 2015

Aop又叫面向切面编程,其中“通知”是切面的具体实现,分为before(前置通知)、after(后置通知)、around(环绕通知),用过spring的同学肯定对它非常熟悉,而在js中,AOP是一个被严重忽视的技术点。但是利用aop可以有效的改善js代码逻辑,比如前端框架dojo和yui3中AOP则被提升至自定义事件的一种内在机制,在源码中随处可见。得益于这种抽象使得dojo的自定义事件异常强大和灵活。dojo中aop的实现在dojo/aspect模块中,主要有三个方法:before、after、around,本文会带领大家一步步实现around方法,后续文章将会深入解析dojo/aspect模块的结构体系。

js要实现环绕通知,最简单也最应被想到的就是利用callback(回调)

advice = function(originalFunc){
 console.log("before function");
 originalFunc();
 console.log("after function");
}
var obj = {
 foo: function(){
 console.log('foo');
 }
}
advice(obj.foo)

结果:

before function
foo
after function

哈哈,太简单了,是不是可以回去睡觉了。。。。

可是,是不是有点太粗糙了。。。。说好的环绕呢。。。。至少下次调用obj.foo也应该是这个结果,而不是一个干巴巴的“foo”;为此我我们需要在改动一下,利用一下闭包

advice = function(originalFunc){
 return function() {
 console.log("before function");
 originalFunc();
 console.log("after function");
 }
}
var obj = {
 foo: function(){
 console.log(this.name);
 },
 name: "obj"
}
obj.foo = advice(obj.foo)
obj.foo()

 输出:

before function

after function

看起来达到了环绕的效果,but说好的name哪去了。。。。

在advice返回的闭包中我们还要处理作用域问题

advice = function(originalFunc){
 return function() {
 console.log("before function");
 originalFunc();
 console.log("after function");
 }
}
var obj = {
 foo: function(){
 console.log(this.name);
 },
 name: "obj"
}

keepContext = function() {
 return obj['foo'].call(obj);
}

obj.foo = advice(keepContext);

看起来是利用call解决了作用域问题,我们运行一下看看:

Javascript aop(面向切面编程)之around(环绕)分析

卧槽,难道这就是传说中的死循环。。。。

看来还是得改变一下,借助一个中间变量消除死循环

advice = function(originalFunc){
 return function() {
 console.log("before function");
 originalFunc();
 console.log("after function");
 }
}
var obj = {
 foo: function(){
 console.log(this.name);
 },
 name: "obj"
}

var exist = obj.foo;

keepContext = function() {
 return exist.call(obj);
}

obj.foo = advice(keepContext);
obj.foo();

输出:

before function
obj
after function

哈哈,世界突然变得美好了。。。。
但是这一堆代码看起来是不是太low了,我们是不是要来点高大上的抽象,嗯,我也是这么想的

function around(obj, prop, advice){
 var exist = obj[prop];
 var advised = advice(function(){
 return exist.call(obj, arguments);
 });
 obj[prop] = advised;
}

advice = function(originalFunc){
 return function() {
 console.log("before function");
 originalFunc();
 console.log("after function");
 }
}
var obj = {
 foo: function(){
 console.log(this.name);
 },
 name: "obj"
}

around(obj, 'foo', advice);

obj.foo();

around方法将处理过程与具体对象解耦;advice只要按照如下格式来书写,就可以达到around的效果

advice = function(originalFunc){
 return function() {
 //before
 originalFunc();
 //after
 }
}

哈哈,瞬间高大上,狂拽酷炫掉渣天,有木有。。。。

那么问题来了:如果不小心多调用了一次around方法肿么办。。。。 额。。。。这是个问题 我们是不是应该让around返回一个句柄,里面有个remove方法,消除绑定,就像绑定/移除事件一样。

所为remove,就是让函数下次执行时不在执行对应的around方法,而仅仅运行originalFunc方法

function around(obj, prop, advice){
 var exist = obj[prop];
 var previous = function(){
 return exist.call(obj, arguments);
 };
 var advised = advice(previous);
 obj[prop] = advised;
 
 return {
 remove: function(){
 obj[prop] = exist;
 advice = null;
 previous = null;
 exist = null;
 obj = null;
 }
 }
}
var count = 1;
advice = function(originalFunc){
 var current = count++;
 return function() {
 console.log("before function " + current);
 originalFunc(arguments);
 console.log("after function " + current);
 }
}
var obj = {
 foo: function(arg){
 console.log(this.name + " and " + arg);
 },
 name: "obj"
}

h1 = around(obj, 'foo', advice);
h2 = around(obj, 'foo', advice);
obj.foo();
h1.remove();
obj.foo();
h2.remove();
obj.foo();

输出:

before function 2
before function 1
obj and [object Arguments]
after function 1
after function 2
obj and undefined
before function 1

Javascript aop(面向切面编程)之around(环绕)分析

这个。。不但结果有点乱。。。还报错了。。。。是可忍,叔不可忍,叔可忍,嫂不可忍!

啊,闭包。。。请赐予我力量吧!

function around(obj, prop, advice){
 var exist = obj[prop];
 var previous = function(){
 return exist.apply(obj, arguments);
 };
 var advised = advice(previous);
 obj[prop] = function(){
 //当调用remove后,advised为空
 //利用闭包的作用域链中可以访问到advised跟previous变量,根据advised是否为空可以来决定调用谁
 return advised ? advised.apply(obj, arguments) : previous.apply(obj, arguments);
 };
 
 return {
 remove: function(){
 //利用闭包的作用域链,在remove时将advised置空,这样执行过程中不会进入本次around
 //这几个不能删
 //obj[prop] = exist;
 advised = null;
 advice = null;
 //previous = null;
 //exist = null;
 //obj = null;
 }
 }
}
var count = 1;
advice = function(originalFunc){
 var current = count++;
 return function() {
 console.log("before function " + current);
 originalFunc.apply(this, arguments);
 console.log("after function " + current);
 }
}
var obj = {
 foo: function(arg){
 console.log(this.name + " and " + arg);
 },
 name: "obj"
}

h1 = around(obj, 'foo', advice);
h2 = around(obj, 'foo', advice);
obj.foo('hello world');
h1.remove();
obj.foo('hello world');
h2.remove();
obj.foo('hello world');

输出:

before function 2
before function 1
obj and hello world
after function 1
after function 2
before function 2
obj and hello world
after function 2
obj and hello world

打完,收功!

第一次通宵写博客也是醉了,两点钟听到隔壁fuck me,四点钟听到乌鸦啼鸣,还有一种不知道什么鸟,啾啾的叫,五点钟这个时候一堆鸟叫。。。。

参考文章:

Javascript 相关文章推荐
JavaScript CSS修改学习第二章 样式
Feb 19 Javascript
JQuery Easyui Tree的oncheck事件实现代码
May 28 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 #Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 #Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 #Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 #Javascript
jquery实现键盘左右翻页特效
Apr 30 #Javascript
jquery Validation表单验证使用详解
Sep 12 #Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 #Javascript
You might like
php模板原理讲解
2013/11/13 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
js实现图片360度旋转
2017/01/22 Javascript
js读取本地文件的实例
2017/12/22 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
Python中的rfind()方法使用详解
2015/05/19 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
招聘与培训专员岗位职责
2014/01/30 职场文书
党的作风建设心得体会
2014/10/22 职场文书
文明单位创建材料
2014/12/24 职场文书
离婚协议书样本
2015/01/26 职场文书