AOP装饰函数

原创 lingwer111 随笔 JavaScript 223阅读 2017-05-06 00:16:31 举报

AOP(面向切面编程)的主要作用是把一些根核心业务逻辑模块无关的功能抽离出来,这些跟业务逻辑无关的功能同城包括日志统计,安全控制,异常处理等,把这些功能抽离出来之后,再通过“动态织入”的方式渗入业务逻辑模块中,这样做的好处首先是可以保持业务逻辑模块的纯净和高内聚性,其次是可以很方便的复用日志统计等功能模块
在JavaScript 中实现AOP,都是把一个函数 “动态织入”到另一个函数中,具体的实现技术有很多,可以通过拓展Function.prototype来做到这一点,代码如下
javascript 代码

下面演示一下这段代码
javascript 代码

用AOP装饰函数的技巧在实际开发中非常有用,不论是业务代码的编写,还是在框架层门,都可以把行为依照职责分成力度更细的函数,随后通过装饰把他们合并到一起,这有助于我们编写一个松耦合和高复用的系统,下面是具体的例子。
分离业务代码和数据统计代码,无论在上面语言中,都是AOP的经典应用之一,在项目开发的结尾阶段难免要加上很多统计数据的代码,这些过程很可能让我们被迫改动早已封装好的函数。
比如页面中有一个登陆BUTTON,点击这个button 会弹出登陆悬浮层,与此同时要进行数据上报来统计有多少用户点击了这个登陆button
html 代码

我们看到在showLogin函数里,既要负责打开登录悬浮层,又要负责数据上报,这是两个层面的功能,在此处被耦合一个函数里,使用AOP分离之后,代码如下
html 代码

用AOP动态改变函数的参数
下面有一个ajax函数在项目中一直运作良好,但有一天网站遭受了CSRF攻击,解决CSRF攻击最简单的一个办法就是在HTTP请求中带上一个Token参数,所以现在的任务是给每个ajax请求都加上Token参数,如果直接在原来的ajax上修改,会让ajax变的僵硬,每个从ajax函数里发出的请求都自动带上了Token参数,让ajax无法移植到其他项目上。这时候通过Function.prototype.before将Token参数装饰到ajax函数的对象param对象中
javascript 代码

插件式的表单验证
很多人都写过表单验证的代码,在一个web项目中,可能存在非常多的表单,如注册登录修改用户信息等,在表单提交数据给后台之前,常常要做一些校验,比如登录的时候要验证用户名和密码是否为空,代码如下

html 代码

formSubmit函数在此处承担2个职责,除了提交ajax请求之外,还要验证用户输入的合法性,这种代码会造成函数臃肿,职责混乱,也谈不上复用性。
现在的目的是分离校验输入和ajax输入ajax请求的代码。我们把校验输入的逻辑放到validata函数中,并约定validata函数返回false的时候,表示验证未通过。代码如下
html 代码

注意
Function.prototype.before/after被装饰后,实际返回的是一个新函数,如果在原函数上保存了一些属性,那么这些属性会丢失,代码如下
[code=javascript,javascript 代码]var func = function() {
alert(1)
}
func.a = 'a';

function = func.after(function() {
alert(2);
})
alert(func.a) //输出undefined[/code]
另外,,这种装饰方式也叠加了函数的作用域,如果装饰的链条过长,性能上也会受到一些影响。

参考<JavaScript 设计模式与开发实践>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复