标签:
两种基本的设计模式。
1.PubSub 模式是一种将回调赋值给已命名事件的回调组织方式
2.Promise 对象是一种表示一次性事件的直观对象。
还有Async.js的工作流控制,Async utilities for node and the browser
https://github.com/caolan/async
还有Tim Caswell 的Step①是一个轻量级的JavaScript 库。
https://github.com/creationix/step
1.PubSub(Publish/Subscribe,意为“发布/订阅”)模式来分发事件。沿着这个思路,我们会看到PubSub 模式的一些具体表现:
Node 的EventEmitter 对象、Backbone 的事件化模型和jQuery 的自定义事件。在这些工具的帮助下,我们能解嵌套那些嵌套式回调,
减少重复冗余,最终编写出易于理解的事件驱动型代码。
(1)emitter.on(‘evacuate‘, function(message) {
console.log(message);
});
emitter.emit(‘evacuate‘);
(2)$.Callbacks http://api.jquery.com/jQuery.Callbacks/
(3)jQuery 的名称空间化事件:如果绑定了名称为"click.tbb" 和"hover.tbb" 的两个事件, 则简单地调用unbind(".tbb")就可以同时解绑定它们。
Backbone.js 允许向"all"事件类型绑定事件处理器,这样不管发生什么事,都会导致这些事件处理器的触发。
jQuery 和Backbone.js 都支持用空格隔开多个事件来同时绑定或触发多种事件类型,譬如"keypress mousemove"。
(4)同步性
尽管PubSub 模式是一项处理异步事件的重要技术,但它内在跟异步没有任何关系
$(‘input[type=submit]‘)
.on(‘click‘, function() { console.log(‘foo‘); })
.trigger(‘click‘);
console.log(‘bar‘);
这段代码的输出为:
foo
bar
这证明了click 事件的处理器因trigger 方法而立即被激活。事实
上,只要触发了jQuery 事件,就会不被中断地按顺序执行其所有事
件处理器。
(5) 事件化模型
模型事件的传播
事件循环与嵌套式变化
(6)jQuery自定义事件
trigger(会冒泡) 或 triggerHandler(不冒泡)
原生自定义事件:https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Creating_and_triggering_events
var event = new Event(‘build‘);
// Listen for the event.
elem.addEventListener(‘build‘, function (e) { ... }, false);
// Dispatch the event.
elem.dispatchEvent(event);
IE下:https://msdn.microsoft.com/en-us/library/ms536390(v=vs.85).aspx
document.createEventObject
2.promise
(1)jQuery的deferred对象详解 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html
(2)补充:
var errorPromise = $(‘.error‘).fadeIn().promise();
errorPromise.done(afterErrorShown);
以下3 行代码现在是等效的。
$(onReady);
$(document).ready(onReady);
$.ready.promise().done(onReady);
(3)进度通知
progress notify
对处于挂起状态的Deferred 对象调用
notify 时,运行的是progress 回调。
(4)管道链接未来
pipe
var getPromise = $.get(‘/query‘);
var postPromise = getPromise.pipe(function(data) {
return $.post(‘/search‘, data);
});
pipe 最多能接受3个参数,它们对应着Promise 对象的3 种回调类型:done、fail 和progress。
var pipedPromise = originalPromise.pipe(successCallback);
var pipedPromise = originalPromise.pipe(null, failCallback);
var promise2 = promise1.pipe(null, null, function(progress) {
return Math.floor(progress * 100) + ‘% complete‘;
});
var step1 = $.post(‘/step1‘, data1);
var step2 = step1.pipe(function() {
return $.post(‘/step2‘, data2);
});
var lastStep = step2.pipe(function() {
return $.post(‘/step3‘, data3);
});
var posting = $.post(‘/step1‘, data1)
.pipe(function() {
return $.post(‘/step2‘, data2);
})
.pipe(function() {
return $.post(‘/step3‘, data3);
});
var posting = $.post(‘/step1‘, data1)
.pipe(function() {
return $.post(‘/step2‘, data2)
.pipe(function() {
return $.post(‘/step3‘, data3);
});
});
(4)jQuery 与Promises/A 的对比
从功能上看,jQuery 的Promise 与CommonJS 的Promises/A 几乎完全
一样。
Q.js 库是最流行的Promises/A 实现,其提供的方法甚至能与
jQuery 的Promise 和谐共存。这两者的区别只是形式上的,即用相同
的词语表示不同的含义。
而Q.js 可以轻松“消化”jQuery 的Promise 对象。
var qPromise = Q.when(jqPromise);
只要这两套标准仍然存在差异,这就是让它们融洽相处的最好方法。
标签:
原文地址:http://www.cnblogs.com/fanyegong/p/5150586.html