使用面向对象程序改进javascript代码

Aop也被称为面向部分的编程。用过弹簧的同学一定很熟悉。在js中，AOP是一个被严重忽视的技术点。本文将通过下面的小例子来谈谈AOP在js中的妙用。

1.防止window.onload被覆盖两次。2.没有侵入性的统计代码。3.单独的表单请求和验证。4.向ajax请求动态添加参数。5.责任链模式。6.结合而不是继承。

首先给出前后两个“正切”函数。顾名思义，一个函数在另一个函数之前或之后执行。巧妙的是，前后都可以和当前函数共享这个和参数，这样我们就有更多的地方可以玩了。

处理window.onload被覆盖两次。

前段时间在QQ群看到一个人提问。要重写window.onload，如何才能不覆盖以前的window.onload函数？

原始解决方案必须是将新代码直接添加到原始窗口。

这个缺点很明显，是改变原有功能最具侵入性的方式。

另一个稍微好一点的方案是用中间变量保存之前的window.onload

这样，就有了一个令人讨厌的中间变量__onload，管理它会花费一些额外的成本。

想象一下这一幕，当人们感到寒冷时，他们自然会选择出门时穿貂皮大衣，而不是撕掉皮肤，换成貂皮。动态装修的好处体现出来了，完全不会侵犯之前的功能。

非侵入性统计代码

与逻辑本身无关的统计代码要硬插到函数里，相信很多报过的同学都很苦恼。例如，下面的代码用于计算在用户的计算机上创建一个有1000个节点的函数需要多少时间。

按照aop的方式，不再需要在函数内部进行更改，首先定义一个通用的包装器。

只需一行代码，就可以将计时功能添加到任何函数中。

单独的表单请求和验证

在提交表单之前，我们经常会做一些验证工作，以确定表单是否应该正常提交。最糟糕的编写方式是将验证逻辑放在send函数中。

更好的方法是将所有的检查规则放在一个带有策略模式的集合中，并返回false或true来决定它们是否通过验证，这样您就可以随意选择和更改检查规则。

这有另一个缺点。校验和和发送请求这两个请求被耦合到一个函数。我们用aop把它们分开，做成validata插件，这才是真正的即插即用。只需将发送功能更改为：

从Function.prototype的前面代码不难看出，在此之前我们规定如果当前函数返回false，下一个函数的执行就会被阻塞。因此，当validata返回false时，它将不会继续执行send。因为前面提到的before函数可以与当前函数共享这个和参数，所以value参数可以平滑地传递给validata函数。

向ajax请求动态添加参数

在第一个示例中，window.onload在后面修饰，而在这里它在前面修饰。一些参数是在ajax请求之前动态添加的。

我们遇到过很多跨域的请求，jsonp和iframe是非常常见的方法。在我们的项目中，参数reject=jsonp用于指示jsonp请求，reject=iframe用于指示iframe请求。否则，这两个请求的参数没有区别。所以重新键入的参数可以动态地用。

首先，为ajax请求定义一个代理函数。

这个函数中没有逻辑处理和分支语句，也不关心它是jsonp请求还是iframe请求。它只负责发送数据，所以是一个职责单一的好功能。

接下来，在发送请求之前，在装饰器之前放置一个。

开始发送请求：

责任链模式。

js中责任链模式的典型应用场景是事件冒泡。所有子节点和父节点连接成一个链，事件沿着这个链传输，直到一个节点可以处理它。责任链模式是一个消除太多if else语句的工件。

以最近的一个需求为例。有文件上传功能，提供控件、html5、flash、表单上传四种上传方式。根据它们的优先级和浏览器支持，我们可以判断目前选择哪种上传方式。在我修改之前，它的伪代码大约是：

当然，实际的代码远不止这些，包括各种控件的初始化、容错等等。有一天，我需要屏蔽闪光，这看起来是一个非常简单的要求，但难度实际上类似于移除心脏旁边的一根羊毛血管。

如果你尝试责任链模式，看看事情会变得多么简单。

第一步是重写前面的after函数，这样当一个对象被返回时，责任链的转移被阻止，当返回null时，请求继续被转移。

接下来，每个控件创建方法都被包装在自己的函数中，以确保没有逻辑交集和相互污染。

最后，用责任链：把他们串起来

可以预见的是，有一天我需要再次屏蔽flash，然后我只需要把这一行代码改成：

组合而不是继承

很多时候我们在设计程序的时候，都会遇到使用组合还是继承的问题。一般来说，使用组合更加灵活轻便。让我们以前面的文件上传为例。

我定义了一个超类Upload，并导出了四个子类：plugin _ upload、HTML5 _ upload、flash _ upload和Form_Upload。

Plugin_Upload将继承父类，获得Upload的大部分功能，然后自定义控件上传的一些特性。比如其他三种上传方式是选择文件后开始上传，而控制上传在开始上传前会经过一轮文件扫描。

第一种方法是Plugin_Upload继承Upload，然后覆盖它的start_upload方法。

用更轻的组合，原来的start_upload函数可以直接用扫描函数修饰，甚至不需要派生一个额外的子类。