Introduction to Method Chaining in Javascript, javascriptchaining

Introduction to Method Chaining in Javascript, javascriptchaining

When looking for how to design a Javascript API, I found the Method Chaining. The Method chain seems very powerful and interesting, this is something we often see in the past ..

Javascript Method Chaining

On Wikipedia, the following explanation is provided:
Copy codeThe Code is as follows:
Method chaining, also known as named parameter idiom, is a common syntax for invoking multiple method callin object-oriented programming ages. each method returns an object, allowing the callto be chained together in a single statement. chaining is syntactic sugar which eliminates the need for intermediate variables. A method chain is also known as a train wreck due to the increase in the number of methods that come one after another in the same line that occurs as more methods are chained togethe even though line breaks are often added between methods.

I translated it with a translation tool:

Copy codeThe Code is as follows:
Method chain, also known as the named parameter method, is a general syntax for calling multiple methods in an object-oriented programming language. Each method returns an object that allows the phone to be connected together in a single declaration. The link is syntactic sugar, saving the need for intermediate variables. The method chain is also known as the train wreckage. Methods that occur one or more of the same lines are locked even if the line breaks, the number of methods that are usually added increases.

Use Method Chaining

The most widely used method chain in visual testing should be jQuery.
Copy codeThe Code is as follows:
// Chaining
$ ("# Person"). slideDown ('low ')
. AddClass ('grouped ')
. Css ('margin-left', '11px ');

We can use this method to call this. JQuery relies heavily on links. This makes it easy to call the same choice of several methods. This also makes the code clearer and prevents execution of the same choice several times (improves performance ). When there is no method chain, it looks like the following.
Copy codeThe Code is as follows:
Var p = $ ('# person ');
P. slideDown ('slow ');
P. addClass ('grouped ');
P.css ('margin-left', '11px ');

It looks like the builder in the design pattern. The difference is that p here is a method rather than a class.

Javascript method chain example

Before we talk about Javascript higher-order functions, we talk about print ('hello') ('World'), and the result of this usage may become like this.
Copy codeThe Code is as follows:
Function f (I ){
Return function (e ){
I + = e;
Return function (e ){
I + = e;
Return function (e ){
Alert (I + e );
};
};
};
};
F (1) (2) (3) (4); // 10

This is an example on the Internet, but it is also the last time I wrote a chain call. It looks weak.
Copy codeThe Code is as follows:
Var func = (function (){
Return {
Add: function (){
Console. log ('1 ');
Return {
Result: function (){
Console. log ('2 ');
}
}
}
}
})();

Func. add (). result ();

In fact, every function should have a return this, so there will be:
Copy codeThe Code is as follows:
Func = (function (){
This. add = function (){
Console. log ('1 ');
Return this;
};
This. result = function (){
Console. log ('2 ');
Return this;
};
Return this;
});

Var func = new Func ();
Func. add (). result ();

Of course, we can also
Copy codeThe Code is as follows:
Var func = new Func ();
Func. add (). result ();

Change
Copy codeThe Code is as follows:
New Func (). add (). result ();

Others

Finally, as a small comparison of obfuscation:

Method Chaining VS prototype Chaining

The prototype chain is similar to the method chain in some aspects. The difference may be that

1. prototype chain is a prototype
2. The method chain is the method