jQuery中的编程范式

最新推荐文章于 2020-09-25 16:05:10 发布

RaylnGuan

最新推荐文章于 2020-09-25 16:05:10 发布

阅读量88

点赞数

分类专栏： Js&JQuery 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/rayln/article/details/84120713

版权

Js&JQuery 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

[b]转载自:[/b][url]http://www.iteye.com/topic/1119283[/url]

[b]1. AJAX: 状态驻留，异步更新 [/b]

[b]2. 模块化：管理名字空间 [/b]
所谓的module pattern代码如下，它的关键是利用匿名函数限制临时变量的作用域。

var feature =(function() {  

// 私有变量和函数  
var privateThing = 'secret',  
    publicThing = 'not secret',  

    changePrivateThing = function() {  
        privateThing = 'super secret';  
    },  

    sayPrivateThing = function() {  
        console.log(privateThing);  
        changePrivateThing();  
    };  

// 返回对外公开的API  
return {  
    publicThing : publicThing,  
    sayPrivateThing :  sayPrivateThing  
}  
})();

js本身缺乏包结构，不过经过多年的尝试之后业内已经逐渐统一了对包加载的认识，形成了RequireJs库这样得到一定共识的解决方案。jQuery可以与RequireJS库良好的集成在一起, 实现更完善的模块依赖管理。[url]http://requirejs.org/docs/jquery.html[/url]

require(["jquery", "jquery.my"], function() {  
    //当jquery.js和jquery.my.js都成功装载之后执行  
    $(function(){  
      $('#my').myFunc();  
    });  
  });

通过以下函数调用来定义模块my/shirt, 它依赖于my/cart和my/inventory模块，

require.def("my/shirt",  
  ["my/cart", "my/inventory"],  
  function(cart, inventory) {  
      // 这里使用module pattern来返回my/shirt模块对外暴露的API  
      return {  
          color: "blue",  
          size: "large"  
          addToCart: function() {  
              // decrement是my/inventory对外暴露的API  
              inventory.decrement(this);  
              cart.add(this);  
          }  
      }  
  }  
);

[b]3. event：统一事件模型 [/b]
如果调用bind之后,新建了另一个li节点,则该节点的click事件不会被监听.
jQuery的delegate机制可以将监听函数注册到父节点上, 子节点上触发的事件会根据selector被自动派发到相应的handlerFn上. 这样一来现在注册就可以监听未来创建的节点.

$('#myList').delegate('li.trigger', 'click', handlerFn);

最近jQuery1.7中统一了bind, live和delegate机制, 天下一统, 只有on/off.

$('li.trigger’).on('click', handlerFn);  // 相当于bind  
$('#myList').on('click', 'li.trigger', handlerFn);  // 相当于delegate

[b]4. 动画队列：全局时钟协调 [/b]
我们经常需要面临的实际问题:
A. 有多个元素要执行类似的动画
B. 每个元素有多个属性要同时变化
C. 执行完一个动画之后开始另一个动画
jQuery对这些问题的解答可以说是榨尽了js语法表达力的最后一点剩余价值.

$('input')  
  .animate({left:'+=200px',top:'300'},2000)  
  .animate({left:'-=200px',top:20},1000)  
  .queue(function(){  
    // 这里dequeue将首先执行队列中的后一个函数,因此alert("y")  
    $(this).dequeue();  
    alert('x');  
   })  
  .queue(function(){  
     alert("y");  
     // 如果不主动dequeue, 队列执行就中断了,不会自动继续下去.  
     $(this).dequeue();  
   });

[b]5. promise模式：因果关系的识别 [/b]
future模式一般是外部对象主动查看future的返回值, 而promise模式则是由外部对象在promise上注册回调函数.

function getData(){  
 return $.get('/foo/').done(function(){  
    console.log('Fires after the AJAX request succeeds');  
 }).fail(function(){  
    console.log('Fires after the AJAX request fails');  
 });  
}  

function showDiv(){  
  var dfd = $.Deferred();  
  $('#foo').fadeIn( 1000, dfd.resolve );  
  return dfd.promise();  
}  

$.when( getData(), showDiv() )  
  .then(function( ajaxResult, ignoreResultFromShowDiv ){  
      console.log('Fires after BOTH showDiv() AND the AJAX request succeed!');  
      // 'ajaxResult' is the server’s response  
  });

jQuery引入Deferred结构, 根据promise模式对ajax, queue, document.ready等进行了重构, 统一了异步执行机制. then(onDone, onFail)将向promise中追加回调函数, 如果调用成功完成(resolve), 则回调函数onDone将被执行, 而如果调用失败(reject), 则onFail将被执行. when可以等待在多个promise对象上. promise巧妙的地方是异步执行已经开始之后甚至已经结束之后,仍然可以注册回调函数
someObj.done(callback).sendRequest() vs. someObj.sendRequest().done(callback)
callback函数在发出异步调用之前注册或者在发出异步调用之后注册是完全等价的, 这揭示出程序表达永远不是完全精确的, 总存在着内在的变化维度. 如果能有效利用这一内在的可变性, 则可以极大提升并发程序的性能.
promise模式的具体实现很简单. jQuery._Deferred定义了一个函数队列，它的作用有以下几点：
A. 保存回调函数。
B. 在resolve或者reject的时刻把保存着的函数全部执行掉。
C. 已经执行之后, 再增加的函数会被立刻执行。