读书——javascript异步编程

Posted 2020-06-10

两种基本的设计模式。

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);
只要这两套标准仍然存在差异，这就是让它们融洽相处的最好方法。