Reading--javascript Asynchronous Programming

Two basic design patterns.

1.PubSub Mode is a callback organization that assigns callbacks to named events

A 2.Promise object is a visual object that represents a one-time event.

and async.js workflow control, Async Utilities for node and the browser

Https://github.com/caolan/async

And Tim Caswell's Step① is a lightweight JavaScript library.

Https://github.com/creationix/step

1.PubSub (Publish/subscribe, meaning "Publish/subscribe") mode to distribute events. Along this line of thought, we will see some concrete manifestations of the pubsub pattern:

Node's Eventemitter object, Backbone's event model, and jquery's custom events. With the help of these tools, we can unpack nested callbacks,

Reduce repetitive redundancy and eventually write an easy-to-understand event-driven code.

(1) Emitter.on (' Evacuate ', function (message) {
Console.log (message);
});

Emitter.emit (' evacuate ');

(2) $. Callbacks http://api.jquery.com/jQuery.Callbacks/

(3) JQuery namespace Event : If you bind two events named "CLICK.TBB" and "HOVER.TBB", simply call Unbind (". TBB") to unbind them at the same time.

Backbone.js allows the event handler to be bound to the "All" event type, which causes the triggering of these event handlers no matter what happens.

Both JQuery and backbone.js support the use of spaces to separate multiple events to bind or trigger multiple event types at the same time, such as "KeyPress MouseMove".

(4) Synchronization

Although the pubsub pattern is an important technique for handling asynchronous events, it has nothing to do with asynchrony internally.

$ (' input[type=submit] ')
. On (' click ', Function () {console.log (' foo ');})
. Trigger (' click ');
Console.log (' Bar ');
The output of this piece of code is:

Foo
Bar

This proves that the processor of the Click event is activated immediately by the trigger method. Fact
, whenever a jquery event is triggered, it will be executed in sequence without interruption.
Processor.

(5) Event-based model

Propagation of model events

Event loops and nested changes

(6) JQuery custom Events

Trigger (Will bubble) or triggerhandler (not bubbling)

Native Custom events: 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 under: https://msdn.microsoft.com/en-us/library/ms536390 (v=vs.85). aspx

Document.createeventobject

2.promise

(1) The deferred object of jquery is detailed http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

(2) Supplement:

var errorpromise = $ ('. Error '). FadeIn (). Promise ();
Errorpromise.done (Aftererrorshown);

The following 3 lines of code are now equivalent.
$ (Onready);
$ (document). Ready (Onready);
$.ready.promise (). Done (Onready);

(3) Progress notice

Progress Notify

Called on a deferred object in the pending state
Notify, the progress callback is running.

(4) Pipeline link future

Pipe

var getpromise = $.get ('/query ');
var postpromise = getpromise.pipe (function (data) {
Return $.post ('/search ', data);
});

Pipe can accept up to 3 parameters, which correspond to the 3 types of callbacks for the Promise object: Done, fail, and Progress.

var pipedpromise = originalpromise.pipe (Successcallback);

var pipedpromise = Originalpromise.pipe (null, failcallback);

var promise2 = promise1.pipe (null, NULL, function (progress) {
Return Math.floor (Progress * +) + '% 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) The comparison between JQuery and promises/a

Functionally, the promise of JQuery and the promises/a of COMMONJS are almost entirely
The same.

The Q.js library is the most popular promises/a implementation, and the methods it provides can even be
The promise of jQuery coexist harmoniously. The difference between the two is only formal, that is, with the same
The words mean different meanings.

and q.js can easily "digest" the Promise object of JQuery.
var qpromise = Q.when (jqpromise);
As long as these two sets of standards are still different, this is the best way to get them together.

Reading--javascript Asynchronous Programming