How to build a front-end framework that can be chained to a batch operation

It's always convenient to write code in jquery and write a lot less code. So why is that? I think there are three main reasons:

①jquery encapsulates the way to get the DOM, just a $ to easily get the DMO node you want

② chaining calls, such as you can write code like this:

$ ("#a"). Show (). Height (20);

And it doesn't have to be written.

$ ("#a"). Show (); $ ("#a"). Height (20);

The bulk operation of the ③ object. If you need to do the same for the following list

<Liclass= "List">List</Li><Liclass= "List">List</Li><Liclass= "List">List</Li><Liclass= "List">List</Li><Liclass= "List">List</Li><Liclass= "List">List</Li><Liclass= "List">List</Li><Liclass= "List">List</Li><Liclass= "List">List</Li><Liclass= "List">List</Li>

Then you need to write this:

var list = document.getelementsbyclassname ("list");  for (var i = 0, len = list.length; i < Len; i++) {    = "Modified";}

It's a lot of trouble, you're going to use a for loop. But if you write in jquery, you just need this:

$ (". List"). HTML ("modify");

So the handy way to write code, how it works behind it.

The first is to implement the $ method, according to straight line thinking, you must think that the $ method is like this:

function $ (selector) {     if(selector with #) {          return  document.getElementById ( selector);     } Else if (selector) {          return  document.getelementsbyclassname (selector);     } Else {          .................     }}

Not really, if so, it would be too simple, at best, just the document.getelement package. You can neither implement chained calls nor implement bulk operations

First complete the code, then do the analysis:

1        function_$ (ELS) {2                3              This. elements = [];4element =Document.getelementsbyclassname (ELS);5              for(vari = 0, len = element.length; i < Len; i++) {6                 This. Elements.push (Element[i]);7             }8             9        }Ten_$.prototype = { Oneeachfunction(FN) { A                  for(vari = 0, Len = This. elements.length; i < Len; ++i) { -Fn.call ( This, This. Elements[i]); -                 } the                 return  This; -            }, -Html:function(text) { -               varthat = This; +                This. each (function(EL) { -el.innerhtml =text; +               }); A               return  This; at            } -          -        }; -window.$ =function(selector) { -            return New_$ (selector); -        }; in       -       to$ ("list"). HTML ("Modify"). Hide ();

For ease of understanding, the _$ method here only implements the use of class to get DOM nodes. If you want to implement a complete, jquery-like approach to getting DOM nodes, you also need to write some regular and string operations.

Here _$ through the document.getelementsbyclassname to get to the DOM node and through push these DOM nodes into the array elements.

And most crucially, I've defined two methods on _$ 's prototype.

The first method each, the function of this method is to implement bulk operations.

It loops through every element in the array elements that we placed in the _$, and uses call to set the context of the parameter FN to this, and then pass the DOM node in each elements to FN. This results in a batch operation.

See the second method of HTML, this method is to change the contents of the DOM. You can see that the each method is used in the HTML to bulk operations. and finally return this; This makes the method of the prototype can be called chained.

So now we can write the code without relying on jquery:

$ ("list"). HTML ("modify")

On this basis you can also implement many methods, such as the ability to implement a hide () method to hide the node:

1        function_$ (ELS) {2                3              This. elements = [];4element =Document.getelementsbyclassname (ELS);5              for(vari = 0, len = element.length; i < Len; i++) {6                 This. Elements.push (Element[i]);7             }8             9        }Ten_$.prototype = { Oneeachfunction(FN) { A                  for(vari = 0, Len = This. elements.length; i < Len; ++i) { -Fn.call ( This, This. Elements[i]); -                 } the                 return  This; -            }, -Html:function(text) { -               varthat = This; +                This. each (function(EL) { -el.innerhtml =text; +               }); A               return  This; at            }, -Hidefunction() { -               varthat = This; -                This. each (function(EL) { -el.style["display"] = "None"; -               }); in               return  This; -            } to          +        }; -window.$ =function(selector) { the            return New_$ (selector); *        }; $      Panax Notoginseng       -$ ("list"). HTML ("Modify"). Hide ();

As can be seen, this article does not have a lot of code details, intended to let you understand a can be a batch operation, chained call framework of the approximate architect.

Add: jquery Easy to use There is also a very important reason, it is compatible with each browser.

How to build a front-end framework that can be chained to a batch operation