Prototype.js Source Code Interpretation (01)

prototype.jsis a design of very elegant and practical value of the js base Class library, its source code is very worthy of study. Studying its source code can not only improve personal level, but also help you to lay a solid js foundation. Because of my limited technical level, this interpretation is for reference only.

Defines the global object prototype, including the attribute version number, and the definition of the property version number to facilitate the detection of the version number9 var Prototype = {10 Version:  ' 1.5.0 ', 11 browserfeatures: {12 XPath:!! document.evaluate 13}, 14 15 scriptfragment: 16 emptyfunction: function () {}, 17 K: function (x) {return x} 18};          

evaluate()method is used to evaluate an XPath expression.

ScriptFragmentis a regular expression used to capture the markup in a string <script> and its contents

emptyFunction: Is an empty function, which is often useful in the back

K: Returns the function of the parameter itself, followed by an application

20  var Class = {21      create: function() {22 return function() {23 this.initialize.apply(this, arguments);24 }25 }26 };

A literal method defines a Class class that can be used to create a class. Classes created with this pattern can implement constructors. Note that this Class is capitalized, so it is js not a reserved word, nor is it a constructor.

creat()Method: Property create is a method that returns a constructor.

General use is as follows:

   var X = Class.create();    

The returned constructor executes the initialize method named, and the method is not defined at this time initialize .

  28 var Abstract = new object ();  Something that represents a namespace or abstract class 29 30  Object.extend = function ( Destination, source) {31 for (var Property in source) {32 destination[property] = Source[property ]; //copy all properties of source to Destination33} return destination;< span>                

AbstractThe definition is more about keeping the namespace clear, that is, we can add a Abstract new object definition to the object instance. Objectis actually a function, he does not have any members, so is an empty class, so there is Abstract no member.

The Object.extend(destination, source) inheritance is implemented through a static function js .

var a = new ObjectA(), b = new ObjectB();var c = a.extend(b);

At this point, c the object owns both a b the properties and methods of the object. But unlike multiple inheritance, it c instanceof ObjectB returnsfalse

37Object.extend (Object, {Inspect:function(object) {A static method that passes in an object that returns a string representation of the object39try {40if (object = = =UndefinedReturn' Undefined ';Handling undefined situations41if (object = = =NullReturn' NULL ';Handling NULL Cases42Return object.inspect? Object.inspect ():Object.ToString ();44}catch (e) {45if (EinstanceofRangeerror)Return‘...‘;Handling Exception conditions46Throw e;47}48},The keys:function(object) {A static method that passes in an object that returns all of the properties of the object, constituting the array returned50var keys = [];Define an empty array to hold the data51for (var propertyIn object)Keys.push (property);Press each property into an array53return keys;54},55Values:function//ibid 57 var values = []; 58 for (var property in object" 59 Values.push (Object[property]); return values; },6263 clone: function (object) {//a static method, passing in an object, cloning a new object and returning 64 return Object.extend ({}, object); 65} 66})             

PrototypeObjectthe extension of a class is mainly achieved through static functions Object.extend . The inspect main thing is to convert the object to a string to do a check, using the try…catch statement. In the trinocular operator, if the object defines a inspect method (True), the method is called to return ( object.inspect() ), otherwise the value of the object is returned toString() .

Function.prototype.bind = function() {    var __method = this, args = $A(arguments), object = args.shift(); return function() { return __method.apply(object, args.concat($A(arguments))); }}

To bind a function to an object to run, you can add parameters at the time of binding, for example:

var obj1={p:"obj1"};var obj2={        p:"obj2",        method:function(args){ alert(args+this.p); }}obj2.method("this is ");//显示“this is obj2”；obj2.method.bind(obj1,"now this is ");//显示“now this is obj1”；

Function.prototype.bindAsEventListener = function(object) {    var __method = this, args = $A(arguments), object = args.shift(); return function(event) { return __method.apply(object, [( event || window.event)].concat(args).concat($A(arguments))); }}

And the bind same, but this method is generally used html for event handling of control objects. So to pass the event object
Assuming there are nodes node1 , then:

node1.onclick=function(){        clickHandler.bindAsEventListener(this)(event||window.event);}

All numeric types are instances of Number classes, and here are Number some ways to define a class:

Object.extend (Number.prototype, {/* Convert a number to the form of a color */Tocolorpart:function() {var digits = this.tostring (16); Span class= "Hljs-keyword" >if (this < 16) return  ' 0 ' + digits; return digits;}, SUCC: function  () {return this + 1; }, Times: function (iterator) {$R (0, this, true). each (iterator); Span class= "Hljs-keyword" >return this;});        

Prototype.js Source code interpretation ()