Interpretation of rightjs Inheritance Mechanism 1

The emergence of the Inheritance Mechanism indicates that JavaScript has reached the threshold for large-scale development. For Java, the design pattern should be put into perfection in order to be industrialized! What can force JavaScript code to reach thousands or even tens of thousands of lines? In addition to all the auxiliary tools of the framework class libraries, This is the luxury entertainment of games. The optical display interface, operation interface, and evaluation system can also be subdivided. Another feature, like Ext, that uses pure JavaScript to replace HTML and CSS, to develop web pages is also very huge. The huge things need to be modularized. Although every module may not be a type, classes are an indispensable component. Because JavaScript aims to achieve webpage interaction, most of these classes contain content that operates DOM elements, such as generating a node and inserting it somewhere in the DOM tree, set its style, bind events to it, delete it ...... All these. If many operations exist as class methods, it is more appropriate to name them better. In terms of association of various classes, the famous observer model is more attractive than the event mechanism provided by the browser, at least better in terms of module decoupling. For example, the following code involves three modules:

        this.keyboard        .onLayoutChange(this.progress.setLayout.bind(this.progress))        .onKeyPress(this.field.keyPressed.bind(this.field));

When the appearance of the keyboard changes, the progress bar also changes. When a key is pressed, the display area responds accordingly. In the dark, the last operation will trigger another operation:

keyPressed: function(key_code) {    var element = this.pullElement(key_code);        if (element) {      element.droppinFx.cancel();      element.highlight('#AFA', {        duration: 160, onFinish: element.remove.bind(element)      });            this.fire('hit', element.innerHTML);//★★★★    }  },

But it is difficult to use jquery to simulate it:

    this.settings.layouts.change(function(){        var layout = $(this).val();        var keynames = ths.keyboard.setLayout(layout);        ths.progress.setLayout(keynames)    });

The second onkeypress is not a real event, but is implemented through callback of other events.

Hightlightkey: function (event) {var key = This. Keys [event. charcode] | this. Keys [event. keycode]; If (key) {If (! Event. altkey &&! Event. ctrlkey &&! Event. metakey) {event. stop (); key. highlight ({Duration: 160}); this. fire ('key _ Press', event. charcode | event. keycode); // here is onkeypress }}},

However, this is not an element node. The event mechanism is powerless and the observer mode must be introduced. If we really need this design, we need the existence of the class, at least in the Observer mode, we need to have the Publisher Object and the subscriber object. Mootools is available because it provides a powerful Inheritance mechanism to implement more complex programming. Complicated things like ext are even more difficult. Although rightjs is not as well-known as the Framework Class Library mentioned above, its authors certainly have absorbed their advantages. Its Inheritance Mechanism is far more complex and powerful than its predecessors, which is why I want to learn about it.

VaR class = function () {// processing parameter. Generally, there are two parameters. The first is the parent class, and the second is the object property package var ARGs = $ A (arguments ), properties = args. pop () | |{}, parent = args. pop (); // basic class object definition // defines the subclass function Klass () {return this. initialize? This. Initialize. Apply (this, arguments): This ;}; // if only the parent class if (! Args. Length &&! Ishash (properties) {parent = properties; properties = {};}// add some class methods for the subclass and inherit from the parent class $ ext (Klass, class. methods ). inherit (parent); // catching the injections // extend and include methods for special processing attribute packages $ W ('extend include '). each (function (name) {If (properties [name]) {var modules = properties [name]; Klass [name]. apply (Klass, isarray (modules )? Modules: [modules]); Delete (properties [name]) ;}}); // other methods or properties mixed into the attribute package return Klass. Include (properties );};

It looks similar to prototypejs, and there is no way for a hero to look at it. Everyone loves to improve with the implementation of Alex Arnell. There is a $ ext method:

// It is the extend of prototype. The third parameter is added, as if the function $ ext (DEST, SRC, dont_overwrite) of ext is used) {// usually undefined var src = SRC | {}, key; For (key in SRC) if (dont_overwrite! = True | typeof (Dest [Key]) = 'undefined') // if true, check whether the target object already exists, if yes, Dest [Key] = SRC [Key]; return DEST;}; is not added ;};

In the impression, the method name defined at the beginning of $ rarely appeared in the early prototypejs framework. There were only a few. Since it was copied to mootools, mootools has carried it forward, which in turn affected prototypejs. I hate this naming method. Does it really regard itself as PHP ?!

There is an ishash method in it to check whether it is a JavaScript Object, but it is not as good as jquery's isplainobject

Ishash = function (value) {return to_s.call (value) = '[object]' ;}; // in IE, DOM objects such as element nodes may not be recognized, therefore, we need to further process if (ishash(document.doc umentelement) {// Firefox [object htmlhtmlelement] ie [object] ishash = function (value) {return to_s.call (value) === '[object]' & value! = NULL & typeof (value )! = 'Undefined' & typeof (value. hasownproperty )! = 'Undefined ';};}

Jquery's isplainobject can distinguish not only DOM objects, but also custom classes.

        isPlainObject: function( obj ) {            // Must be an Object.            // Because of IE, we also have to check the presence of the constructor property.            // Make sure that DOM nodes and window objects don't pass through, as well            if ( !obj || toString.call(obj) !== "[object Object]" || obj.nodeType || obj.setInterval ) {                return false;            }            // Not own constructor property must be Object            if ( obj.constructor                && !hasOwnProperty.call(obj, "constructor")                && !hasOwnProperty.call(obj.constructor.prototype, "isPrototypeOf") ) {                return false;            }            // Own properties are enumerated firstly, so to speed up,            // if last one is own, then all properties are own.            var key;            for ( key in obj ) {}            return key === undefined || hasOwnProperty.call( obj, key );        },

The next section describes its class. Methods method. It adds many static methods to the subclass to continue the following operations.