The application and technique of jquery's callbacks () function

The application and technique of jquery's callbacks () function (figure)
A multipurpose callback list object that provides a powerful way to manage the list of callback functions.
$. The interior of Callbacks () provides the $.ajax () and $ of jquery. Deferred () basic functional components. It can be used as a function of a new component like the base definition.
$. Callbacks () supported methods, including Callbacks.add (), Callbacks.remove (), Callbacks.fire () and callbacks.disable (), etc.
For detailed API see: $. Callbacks API Example: Add | Fire | Fired | Firewith | has | Disable | Disabled | Empty
$. Callbacks
us by calling $. Callbacks gets a callback instance, as follows
var cb = $. Callbacks ();
1
Of course, you can use the New keyword to instantiate the object.
var cb = new $. Callbacks ();
1
In order to save the code as much as possible and avoid confusion we still use var cb = $. Callbacks (); the way to call.
$. Callbacks (Flgs)
At the same time, when instantiating a CB, you can also pass some parameters, the parameter type is a string that can be separated by a space.
The supported flags describe:
This flags parameter is $. An optional parameter of callbacks (), which is structured as an optional list of flags delimited by a space mark, used to change the behavior in the callback list (for example,. $). Callbacks (' unique Stoponfalse ')).
Available Flags:

Name of parameter description
Once make sure that this callback list executes only once (like a deferred Deferred).
Memory when the function queue fire or firewith once, the parameters of the current fire or Firewith are recorded internally. The next time the add is called, the parameters of the record are passed to the newly added function and the newly added function is immediately executed.
Unique ensures that only one callback can be added at a time (so there are no duplicates in the list).
Stoponfalse Interrupt Call when a callback returns false
By default, the callback list will be triggered more than once in the list of callbacks for the event.
Examples of how the flags should be used in the ideal case, see below:
Instance
1. Once
Function Fn1 (val) {Console.log (val)};
Function Fn2 (val) {Console.log (val)};
var callbacks = $. Callbacks ("Once");
Callbacks.add (FN1);
Callbacks.fire ("foo");
Callbacks.add (FN2);
Callbacks.fire ("Bar");
Callbacks.remove (FN2);
Callbacks.fire ("Foobar");
/*
Output
Foo
*/
2. Memory
Function Fn1 (val) {Console.log (val)};
Function Fn2 (val) {console.log ("fn2 says:" + val)};
var callbacks = $. Callbacks ("Memory");
Callbacks.add (FN1);
Callbacks.fire ("foo");
Callbacks.add (FN2);//do immediately of FN2
Do fn1 at this time
Callbacks.fire ("Bar");
Callbacks.remove (FN2);//do immediately of FN2
Do fn1 at this time
Callbacks.fire ("Foobar");
/*
Output
Foo
FN2 Says:foo
Bar
FN2 Says:bar
Foobar
*/
3. Unique
var callbacks = $. Callbacks ("unique");
Callbacks.add (FN1);
Callbacks.fire ("foo");
Callbacks.add (FN1); Repeat addition won't usefull, only one fn1 exist.
Callbacks.add (FN2);
Callbacks.fire ("Bar");
Callbacks.remove (FN2);
Callbacks.fire ("Foobar");
/*
Output
Foo
Bar
FN2 Says:bar
Foobar
*/
4. Stoponfalse
function Fn1 (value) {
Console.log (value);
return false;
}
function Fn2 (value) {
FN1 ("fn2 says:" + value);
return false;
}
var callbacks = $. Callbacks ("Stoponfalse");
Callbacks.add (FN1);
Callbacks.fire ("foo");
Callbacks.add (FN2);
Callbacks.fire ("Bar");
Callbacks.remove (FN2);
Callbacks.fire ("Foobar");
/*
Output
Foo
Bar
Foobar
*/
Because $. Callbacks () supports a list of flags rather than just one, setting a few flags, with a cumulative effect similar to "&&". This means that it may be combined to create a callback list, unique and ensure that if the list has been triggered, there will be more callback calls to the latest trigger value (i.e.$. Callbacks ("unique Memory")).
function Fn1 (value) {
Console.log (value);
return false;
}
function Fn2 (value) {
FN1 ("fn2 says:" + value);
return false;
}
var callbacks = $. Callbacks ("unique memory");
Callbacks.add (FN1);
Callbacks.fire ("foo");
Callbacks.add (FN1); Repeat addition
Callbacks.add (FN2);
Callbacks.fire ("Bar");
Callbacks.add (FN2);
Callbacks.fire ("Baz");
Callbacks.remove (FN2);
Callbacks.fire ("Foobar");
/*
Output
Foo
FN2 Says:foo
Bar
FN2 Says:bar
Baz
FN2 Says:baz
Foobar
*/
The flag binding is used by $. Callbacks () internal. Done () and. Fail () A deferred container-both of which use $. Callbacks (' memory once ').
$. The callbacks method can also be separated, for the sake of convenience there should be a need to define the abbreviated version:
var callbacks = $. Callbacks (),
Add = Callbacks.add,
remove = Callbacks.remove,
Fire = Callbacks.fire;
Add (FN1);
Fire ("Hello World");
Remove (FN1);
Jquery:
jquery is a fast, concise JavaScript framework that is a good JavaScript code base (or JavaScript framework) after prototype. The purpose of jquery design is "write Less,do more", which advocates writing less code and doing more things. It encapsulates the functionality code common to JavaScript, providing a simple JavaScript design pattern that optimizes HTML document manipulation, event handling, animation design, and Ajax interaction.
The core features of jquery can be summed up with a unique chain syntax and a short and clear multi-function interface, a highly efficient and flexible CSS selector, and the ability to extend the CSS selector, with convenient plug-in extension mechanisms and rich plugins. jquery is compatible with a variety of mainstream browsers such as IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+, and more.
The jquery module can be divided into 3 parts: The ingress module, the underlying support module, and the function module.
In the construction of the JQuery object module, if a selector expression is passed in when calling the constructor jquery () to create a jquery object, the selector sizzle (a pure JavaScript-implemented CSS selector engine) is called.Cultural Hardship TourExperience, used to find a collection of elements that match a selector expression, traverse the document, find the DOM element that matches it, and create a jquery object that contains references to those DOM elements.
The browser function test module provides test results for different browser functions and bugs, and other modules address compatibility issues between browsers based on these test results.
In the underlying support module, the callback Function list module is used to enhance the management of callback functions, support adding, removing, triggering, locking, disabling callback functions and other functions; The asynchronous queue module is used to decouple asynchronous tasks and callback functions, and it adds state to the callback function on the basis of the list of callback functions, and provides a list of several callback functions. Supports propagating the success or failure state of any synchronous or asynchronous callback function; The data cache module is used to attach arbitrary types of data to DOM elements and JavaScript objects; The queue module is used to manage a set of functions, support the Enqueue and outbound operations of functions, and ensure that functions are executed sequentially, based on the data cache module.
In the functional module, the event system provides a unified event binding, response, manual triggering and removal mechanism, which does not bind events directly to DOM elements, but rather manages events based on the data cache module, which allows data to be loaded from the server without refreshing the page. It manages and triggers callback functions based on an asynchronous queue module, which is used to animate a Web page, which manages and executes animation functions based on the queue module, which is used to read, set, and remove HTML attributes and Dom properties; DOM Traversal module is used to traverse the parent element in the DOM tree, Child elements and sibling elements; the DOM manipulation module is used to insert, remove, copy, and replace DOM elements; The style manipulation module is used to get the calculated style or set inline style; The coordinate module is used to read or set the document coordinates of the DOM element; The dimension module is used to get the height and width of the DOM element.

The application and technique of jquery's callbacks () function (figure)