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 在各个浏览器中执行的耐性
Apr 06 Javascript
myeclipse安装jQuery插件的方法
Mar 29 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
vue router 配置路由的方法
Jul 26 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 Javascript
Vue 一键清空表单的实现方法
Feb 07 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 Javascript
vue实现员工信息录入功能
Jun 11 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 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
Yii2分页的使用及其扩展方法详解
2016/05/23 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
newxtree.js代码
2007/03/13 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
Python如何合并多个字典或映射
2020/07/24 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
shallow copy和deep copy的区别
2016/05/09 面试题
护理自荐信
2013/10/22 职场文书
电气工程师岗位职责
2014/01/01 职场文书
写给老婆的检讨书
2014/02/21 职场文书
小学开学典礼主持词
2014/03/19 职场文书
餐厅筹备计划书
2014/04/25 职场文书
销售员试用期自我评价
2014/09/15 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
主题班会开场白
2015/06/01 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server