When looking for how to design a Javascript API, I discovered the method chain, which seems to be very powerful and interesting, and this thing is also something we often see in the past. .
Javascript Method Chaining
There is an explanation on Wikipedia:
The code copy is as follows:
Method chaining, also known as named parameter idiom, is a common syntax for invoking multiple method calls in object-oriented programming languages. Each method returns an object, allowing the calls to 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 used the translation tool to translate:
The code copy is as follows:
Method chains, also known as named parameter method, are the common syntax for calling multiple methods in object-oriented programming languages. Each method returns an object that allows the phone to be connected together in a single declaration. Links are syntactic sugar, eliminating the need for intermediate variables. Method chains are also called train wrecks because methods occur one after another and more than one method locks even if newlines are usually added between methods.
Method Chaining Use
It is estimated that the one that uses the most method chain should be jQuery.
The code copy is as follows:
// chaining
$("#person").slideDown('slow')
.addClass('grouped')
.css('margin-left', '11px');
We can call this using this usage. jQuery relies heavily on links. This makes it easy to call several methods the same choice. This also makes the code clearer and prevents the same choice from being executed several times (improving performance). When there is no method chain, it looks like the following
The code copy is as follows:
var p = $('#person');
p.slideDown('slow');
p.addClass('grouped');
p.css('margin-left', '11px');
It looks very similar to the builder in the design pattern. The difference is that p here is a method, not a class.
Javascript method chain example
When we talked about Javascript higher-order functions before, we talked about print('Hello')('World'), and the result of this usage may become like this.
The code copy 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 online, but it was also the way I wrote a chain call last time. Looks weak.
The code copy is as follows:
var func = (function() {
return{
add: function () {
console.log('1');
return{
result: function () {
console.log('2');
}
}
}
}
})();
func.add().result();
In fact, there should be a return this in each function, so there is:
The code copy 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 put the last two sentences
The code copy is as follows:
var func = new Func();
func.add().result();
become
The code copy is as follows:
new Func().add().result();
other
Finally as a small comparison of a confusing place:
Method Chaining VS prototype Chaining
The prototype chain and the method chain are similar in some aspects, but the difference may be that
1. Prototype chain requires prototype
2. Method chain is the method