Implementation of JS chained call

Chain call
Chained call is actually just a syntax trick. It allows you to reuse an initial operation to express complex operations with a small amount of code. This technology includes two parts:

A factory that creates an object that represents an HTML element.

A batch of methods to perform certain operations on this HTML element.

Call chain structure
$ The function is responsible for creating objects that support chained calls.

Copy codeThe Code is as follows: (function (){
/*
* Create a private class
* @ Param {Object} els arguments an array of classes composed of all parameters
*/
Function _ $ (els ){
This. elements = []; // stores HTML elements.
For (var I = 0, len = els. length; I <len; I ++ ){
Var element = els [I];
If (typeof element = 'string '){
Element = document. getElementById (element );
}
This. elements. push (element );
}
}
// Operations that can be performed on HTML elements
_ $. Prototype = {
Each: function (){},
SetStyle: function (){},
Show: function (){},
AddEvent: function (){},
};
// Open APIs
Window. $ = function (){
Return new _ $ (arguments );
};
})();

Because all objects inherit the attributes and methods of their prototype objects, we can let those methods defined in the prototype objects return the reference of the instance object used to call the method, in this way, you can call those methods in a chain.

Copy codeThe Code is as follows: (function (){
/*
* Create a private class
* @ Param {Object} els arguments an array of classes composed of all parameters
*/
Function _ $ (els ){
//...
}
// Operations that can be performed on HTML elements
_ $. Prototype = {
Each: function (fn) {// fn callback function
For (var I = 0; I <this. elements. length; I ++ ){
// Execute len. Each time an element elements [I] is passed as a parameter
Fn. call (this, this. elements [I]);
}
Return this;
},
SetStyle: function (prop, value ){
This. each (function (el ){
El. style [prop] = value;
});
Return this;
},
Show: function (){
Var that = this;
This. each (function (el ){
That. setStyle ('display', 'block ');
});
Return this;
},
AddEvent: function (type, fn ){
Var addHandle = function (el ){
If (document. addEventListener ){
El. addEventListener (type, fn, false );
} Else if (document. attachEvent ){
El. attachEvent ('on' + type, fn );
}
};
This. each (function (el ){
AddHandle (el );
});
Return this;
}
};
// Open APIs
Window. $ = function (){
Return new _ $ (arguments );
}

})();

// ----------------------- Test --------
$ (Window). addEvent ('load', function (){
$ ('Test-1', 'test-2'). show ()
. SetStyle ('color', 'red ')
. AddEvent ('click', function (){
$ (This). setStyle ('color', 'green ');
});
})

Obtain data using a chained call Method
Use the callback function to obtain data from methods that support chained calls. Chained call is suitable for the value assignment method, but for the value assignment method, you may want them to return the data you want instead of this (the object that calls this method ). solution: Use callback technology to return the desired data.

Copy codeThe Code is as follows: window. API = window. API | function (){
Var name = 'makexu ';
// Privileged method
This. setName = function (name0 ){
Name = name0;
Return this;
};
This. getName = function (callback ){
Callback. call (this, name );
Return this;
};
};
// ------------- Test ---
Var obj = new API ();
Obj. getName (console. log). setName ('hangsan'). getName (console. log );

Design a JS library that supports method chain calls
JS library features:

Events: add and delete event listeners, and perform planned processing on Event objects.

DOM: class name management and style management

Ajax: standardizes XMLHttpRequest

Copy codeThe Code is as follows: Function. prototype. method = function (name, fn ){
This. prototype [name] = fn;
Return this;
};
(Function (){
Function _ $ (els ){
//...
}
/*
* Events
* AddEvent
* RemoveEvent
*/
_ $. Method ('addevent', function (type, fn ){
//...
}). Method ('removeevent', function (type, fn ){

})
/*
* DOM
* AddClass
* RemoveClass
* Hover
* HasClass
* GetClass
* GetStyle
* SetStyle
*/
. Method ('addclass', function (classname ){
//...
}). Method ('removeclass ', function (classname ){
//...
}). Method ('hover ', function (newclass, oldclass ){
//...
}). Method ('hasclass', function (classname ){
//...
}). Method ('getclass', function (classname ){
//...
}). Method ('getstyle', function (prop ){
//...
}). Method ('setstyle', function (prop, val ){
//...
})
/*
* AJAX
* Ajax
*/
. Method ('ajax ', function (url, method ){
//...
});

Window. $ = function (){
Return new _ $ (arguments );
};
// Solve JS library naming conflicts
Window. installHelper = function (scope, interface ){
Scope [interface] = function (){
Return _ $ (arguments)
}
}
})();

Summary:

Chained invocation helps simplify code writing and make the code simpler and easier to read to some extent. In many cases, using a chained call can avoid repeated use of an object variable multiple times, thus reducing the amount of code. If you want to ensure that the class interfaces are consistent and that both the value assignment and the value Generator Support chain calls, you can use the callback function in the value generator to solve the problem of getting data.