6-5 前置过滤器和请求分发器
本节编程练习不计算学习进度,请电脑登录imooc.com操作

前置过滤器和请求分发器

jQuery1.5 以后,Ajax 模块提供了三个新的方法用于管理、扩展 Ajax 请求,分别是:

前置过滤器 jQuery. ajaxPrefilter
请求分发器 jQuery. ajaxTransport,
类型转换器 ajaxConvert

为什么会出现这几个新的概念?因为 ajax 在发送的过程还有很多一系列的处理。

具体看看代码:

jQuery.extend({
    //前置过滤器
    ajaxPrefilter: addToPrefiltersOrTransports(prefilters),
    //请求分发器
    ajaxTransport: addToPrefiltersOrTransports(transports),
});
  1. 可见这 2 个方法是通过私有方法 addToPrefiltersOrTransports(参考右边代码一)通过 curry 手段构造的,分别是保持了 prefilters 与 transports 的引用,可见 ajaxPrefilter 就维持了addToPrefiltersOrTransports 返回函数的引用了,这种就是闭包的手法了,这也是 JS 的开发人员都需要掌握的,好处就是合并多个参数,当然因为维持引用代价就是一点点性能消耗。
  2. 当然 jQuery 不是传递的简单类型处理,还可以传递的一个引用类型的回调函数,所以针对 ajaxPrefilter 方法放闭包构件就需要做一些处理了,填充 prefilters 处理器(右侧代码编辑器中的代码二)。

其实说白了就是把对应的方法制作成函数的形式填充到 prefilters 或者 transports对应的处理包装对象中,用的时候直接执行,每个函数都保持着各自的引用,种写法的好处自然是灵活,易维护,减少代码量。

所以此时的 prefilters 中的结构可以是这样。

prefilters = {
        '*': function() {
            return {
                send: function() {
                },
                callback: function() {
                }
            }
        }
}

前置过滤器和请求分发器在执行时,分别遍历内部变量 prefilters 和 transports,这两个变量在 jQuery 加载完毕后立即初始化,从过闭包的方法填充这个 2 个对象。

任务

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  5. <script src="http://code.jquery.com/jquery-latest.js"></script>
  6. <script type="text/javascript" src="../jquery-2.1.1.js"></script>
  7. <title>前置过滤器和请求分发器</title>
  8. </head>
  9. <body>
  10.  
  11.  
  12. <script type="text/javascript">
  13.  
  14. /////////////////////////////////
  15. //代码一
  16. //前置过滤器和请求分发器
  17. //addToPrefiltersOrTransports方法
  18. /////////////////////////////////
  19. var prefilters = 2;
  20. var addToPrefiltersOrTransports = function(prefilters) {
  21. return function(b) {
  22. return prefilters + b;
  23. }
  24. }
  25. var ajaxPrefilter = addToPrefiltersOrTransports(prefilters)
  26. ajaxPrefilter(1) //3
  27.  
  28.  
  29. /////////////////////
  30. // 代码二
  31. // 填充prefilters过滤器 //
  32. /////////////////////
  33. var prefilters = {};
  34. var addToPrefiltersOrTransports = function(structure) {
  35. return function(func) {
  36. structure['*'] = func;
  37. }
  38. }
  39. var ajaxPrefilter = addToPrefiltersOrTransports(prefilters)
  40. ajaxPrefilter(function(options) {
  41. return {
  42. send: function() {
  43.  
  44. },
  45. callback: function() {
  46.  
  47. }
  48. }
  49. })
  50.  
  51.  
  52.  
  53. </script>
  54. </body>
  55. </html>
下一节