Development examples of components in JS

An example of a component development:

Source: http://www.cnblogs.com/uedqd/archive/2013/02/23/2923099.html

First on the code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">. Tabs input.active{background:red;}. Tabs div{width:200px; height:200px; border:1px #000solid; display:none;}</style><script type= "Text/javascript" src= "Jquery-2.1.4.min.js" ></script><script>$(function(){    varT1 =NewCreatetab (); T1.init ({ID:' Div1 '    }); vart2 =NewCreatetab (); T2.init ({ID:' Div2 ', Events:' MouseOver '    }); varT3 =NewCreatetab (); T3.init ({ID:' Div3 ', Events:' MouseOver ', Delay:300    }); $(' #input1 '). Click (function() {T3.select (2);    Alert (T3.currentcontent ());        }); varT4 =NewCreatetab (); T4.init ({ID:' Div4 ', Events:' Click '    }); $ (T4). On (' Tobeforechange ',function(){//Use on Bind event, use on Bind event after jquery1.8, substitute bind method, dismiss event using offalert (t4.currentcontent ());    }); $ (T4). On (' Tochange ',function(){        //alert (t4.currentcontent ());alert (T4.currenttitle ());        }); $.extend (createtab.prototype,{//plug-in extensionCurrenttitle:function(){            return$( This. ID). Find (' input '). EQ ( This. Inow). Val ();            }    }); });functionCreatetab () {//Component Development     This. ID =NULL;//Constructor Setting Properties     This. Ainput =NULL;  This. Adiv =NULL;  This. Inow = 0;  This. defaults ={events:' Click ', Delay:0    };} Createtab.prototype= {//prototype methods define methods that can be inheritedInit:function(options) {varthis = This;//The This (instance Object T1,t2 ...) of the current scope. Given this, when called below within another function, the value of this changeOptions = $.extend ( This. defaults,options);//extend the contents of the options object to cover the contents of the This.defaults, events and delay have an initial value         //Console.log (this); Output ID is null for object T1,t2 ...         This. id = ' # ' +options.id; //Console.log (this); ID is the corresponding value$( This. ID). Find (' input '). On (Options.events,function(){            varobj = This;//refers to the INPUT element            if(options.events== ' mouseover ' && options.delay) {//when event events are mouseover and there is delayObj.timer = SetTimeout (function() {this.change (obj); //equivalent to T1.change,t2.change .... The following change method implements the TAB function},options.delay); $ (obj). Mouseout (function() {cleartimeout (Obj.timer);            }); }            Else{this.change (obj);    }                    }); }, change:function(obj) {$ ( This). Trigger (' Tobeforechange ');//trigger event with on binding above        //Console.log (this); Output ID has value$( This. ID). Find (' input '). attr (' class ', ' "); $( This. ID). Find (' div '). css (' Display ', ' none ')); $ (obj). attr (' Class ', ' active '); $( This. ID). Find (' div '). EQ ($ (obj). index ()). CSS (' Display ', ' block ');//index () returns the ordinal of the DOM or Jqeury element                 This. Inow =$ (obj). index (); $( This). Trigger (' Tochange '); }, select:function(Index) {$ ( This. ID). Find (' input '). attr (' class ', ' "); $( This. ID). Find (' div '). css (' Display ', ' none ')); $( This. ID). Find (' input '). EQ (index). attr (' class ', ' active '); $( This. ID). Find (' div '). EQ (index). CSS (' Display ', ' block ');  This. Inow =index; }, Currentcontent:function(){        return$( This. ID). Find (' div '). EQ ( This. Inow). html (); }};</script>
There are several parts:
1Init:function(options) {2         varthis = This;//The This (instance Object T1,t2 ...) of the current scope. Given this, when called below within another function, the value of this change3Options = $.extend ( This. defaults,options);//extend the contents of the options object to cover the contents of the This.defaults, events and delay have an initial value4          //Console.log (this); Output ID is null for object T1,t2 ...5          This. id = ' # ' +options.id;6           //Console.log (this); ID is the corresponding value7$( This. ID). Find (' input '). On (Options.events,function(){8             varobj = This;//refers to the INPUT element9             if(options.events== ' mouseover ' && options.delay) {//when event events are mouseover and there is delayTenObj.timer = SetTimeout (function(){ OneThis.change (obj);//equivalent to T1.change,t2.change .... The following change method implements the TAB function A},options.delay);
The Init method passes parameters to the object
1, the 2nd line, the value of this is given this, prevent the value of this in the following function to change, by adding console.log in the line to observe the value of this, we know:
The 5th line assigns a value to an object without an ID, prints out the result, and discovers that the ID is not NULL:
2, line 8th, the value of this is the input element, because of the scope of the problem, this can still be used in its child functions, and here the This ID is not NULL, call method change
1 function (obj) {2         3         $ (this). Trigger (' Tobeforechange ');              // trigger event with on binding above 4         // Console.log (this);            The output ID has a value of 5         $ (this. id). Find (' input '). attr (' class ', ');  6         $ (this. id). Find (' div '). css (' Display ', ' none ');
The This in the change method points to an instance of the object, and the T1,t2....,init method has passed parameters to the object, and the method obtains the object with the ID value:
$.extend (createtab.prototype,{   // plugin extension        function() {            return $ (this. Inow). Val ();        }    });     /* createtab.prototype.currenttitle= function () {        return $ (this.id). Find ("input"). EQ (This.inow). Val ();    } */
The plug-in extension section example uses the JQuery method, or you can use the source JS in the comments to add the prototype method
Development examples of components in JS