JavaScript chained calls

chaining calls to methodsstructure of the call chain

You are already familiar with the $ function. It typically returns a collection of HTML elements or an HTML element, as follows:

function$(){    varelements = [];  for(vari=0,len=arguments.length;i<len;++i) {          varelement =Arguments[i]; if(typeofelement = = ="string") {element=document.getElementById (Element); }          if(arguments.length==1){               returnelement;    } elements.push (Element); }     returnelements;}

However, if you transform this function into a constructor, save those elements as an array in an instance property, and have all the methods defined in the prototype property of the constructor function return a reference to the instance that invokes the method, then it has the ability to chain-call. I first need to change this $ function to a factory method, which is responsible for creating objects that support chained calls. This function should be able to accept parameters in the form of an array of elements so that we can use the same common interface as the original.

(function(){    //Use private class      function_$ (ELS) { This. elements = [];  for(vari=0,len=els.length;i<len;i++){            varelement =Els[i]; if(typeofelement = = ="string") {element=document.getElementById (Element); }               This. Elements.push (Element)}} //The public interface remains the same.window.$=function(){             return New_$ (arguments); }})();

Since all objects inherit the properties and methods of their prototype objects, we can let the several methods defined in the prototype object return references to the instance objects that are used to invoke the method, so that those methods can be chained. Think about it, we'll do it now. Add a method to the prototype object of the private constructor in order to implement a chained call _$

(function(){    //Use private class    function_$ (ELS) {//.. Omit the previous code above} _$.prototype={each:function(FN) { for(vari=0,len= This. elements.length;i<len;i++) {Fn.call ( This, This. Elements[i]); }            return  This; }, Show:function(prop,val) {varthat = This;  This. each (function(EL) {That.setstyle ("Display", "block");            }); return  This; }, Addevent:function(TYPE,FN) {varAdd =function(EL) {if(Window.addeventlistener) {El.addeventlistener (TYPE,FN,false); }Else if(window.attachevent) {el.attachevent ("On" +TYPE,FN);            }           };  This. each (function(EL) {Add (EL);            }); return  This;    }    }; //The public interface remains the same.window.$=function(){        return New_$ (arguments); }})();

But if a library or framework has already defined a $ function, then our library will rewrite it, and there is an easy way to get a name for the $ function in the source code. But if you get the source from an existing library, you have to change the name every time the code base gets the updated version, so this is not a good solution. The good solution is to add an installer as follows:

function (Scope, interface) {    function() {      returnnew  _$ (arguments) ;    }  };

Users can use this to:

Installhelper (window, ' $ '); $ (' example '). Show ();

Here is a more complex example of how to add this functionality to a pre-

JavaScript chained calls