使用AOP来改进Javascript代码
1、防止在window.onload从被两次。
2、无创统计代码。
3、分开形式请求和核对。
4,动态地向Ajax请求添加参数。
5,责任链模式。
6,组合而不是继承。
先给出2段函数前后。顾名思义,就是一个函数在执行前或之后的另一个函数,巧妙的,前后都可以是这个函数的公共和参数,所以我们在那里玩的有很多。
对在window.onload处理被两次。
的时间去QQ群问问题前一段时间,重写在window.onload,如何不覆盖以前在window.onload函数。
最原始的解决方案必须直接添加你的新代码,原来在window.onload。
很显然,改变原始功能的需要是最具侵入性的做法之一。
另一个更好的解决方案是一个中间变量保存以前在window.onload。
这样,它将采取一些额外的成本管理和讨厌的中间变量__onload。
想象一下这一幕,当人们发现天气寒冷时,自然会选择穿貂皮大衣,而不是把自己的皮肤换成貂皮。动态装饰效益体现,功能完全不侵入之前。
非侵入性统计码
与逻辑无关的统计代码必须插入函数中,许多学生相信这一点。例如,下面的代码用于计算创建1000个节点的函数在用户计算机上花费的时间。
在AOP的方式中,函数中不需要更改,首先定义一个通用包装器。
只要一行代码,任何函数都可以添加到统计时间的函数中。
单独的表单请求和检查
在提交表格之前,我们经常做一些检查工作,以确保表格能正常提交。最糟糕的编写方法是将验证逻辑放置在发送函数中。
更好的方法是使用策略模式将所有检查规则放入一个集合中,并返回false或真值以决定是否通过验证。这允许您随意选择和替换检查规则。
所以还有一个缺点。检查和发送请求的2个请求耦合到一个函数。我们将他们从AOP,单独validata成插件,即插即用。我们只需要将发送函数转换为:
function.prototype.before前面的代码中不难看出,我们同意,当前函数返回false,将一个函数的执行下受阻,所以当validata返回false,将不再继续进行发送。之前,由于公众和论证上述功能和现有功能,所以价值参数可以顺利转移到validata功能。
动态添加参数到Ajax请求
在第一个例子中,在window.onload是后置装饰在前缀后。在Ajax请求之前动态添加许多参数。
我们遇到了很多的跨域请求,JSONP和iframe是很常见的。在我们的计划,说,JSONP请求参数键入= JSONP,键入= iframe说iframe请求。此外,2个请求的参数没有任何差别。然后你可以使用之前键入参数动态内部装饰。
首先定义Ajax请求的代理函数。
在这个函数中没有逻辑处理和分支语句。它不在乎它是JSONP请求或iframe请求。它只负责发送数据。这是一种很好的单一责任的功能。
接下来,在发送请求之前放置一个装饰器。
开始发送请求:
责任链模型。
JS中责任链模式的典型应用场景是事件冒泡。所有子节点和父节点都链接到一个链中,并且事件沿着这个链传递,直到一个节点能够处理它。职责链模式是消除太多if语句的工件。
以最近完成的一个需求为例,一个文件上传功能,提供控件,HTML5,flash,上传4上传。根据他们的优先级和支持,决定当前浏览器选择上传哪种方式。在我被改变之前,它是关于这个伪代码的:
当然,实际的代码远远小于那个,它还包括各种控件的初始化、容错等,我需要一天筛选出Flash,这似乎是一个简单的需要,但困难实际上类似于在心脏旁边去除一根羊毛血管。
如果您尝试作业链模型,看看它会有多容易:
第一步是重写前一个后一个函数,这样当返回一个对象时,责任链就会被阻塞,而当返回null时请求将继续。
接下来,每个控件的创建都封装在自己的函数中,以确保没有逻辑交叉和污染。
最后用责任链把它们串起来:
可以预见,有一天我需要再次屏蔽Flash,然后我只需要更改代码行。
组合代替继承
很多时候,当我们设计程序时,我们会遇到使用组合或继承的问题。一般来说,使用组合是更灵活和轻量级的。
我定义了一个父类上传,导出4类。
plugin_upload,html5_upload,flash_upload,和form_upload。
plugin_upload继承大部分的上传功能后,父类继承,然后自定义上传的一些特点。例如,其他3种上传方法是在选择文件之后上传,而控制上传则在上传之前进行一轮文件扫描。
第一种方法是plugin_upload继承和重写它的start_upload上传方法。
在一个较轻的组合,你可以直接与扫描功能start_upload装饰原有功能,甚至不需要得到一个额外的子类。