JavaScript Object chain operation code (jquery) _ js object-oriented

Source: Internet
Author: User
Since jQuery is used, the chain operations on it are very dependent, so that it is often difficult to use other libraries .. Although jQuery's use is gradually reduced (it is still used in projects, and the efficiency is high. I usually don't need it). I hope to reduce the dependence on jQuery.
However, this chain operation method is really attractive (it seems that many new databases have adopted chain operations ).
The newbie is fearless, so he wrote the following code. It is mainly to avoid forgetting it later.

The Code is as follows:


Window. k = function (){
Return new k. fn. init (arguments );
}
K. fn = k. prototype = {
Init: function (){
This. length = 0;
// Var args = Array. prototype. slice. call (arguments, 0 );
Array. prototype. push. apply (this, arguments [0]);
Return this;
},
Show: function (){
Console. log (Array. prototype. slice. call (this, 0). join ("$ "));
Return this;
},
Hide: function (){
Console. log (this );
Return this;
}
}
K. fn. init. prototype = k. fn;
Console. log (k ("0", 1, 2, 3, 4, 5). show (). hide ());


This is just a chain operation. But under firbug, we can see that the returned jQuery object is an array/class array. I don't know how to implement this ..
K. fn. prototype = new Array () is not allowed. It seems a little tiring to look at jQuery source code ..
Below are some replies for netizens
In fact, the chain operation is very simple, that is, every time the operation object itself is returned, so that all methods defined by the object can be continuously called.
The simplest example:

The Code is as follows:


Var o = function (){
/**
Do something
*/
Return this;
}
O. prototype = {
Action1: function (){
/**
Do something
*/
Return this;
},
Action2: function (){
/**
Do something
*/
Return this;
}
}


You can call:
New o ()//
. Action1 ()//
. Action2 (); // each operation returns an instantiated o object.
It is actually equivalent to the following:
Var a = new o (); // if this is not returned, the call cannot be continued here. Because undefined is returned.
A. action1 (); // at this time, you can only operate on a (reference of the instantiated o object.
A. action2 ();
If you have used jQuery, You should have discovered it. JQuery does not require you to use new to instantiate an object. It is more convenient to use.
So we define another object to encapsulate the above mentioned o object:
Var k = function (){
Return new o ();
}
In this way, we can call:
K (). action1 (). action2 ();
I recommend a method called "function-based" to construct JS.

The Code is as follows:


// Bold to emphasize
// This method is fully functional on page 52nd of the essence of javascript language.
Var constructor = function (spec, my ){
Var that, other private instance variables;
My = my | {};
Add shared variables and functions to my
That = a new object
Privileged method added to that
Return that;
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.