使用AOP改善javascript代码


Posted in Javascript onMay 01, 2015

Aop又叫面向切面编程,用过spring的同学肯定对它非常熟悉,而在js中,AOP是一个被严重忽视的技术点,这篇就通过下面这几个小例子,来说说AOP在js中的妙用.

1, 防止window.onload被二次覆盖.
2,无侵入的统计代码.
3, 分离表单请求和校验.
4,给ajax请求动态添加参数.
5,职责链模式.
6, 组合代替继承.

先给出before和after这2个“切面”函数. 顾名思义,就是让一个函数在另一个函数之前或者之后执行,巧妙的是,before或者after都可以和当前的函数公用this和arguments, 这样一来供我们发挥的地方就多着了.

使用AOP改善javascript代码

处理window.onload被二次覆盖.

前段时间看到QQ群里有个人问问题,要改写window.onload, 怎么才能不把以前的window.onload函数覆盖掉.

最原始的方案肯定是直接在原来的window.onload里添上你的新代码.

使用AOP改善javascript代码

这样的坏处非常明显,需要去改动原有的函数, 是侵入性最强的一种做法.

另外一种稍微好点的方案是用中间变量保存以前的window.onload;

使用AOP改善javascript代码

这样一来,多了一个讨厌的中间变量__onload, 来管理它也要花费一些额外的成本.

试想一下这个场景,当人觉得天气冷,出门的时候很自然选择穿上一件貂皮大衣,而不是把自己的皮扯掉换成貂皮. 动态装饰的好处就体现出来了,完全不会侵入之前的函数.

使用AOP改善javascript代码

无侵入的统计代码

本身跟逻辑没有任何关联的统计代码要被硬插进函数里, 这点相信很多搞过上报的同学都很不爽. 比如下面这段代码, 用来统计一个创建1000个节点的函数在用户的电脑上要花费多少时间.

使用AOP改善javascript代码

用aop的方式,不再需要在函数内部做改动,先定义一个通用的包装器.

使用AOP改善javascript代码

只要一行代码,便能给任何函数都加上统计时间的功能.

使用AOP改善javascript代码

分离表单请求和校验

我们在提交表单之前经常会做一些校验工作,来确定表单是不是应该正常提交. 最糟糕的写法是把验证的逻辑都放在send函数里面.

使用AOP改善javascript代码

而更好的方式是把所有的校验规则用策略模式放到一个集合里,返回false或者true来决定是否通过验证. 这样可以随意的选择和更换校验规则.

使用AOP改善javascript代码

这样还有一个缺点,校验和发送请求这2个请求耦合到了一个函数里面, 我们用aop来把它们分离开来, 把validata做成插件化,真正的即插即用. 只需把send函数改成:

使用AOP改善javascript代码

过最前面Function.prototype.before的代码不难看出,我们约定,当前一个函数返回false, 就会阻断下一个函数的执行, 所以当validata返回false的时候, 便不再继续执行send. 而因为之前提到的before函数可以和当前函数公用this和arguments, 所以value参数也能顺利的传递到validata函数里.

给ajax请求动态添加参数

第一个例子里window.onload是用的after后置装饰, 这里是用before前置装饰. 在ajax请求之前动态添加一些参数.

我们遇到过很多跨域的请求, jsonp和iframe都是很常用的方式. 之前在我们的项目里,用参数retype=jsonp表示是jsonp请求, retype=iframe表示是iframe请求. 除此之外这2个请求的参数没有任何区别. 那么可以用before把retype参数动态装饰进去.

先定义一个ajax请求的代理函数.使用AOP改善javascript代码

这个函数里面没有逻辑处理和分支语句,它也不关心自己是jsonp请求还是iframe请求. 它只负责发送数据, 是一个单一职责的好函数.

接下来在发送请求前放置一个before装饰器.

使用AOP改善javascript代码

开始发送请求:

使用AOP改善javascript代码

职责链模式.

职责链模式在js中典型的应用场景是事件冒泡. 将所有子节点和父节点连成一条链,并沿着这条链传递事件,直到有一个节点能够处理它为止. 职责链模式是消除过多的if else语句的神器.

拿最近做的一个需求来举例, 有个文件上传的功能, 提供了控件,html5, flash, 表单上传这4种上传方式. 根据它们的优先级以及浏览器支持情况来判断当前选择哪种上传方式. 在我进行改造之前,它的伪代码大概是这样:

使用AOP改善javascript代码

当然实际的代码远不只这么多,其中还包括了各种控件初始化,容错等情况。有天我需要屏蔽掉flash,看起来是很简单的需求,但难度实际跟在心脏旁边拆掉一根毛线血管类似.

如果试试职责链模式呢, 看看事情将变得多简单:

第一步先改写之前的after函数,使得返回一个对象时阻断职责链的传递,而返回null时继续传递请求。

使用AOP改善javascript代码

接下来把每种控件的创建方式都包裹在各自的函数中, 确保没有逻辑交叉和相互污染.

使用AOP改善javascript代码

最后用职责链把它们串起来:

使用AOP改善javascript代码

可以预见,某天我又需要屏蔽掉flash, 那时的我只需要改动这一行代码. 改成:

使用AOP改善javascript代码

组合代替继承

很多时候我们在设计程序的时候,会遇到使用组合还是继承的问题. 通常来讲, 使用组合更灵活轻巧. 还是拿之前文件上传来举例.

我定义了一个超类Upload, 衍生出4个子类.
Plugin_Upload, Html5_Upload, Flash_Upload以及Form_Upload.

Plugin_Upload会继承父类,得到Upload的大部分功能, 然后对控件上传的一些特性进行个性定制. 比如其它3种上传方式都是选择文件后便开始上传. 而控件上传在开始上传之前会经过一轮文件扫描.

第一种做法是Plugin_Upload继承Upload, 然后重写它的start_upload方法.

使用AOP改善javascript代码

用更轻的组合方式, 可以直接给原来的start_upload函数装饰上扫描功能, 甚至不需要衍生一个额外的子类.

使用AOP改善javascript代码

Javascript 相关文章推荐
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
Nov 14 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
JS实现拖动滚动条评分的效果代码分享
Sep 29 Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
JS图片懒加载技术实现过程解析
Jul 27 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
jquery Validation表单验证使用详解
Sep 12 #Javascript
You might like
Ajax PHP分页演示
2007/01/02 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
javascript dom追加内容实现示例
2013/09/21 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
python通过文件头判断文件类型
2015/10/30 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
神经网络理论基础及Python实现详解
2017/12/15 Python
python集合比较(交集,并集,差集)方法详解
2018/09/13 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
外贸公司实习自我鉴定
2013/09/24 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
庆六一宣传标语
2014/10/08 职场文书
辞职信格式范文
2015/05/13 职场文书
欠款证明
2015/06/24 职场文书
投资入股协议书
2016/03/22 职场文书
护理自荐信
2019/05/14 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
MySQL的索引你了解吗
2022/03/13 MySQL