JS Inheritance Method

First, paste the DC object. Create (), which is the key to understanding how JavaScript creates an object. As follows:

if (!Object.create) {    /**    * @ref https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/create    */    Object.create = function (o) {        if (arguments.length > 1) {            throw new Error('Object.create implementation only accepts the first parameter.');        }        function F() { }        F.prototype = o;        return new F();    };}

Then, paste the $. Define/$. Mix I wrote. As follows:

/*** Define a class and make it inherit from a parent class. * @ Param {function/[]/object} refers to the fatherclass parent class function * @ Param {function} classbody subclass function * @ Param {object} ARGs constructor parameter, currently only single parameter */$. define = function (fatherclass, classbody, argS) {If (fatherclass instanceof array) {return $. mix. apply (this, arguments);} // if it is inherited from an object, a virtual parent class is assigned. Classbody. Prototype = fatherclass = object? Function () {This. constructor = function () {}}: fatherclass. Prototype; VaR _ Pro = ARGs? New classbody (ARGs): New classbody; If (_ Pro. constructor) {_ Pro. constructor. prototype = _ Pro; return _ Pro. constructor;} else {function f () {}// the constructor is not provided and an empty constructor is set. F. prototype = _ Pro; return F ;}/ *** For details, see: * js oo inheritance and polymorphism method: http://blog.csdn.net/zhangxin09/article/details/6226279* mechanisms and features behind four types of ext JS (I) "parent @ Param {function []} _ class parent class * @ Param {object} sub subclass * @ Param {array} ARGs optional parameter list */$. mix = function (fatherclasses, classbody, argS) {VaR _ Pro = ARGs? New classbody (ARGs): New classbody; _ Pro. constructor. prototype = _ Pro; For (VaR _ fatherclass, _ newsubclass, I = 0, j = fatherclasses. length; I <j; I ++) {fatherclasses [I]. prototype. constructor. call (_ Pro);} return _ Pro. constructor ;}

There are two main points to understand:

• Prototype = new function. The object prototype must be written in the form of "Object/function;
• Constructor is written under the same closure. After prototype is added, use its constructor: function as the constructor and assign the class to return the constructor.

For example, a component is written as follows:

$. Component = function () {}/*** @ Param {object} defaultcfg * @ return {object} */$. component. loadcfg = function (defaultcfg, instancecfg) {instancecfg = instancecfg | new object; // create a configuration container for (var I in defaultcfg) {If (! Instancecfg [I]) {instancecfg [I] = defaultcfg [I]; // read the default value} return instancecfg;} $. component. prototype = new function () {var getel = document. getelementbyid; this. getel =$ $. component. getel = function (CFG) {var El; If (CFG instanceof htmlelement) {El = CFG;} else if (typeof CFG = 'string ') {El = getel (CFG);} else if (CFG. el | cfg. container) {return arguments. callee (CFG. el | cfg. container);} If (! El) {console. dir (CFG); throw' has no specified element! ';} Return El ;}}/*** @ Class $. DHTML. expandbox * is a foldable container. The structure is as follows: * <container> * <p> * </P> * <mask> </mask> * </container> */$. DHTML. expandbox =$ $. define ($. component, function () {This. constructor = function (EL) {This. container = el. container; // P that is, the contetnt area is required. // The mask is optional, depending on whether you have configured mask tagthis in HTML. mask = This. container. queryselector ('. x-contmask '); this. el = El; this. BTN = el. tooglebtn; If (! This. BTN) {throw' cannot find the button! ';} This. init ();} This. showmoretext = "show more"; this. closetext = 'start'; this. init = function () {This. P = This. container. queryselector ('P'); If (! This. p) {throw' the body content is required. Set the element! ';} This. colheight = This. P. clientheight;/* The 80 here is the same as the CSS setting */If (! This. colheight) {throw' cannot obtain the original height ';} This. BTN. onclk (togglehandler. BIND (this); this. el. togglehandler & this. BTN. onclk (this. el. togglehandler. BIND (this);} var fxfn =$ $. DHTML. FX. slide; var dtime = 150; function togglehandler (e) {var BTN = E. currenttarget; If (BTN. innerhtml = This. closetext) {// fxfn (this. p, 'height', this. p. scrollheight, this. colheight, dtime); move (this. p, this. p. scrollheight, this. colheight); BTN. innerhtml = This. showmoretext; this. mask & this. mask. addclass ('x-contmask_bg '); this. currentstate = 'closed ';} else {// fxfn (this. p, 'height', this. colheight, this. p. scrollheight, dtime); move (this. p, this. colheight, this. p. scrollheight); BTN. innerhtml = This. closetext; this. currentstate = 'opened'; this. mask & this. mask. removeclass ('x-contmask_bg ');}} /*** easing formula * @ Param {element} el * @ Param {number} s initial value * @ Param {number} V target value */function move (El, S, v) {var style = el. style; function FX () {// debugger; // console. log (V);/* is used to save the last left mark */var old = style. height | S | 0; var x = Window. parseint (old); style. height = x + 0.800 * (V-x) + 'px ';/* clear the timer */If (style. height = old) window. clearinterval (SI);} var Si = Window. setinterval (FX, 20 );}});