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 相关文章推荐
使用prototype.js 的时候应该特别注意的几个问题.
Apr 12 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
快速搭建React的环境步骤详解
Nov 06 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
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转换IP地址到真实地址的方法详解
2013/06/09 PHP
php生成图片验证码
2015/06/09 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
js window.onload 加载多个函数的方法
2009/11/02 Javascript
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
获取url中用&隔开的参数实例(分享)
2017/05/28 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
javascriptvoid(0)含义以及与"#"的区别讲解
2019/01/19 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
Python模块future用法原理详解
2020/01/20 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
什么是.net
2015/08/03 面试题
女子职高个人自荐书
2014/02/01 职场文书
初级党校心得体会
2014/09/11 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server
vue打包时去掉所有的console.log
2022/04/10 Vue.js