未分类

jQuery 重新回顾

感觉很久没有更新 jQuery 知识了，这几年都在忙工作，觉得能正常使用 jQuery 就好，遇到问题稍微检查一下源码，找到原理就可以处理，导致很多代码都是勉强处理，例如 ajax 嵌套等问题，今天抽空重新看一遍官网 api documentation 感触良多呀，印象较深的还是 Deferred Object、Callback Object，甚至连 bind() 也重新深入了解。

bind() & on()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 绑定多个事件
$('#div1').bind('click mouseenter', function(event) { alert( "The " + event.type + " event happened!" ); });
$('#div1').bind({
  click: function () { alert('click'); },
  mouseenter: function() { alert('mouseenter'); }
});
// 出入 event 数据
var messager = 'test1';
$('#div1').bind('click', { msg: messager }, function(event){ alert(event.data.msg); });
messager = 'msg change';
$('#div1').bind('click', { msg: messager }, function(event){ alert(event.data.msg); });
// on()
$('#div1').on('click', 'p', { name: 'Andy' }, function( event ) { alert(event.data.name); });

trigger() & triggerHandler()

  1. trigger会触发事件冒泡，而triggerHandler则不会
  2. triggerHandler只触发jQuery对象集合中第一个元素的事件处理函数，而trigger则触发所有对象的事件处理函数
  3. trigger会触发事件的默认行为，triggerHandler则会阻止事件的默认行为
  4. trigger和triggerHandler都支持事件命名空间，在命名空间上的表现也完全一致
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 原来可以这样传入参数
$( "#foo" ).on( "custom", function( event, param1, param2 ) {
  alert( param1 + "\n" + param2 );
});
$( "#foo").trigger( "custom", [ "Custom", "Event" ] );
// 事件命名空间
$("#btn").bind("click",function(){  
  alert("no");  
});  
$("#btn").bind("click.a",function(){  
  alert("a");  
});  
  
$("#btn").bind("click.b",function(){  
  alert("b");  
});  
// 打印no  
$("#btn").trigger("click!");  
// 打印no,a,b  
$("#btn").trigger("click");  
// 打印a  
$("#btn").trigger("click.a");  
// 无打印  
$("#btn").trigger(".a");

$.Callbacks

分为4种模式：once、memory、unique、stopOnFalse

1
$.Callbacks( "unique stopOnFalse" )

观察者模式，观察者是委托、回调

  1. .add(cb) - 添加观察者
  2. .disable/.disabled - 禁止通知/判断是否禁止通知
  3. .empty - 清空所有观察者
  4. .fire(args) - 通知所有观察者，传入参数
  5. .fireWith([context] [,args]) - 通知所有观察者，传入上下文和参数
  6. .has(cb) - 判断是否存在观察者
  7. .lock/locked - 不清楚用处
  8. .remove(cb) - 取消订阅

$.Deferred

done/fail/progress 是 callbacks.add，将回调函数存入
resolve/reject/notify 是 callbacks.fire，执行回调函数(或队列)

内部返回 promise 对象，避免外部控制

1
2
3
4
5
6
7
8
9
10
11
12
var wait = function(){
  var dtd = $.Deferred(); //在函数内部，新建一个Deferred对象
  var tasks = function(){
    alert("执行完毕！");
    td.resolve(); // 改变Deferred对象的执行状态
  };  
  setTimeout(tasks,5000);
  return dtd.promise(); // 返回promise对象
};
$.when(wait())
  .done(function(){ alert("哈哈，成功了！"); })
  .fail(function(){ alert("出错啦！"); });

普通操作的回调函数接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$.Deferred(wait)
  .done(function(){ alert("哈哈，成功了！"); })
  .fail(function(){ alert("出错啦！"); });
var dtd = $.Deferred(); // 生成Deferred对象
  var wait = function(dtd){
  var tasks = function(){
    alert("执行完毕！");
    dtd.resolve(); // 改变Deferred对象的执行状态
  };
  setTimeout(tasks,5000);
};
dtd.promise(wait);
wait.done(function(){ alert("哈哈，成功了！"); })
  .fail(function(){ alert("出错啦！"); });
wait(dtd);