yui3的AOP(面向切面编程)和OOP(面向对象编程)


Posted in Javascript onMay 01, 2015

首先请把手放胸前成沉思状:我上了生活,还是被生活上了自己?

没想出答案把,恩,可以读下文了。从语义角度讲,同一事物的不同表述可以反映人的主观视角的不同,从哲学角度将,世界观影响方法论,我们看事物的角度不同,有时会得出截然相悖的结论,从而会影响我们的做事方式和行为准则,现实生活如此,在丰富多彩的编程语言中更是如此,编程模式充满了对现实世界的各种模拟,包括是面向过程,面向对象,还有面向切面。我们大概已经非常熟悉面向过程和面向对象,切面的英文是Aspects(有时译作方面,我感觉用切面更能贴切的表达Aspects的内涵)。

有关AOP的链接看这里:
http://en.wikipedia.org/wiki/Aspect-ori ... rogramming

YUI3中的自定义事件实现了AOP
http://developer.yahoo.com/yui/3/event

什么是切面?举个简单的例子,每天我们上下班挤地铁坐公交和女朋友约会上网吧打游戏去电影院看电影……,一天要做很多事情,每个人都是一个Object,我们做的每件事情都是这个Object的方法,比如,

甲.上班();
乙.坐地铁();
丙.看电影();

其实可以换个角度看,公司需要员工来上班,轨道交通需要每个人去乘坐,电影院给每个人放电影。这样就变成了:

公司.need(甲)
地铁.carry(乙);
电影院.放电影给(丙);

这样看来,不仅甲乙丙每个个体都是一个对象,公司、地铁、电影院也是对象,这种抽象就是传统的面向切面。而在js编程中,程序一般都不大,所以大概不会到达非要使用切面级别的抽象的程度。但其基于事件驱动的原理则很容易让人联想到AOP,上个例子在js中就可能是:

someone.dosth();//OOPobject.fire('event',someone);//AOP

如果脱离上下文来看,上面的代码依然语义牵强。只是很多js框架把切面编程的边缘特性封装成方法,对人造成了很多误导。比如事件的绑定。当函数foo执行结束的时候执行myfoo,在不修改foo的基础上来添加对foo的监听,

var foo = function(){
  //some code here
};

jQuery.aop.after(foo,function(){
  //added code here
});

jquery和prototype都实现了这种简单的函数绑定。jquery的aop在这里。但在yui3中,AOP则被提升至自定义事件的一种内在机制,在源码中随处可见。这在理解yui3的代码重用机制是很有帮助的。也正是得益于这种抽象使得yui3的自定义事件异常强大和灵活。和OOP相比,AOP的优点是非侵入式的“装饰”,但在多数情况下,并不推荐首先使用AOP来写代码。来看这个例子:每个人的生活习惯很类似,这里用四种行为为例,上学,放学,泡妞,打游戏,甲的生活规律很正常,每种事件发生的概率是一样的,乙是个贪玩的小孩,只会去网吧打游戏和泡妞,丙是一个爱学习的小孩,从不泡妞和打游戏,丁是一个经历超级旺盛的另类,每次都是同时干两件事情,上学的时候泡妞,放学的时候打游戏。这里用div代表每个人,用onmouseover来触发每个事件。

用OOP的方法那么程序结构应该是这样:

yui3的AOP(面向切面编程)和OOP(面向对象编程)

代码在这里:yui_oop.htm

这里的"古怪人"继承自"正常人"的时候,是通过代码重写的方法来达到重载的目的,这里明显违反了非侵入性原则。再来看AOP的思路:

yui3的AOP(面向切面编程)和OOP(面向对象编程)

代码在这里:yui_aop.htm

这里抽象出了事件发布工厂,用来专门处理事件的发布,由其生成的生活轨迹对象对每个人进行监听,捕捉每个人的各种行为。工厂在生成‘古怪人生活轨迹'的时候使用了上文提到的函数的监听绑定,这种绑定是非侵入性的,可以很好的和工厂解耦。从这个例子中比较OOP和AOP,两者复杂度差不多,但AOP思路更开阔,代码也更灵活一些。

Javascript 相关文章推荐
javascript 循环读取JSON数据的代码
Jul 17 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
js实现图片上传即时显示效果
Sep 30 Javascript
微信小程序静默登录的实现代码
Jan 08 Javascript
使用AOP改善javascript代码
May 01 #Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 #Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 #Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 #Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 #Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 #Javascript
jquery实现键盘左右翻页特效
Apr 30 #Javascript
You might like
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
php中使用redis队列操作实例代码
2013/02/07 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
PHP生成plist数据的方法
2015/06/16 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
详解vuex之store源码简单解析
2019/06/13 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
python入门教程之识别验证码
2017/03/04 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
Python如何实现定时器功能
2020/05/28 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
python 装饰器的使用示例
2020/10/10 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
html5 canvas 使用示例
2010/10/22 HTML / CSS
实习自我鉴定范文
2013/10/30 职场文书
注塑工厂厂长岗位职责
2013/12/02 职场文书
安全教育实施方案
2014/03/02 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
2014年中秋寄语
2014/08/11 职场文书
中学生打架检讨书
2014/10/13 职场文书
房产公证书格式
2015/01/26 职场文书
升职自荐书
2019/05/09 职场文书