Open the browser console and we can see that the running results are normal.
(function (window, undefined) {
var Callbacks = function (once) {
//Protect these private variables through closures
var list = [],//Callback function list
Fired; // Have you executed
//Return a closure Callbakcs object
return {
//...Omit some code
fireWith: function (context, data) {
//Trigger the callback function and specify the context
If (list) {
fired = true;
for (var i = 0, len = list.length; i < len; i ) {
//When a function in Callbacks returns false, stop the subsequent execution of Callbacks
If (list[i].apply(context, data) === false)
break;
}
}
//If the once model is configured, the global variable once is true, and the list is reset
If (once) list = undefined;
return this;
}
//...Omit some code
};
};
//Register to window
window.Callbacks = Callbacks;
}(window));
auto:
The auto (memory) model is named after memory in jQuery. I was confused by this name at first. After carefully looking at the usage, I decided to change it to auto - its function is "after the first fire(), subsequent "add() function automatically executes" can be used in the following situations: after adding a set of functions to Callbacks, and temporarily need to add a function, then run the newly added function immediately - it must be said that for the convenience of use, This pattern becomes a bit difficult to understand. The implementation is to determine whether it is an auto model during add(). If it is an auto model, execute this function. However, we need to automatically execute it after the first fire(). Callbacks that have not been fired() should not be automatically executed. Moreover, after each automatic execution, the last used parameters need to be passed to this Automatically executed functions.
Perhaps you will think of the following code:
(function (window, undefined) {
var Callbacks = function (once, auto) {
var list = [],
fired,
lastData;//Save the parameters of the last execution
return {
add: function (fn) {
If (list) {
list.push(fn);
//The last parameter used is passed, and the Context is lost here
//In order to prevent the context from being lost here, we may also need to declare a variable to save the last used Context
If (auto) this.fire(lastData);
}
return this;
},
fireWith: function (context, data) {
If (list) {
lastData = data;// — Record the last used parameter
fired = true;
for (var i = 0, len = list.length; i < len; i ) {
If (list[i].apply(context, data) === false)
break;
}
}
If (once) list = [];
return this;
}
//Part of the code is omitted
};
};
//Register to window
window.Callbacks = Callbacks;
}(window));
But a more wonderful usage is adopted in jQuery. The author of jQuery is also proud of this usage, so he named this model memory-that is, the above variable auto not only represents the current auto execution mode, but also serves as the last Container of parameters, which represents both auto and memory. (The following code is not jQuery and is written based on jQuery code ideas, not source code):
(function (window, undefined) {
var Callbacks = function (auto) {
var list = [],
fired,
Memory,//The main actor is here, it’s memory
coreFire = function (data) {
//The real trigger function method
If (list) {
Memory = auto && data;//Record the last parameter. If it is not in auto mode, this parameter will not be recorded
//If it is auto mode, then this auto will not be false, it will be an array
fired = true;
for (var i = 0, len = list.length; i < len; i ) {
If (list[i].apply(data[0], data[1]) === false)
break;
}
}
};
return {
add: function (fn) {
If (list) {
//Add a callback function
list.push(fn);
//Automatic execution mode, note that if the auto model
//memory is assigned in coreFire(), the default is false
If (memory) coreFire(auto);
}
//Support chain callbacks
return this; },
fireWith: function (context, data) {
If (once) list = [];
//Call coreFire here and convert the parameters into an array
coreFire([context, data]);
return this;
}
};
};
window.Callbacks = Callbacks;
}(window));
We saw in the code of the previous auto implementation that we lost the Context. jQuery fixed this bug early in fireWith() - fix the parameters in fireWith(). jQuery extracts the logic that should execute the function in fireWith(). We temporarily name it coreFire(). In the original fireWith(), the parameters are spliced into an array: the first parameter represents the context, and the second parameter Parameters represent the parameters passed in. Then execute coreFire().
During add(), jQuery did not assign a value to the variable auto(memory), but chose to assign a value to auto(memory) in coreFire(), thus ensuring that it will not be turned on until the first fire(). Automatically executed.
As mentioned above, the parameters received by coreFire() are actually an array. The first parameter is the context, and the second parameter is the parameter passed in from the outside. At the same time, assign this array to auto (memory), so that the definition of the variable auto (whether to execute the mode automatically) becomes memory (memory of the last parameter passed).
It's really a brilliant idea that kills two birds with one stone. I have to like it. I define this as auto because it is an automatically executed model, and by the way, the parameters of the last fire() are saved. The definition of jQuery as memory may be the author's sigh for the miraculous workmanship here.
As for once&auto, it just combines these two codes. You only need to determine in coreFire() that if it is auto mode, then reset the list to a new array, otherwise set it to undefined directly.
Source code
This code is handwritten by me corresponding to jQuery. Some jQuery public functions are written in. It is not a code fragment, so it can be directly referenced and run.
Copy code The code is as follows:
(function (window, undefined) {
/*
* A callback function tool object. Note that the array will be cleared after the work object is completed:
* * Provides a common set of APIs, but it has the following working model -
*ONCE -Single execution model: every time I work, no longer work
*Auto -Automatic execution model: Each adding a callback function is added to automatically execute all the callback functions in the existing callback function set, and the parameters of this time are passed to all the callback functions
*
*/
//Tool function
var isIndexOf = Array.prototype.indexOf, //Es6
toString = Object.prototype.toString, //Cache toString method
TosLice = Array.prototype.slice, // Caches Slice method
return "object" === typeof document.getElementById ?
isFunction = function (fn) {
//There is a problem with the recognition of DOM and BOM under ie
try {
Return /^s*bfunctionb/.test("" fn);
} catch (x) {
Return false
}
} :
isFunction = function (fn) { return toString.call(fn) === '[object Function]'; };
})(),
//The first parameter represents the array to be looped, and the second parameter is the function executed each time through the loop
If (arguments.length < 2 || !isFunction(arguments[1])) return;
//Why is slice invalid? ?
var list = toSlice.call(arguments[0]),
fn = arguments[1],
item;
while ((item = list.shift())) {//No direct determination of length, speed up
// Why use call here, and Apply is not okay?
// Done - the second parameter of apply must be an array object (there is no verification whether array-like is possible, and call does not have this requirement)
//apply is described as follows: If argArray (the second parameter) is not a valid array or is not an arguments object, a TypeError will be caused.
fn.call(window, item);
}
},
inArray = function () { //Detect whether the array contains an item and return the index of the item
// Pre-compilation
return isIndexOf ? function (array, elem, i) {
If (array)
return isIndexOf.call(array, elem, i);
return -1;
} : function (elem, array, i) {
var len;
if (array) {
len = array.length;
i = i ? i < 0 ? Math.max(0, len i) : i : 0;
for (; i < len; i ) {
if (i in array && array[i] === elem) {
return i;
}
}
}
return -1;
}
}();
var Callbacks = function (option) {
option = toString.call(option) === '[object Object]' ? option: {};
//Use closures because each new callbacks has its own state
var list = [], var list = [], var list =
_list = [], // If this callbacks object is locked, clear the list and put the original list into _list
haven have been been been executed
firingStart, //Function index (starting point) executed by the current callback function list
firingLength, // Array length of the callback function
.
// The usage of this variable is very strange and sharp, it not only contains the flag of whether to specify execution, but also records the data
//This auto is simply crazy when used with once: [For the first time] it will be automatically executed after executing fire. With once, it can be done: once executed, no code will be appended or executed later, ensuring the stability and stability of a set of callback data. Safe
stack = !option.once && [], //A callbacks stack. If the callback array is currently being executed and a new callback function is added during execution, then the new callback function will be pushed into the callback array. Stack
firing = false, //Whether callbacks are working/executing
//Trigger callback function
fire = function (data) {
//Note that this data is an array. If auto mode is configured, auto will never be false because auto will be an array
auto = option.auto && data; //Here, if the configuration requires memorizing the last parameter, then remember this parameter (very sharp usage, directly fetch the data)
fired = true;
firingIndex = firingStart || 0;
firingStart = 0;//Clear firingStart (if you don’t clear it, there will be problems in the next execution)
Firinglength = list.length; // cache list length, the outside world can access
firing = true; // Executing callback function
for (; firingIndex < firingLength; firingIndex ) {
If (list[firingIndex].apply(data[0], data[1]) === false) {
// Note, if option.auto (automatic execution) is configured, and there is a function in the stack (stack), then there is a section of code in the add() code that will directly execute this method for auto judgment
//We want to block that code, so set auto to false
auto = false;
break;
}//When the function returns false, terminate the execution of the subsequent queue
}
firing = false; // Flag status has been executed callback function [the function in the stack (stack) has not yet been executed]
//If this stack is not configured once, it must be [], so there must be
//The main function here is that if once is not configured, the following code will be intercepted. If once is configured, the data will be cleared after executing the code
if (stack) {
If (stack.length) // First intercept the code of the listing state below, and then determine whether there is a stack
Fire (stack.shift ()); // Take it out of the head of the stack and recurs the FIRE () method
}
Else if (auto) // code came here, proves that it has been configured Option.once (only once executed), so the list is clear
list = [];
Else // proves that there is no configuration AUTO, but ONCE is configured, so the sacrifice is the ultimate Dafa, and the callbacks object is directly abolished
self.disable();
};
var self = {
add: function () {//Add a callback function
if (list) {
var start = list.length;
(function addCallback(args) {
each(args, function (item) {
If (isFunction(item)) {//If it is a function, push the callback list
//Note that typeof and Object.prototype.toString are different
} else if (toString.call(item) === '[object Array]') {//If it is an array, recursively push into the callback list, this judgment abandons array-like
addCallback(item);
}
});
})(arguments);
}
If (firing)//If a callback function is currently executing, then the length of the current callback function list needs to be updated, otherwise the newly pushed callback function will be passed over.
firingLength = list.length;
else if (auto) {//If the callback function is not currently executed and automatic execution is required
// Note that the value is assigned to firingStart. The fire method above is using firingIndex. This will not affect the execution line of the above code
firingStart = start;
//Execute our newly added partners
fire(auto);
}
return this;
},
fire: function () {//Trigger callback function
self.fireWith(this, arguments);
return this;
},
fireWith: function (context, args) {//Trigger the callback function and specify the context
//If once is configured, stack will be undefined, and once needs to be guaranteed to be executed only once, so once executed once, the code here will not be executed again
If (list && (!fired || stack)) {
//Correction parameters
//Here, the context index is 0
//The parameter list index is 2
// Converting to array access is because object representation consumes more resources. There is auto [memory parameters, automatic execution] function in the top-level fire() code. If objects are used, more memory will be consumed
args = [context,
args.slice && args.slice()
];
fire(args);
}
return this;
},
remove: function () {//Remove a callback function
if (list) {
each(arguments, function (item) {
var index;
// There may be multiple items, the index can represent the search range in the loop, and the previously searched items do not need to be searched again
While ((index = inArray(item, list, index)) > -1) {
list.splice(index, 1);
If (firing) {
//Ensure that the function list being executed in fire above can run correctly. These global variables are set in fire so that they can be removed asynchronously
If (index <= firingLength)//Correction length
firingLength--;
If (index <= firingLength)//Correction index
firingIndex--;
}
}
});
}
return this;
},
Has: function (fn) {//Whether it contains a callback function
return fn ? inArray(fn, list) > -1 : list && list.length;
},
empty: function () {//Empty this callbacks object
list = [];
firingLength = 0;
return this;
},
disable: function () {//Destroy this callbacks object, and the subsequent callback function list will no longer be executed
list = stack = auto = undefined;
return this;
},
disabled: function () {//Whether it has been disabled
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
