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实现页面定时跳转总结篇
Sep 21 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
简单实现JS计算器功能
Dec 21 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
微信小程序实现简单评论功能
Nov 28 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
基于iview的router常用控制方式
May 30 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
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
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
javascript 写类方式之五
2009/07/05 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
python实现在windows下操作word的方法
2015/04/28 Python
Djang中静态文件配置方法
2015/07/30 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
Python中交换两个元素的实现方法
2018/06/29 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
Python pip配置国内源的方法
2020/02/14 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
关于python中remove的一些坑小结
2021/01/04 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
网管求职信
2014/03/03 职场文书
职业生涯规划书前言
2014/04/15 职场文书
红头文件任命书范本
2014/06/05 职场文书
五五普法心得体会
2014/09/04 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
小英雄雨来观后感
2015/06/09 职场文书