[转]用AOP改善javascript代码

转载

mb5fd33ffac6eab 2018-02-05 09:13:00

文章标签 AOP 上传职责链模式控件 json 文章分类 Java 后端开发

有时候，不光要低头写代码，也要学着站在更高的角度，来思考代码怎么写，下面这篇文章，讲的关于代码设计的问题，脑洞大开。

自己的改进版本：因为觉得原文作者的这种实现方式，在Function.prototype 上面实现的方式，有点不妥。所以，结合我上面一篇的思考，我做出了如下的修改，

function after(old, callback){

  return function(){
    var ret = old.apply(this, arguments);
    if(ret === false){
      return false;
    }
    callback.apply(this, arguments);
    return ret;
  }
}
function say(name){
  console.log('say ' + name);
  return 1;
}
b = after(say, function(name){
  console.log('after ' + name);
  return 2;
})

实现了一个 after(old, callback)方法，这个工具方法用来实现在这些了old()方法体之后，插入我们需要插入的逻辑，（切面）　。但是这种方法也不是很完美，不是很“直观”

类似的，可以实现 before 切面。

运行结果：

[转]用AOP改善javascript代码_控件

------------------------------------------------------------------------------------------

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

1, 防止window.onload被二次覆盖.

2，无侵入的统计代码.

3, 分离表单请求和校验.

4，给ajax请求动态添加参数.

5，职责链模式.

6, 组合代替继承.

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

[转]用AOP改善javascript代码_职责链模式_02

处理window.onload被二次覆盖.

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

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

[转]用AOP改善javascript代码_职责链模式_03

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

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

[转]用AOP改善javascript代码_AOP_04

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

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

[转]用AOP改善javascript代码_控件_05

无侵入的统计代码

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

[转]用AOP改善javascript代码_上传_06

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

[转]用AOP改善javascript代码_json_07

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

[转]用AOP改善javascript代码_AOP_08

分离表单请求和校验

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

[转]用AOP改善javascript代码_上传_09

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

[转]用AOP改善javascript代码_AOP_10

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

[转]用AOP改善javascript代码_AOP_11

过最前面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代码_json_12