JavaScript Writing Method (5)

In this article, let's take a look at the writing methods of various JS libraries. This is the last article in the writing class series.

 

1. Writing Prototype

Use the Class. create method in Prototype as follows:

View sourceprint? 01 // class name Person

02 var Person = Class. create ();

03

04 // define Person through prototype Rewriting

05 Person. prototype = {

06 initialize: function (name ){

07 this. name = name;

08 },

09 getName: function (){

10 return this. name;

11 },

12 setName: function (name ){

13 this. name = name;

14}

15}

16

17 // create an object

18 var p = new Person ("jack ");

19 console. log (p. constructor = Person); // false <BR>

Initialize initializes the object (equivalent to the constructor, essential), and the method can be written down in sequence.

There is a problem, but p. constructor = Person is false, which is a small defect in the Prototype library. The reason is that the prototype of Person is rewritten. To enable the constructor to point to the correct constructor, you only need to maintain the constructor attribute during prototype rewriting.

View sourceprint? 01 Person. prototype = {

02 constructor: Person, // note that the constructor attribute will be fixed.

03 initialize: function (name ){

04 this. name = name;

05 },

06 getName: function (){

07 return this. name;

08 },

09 setName: function (name ){

10 this. name = name;

11}

12}

 

2. Dojo Writing Method

In dojo, the dojo. declare method is used to define a class. Dojo. declare has three parameters.
Parameter 1: Class Name className
Parameter 2: inherited class superclass
Parameter 3: constructor, method props

To define a class, you only need to pass the first and third parameters. This is because we only discuss how to define a class and do not discuss inheritance.

View sourceprint? 01 // define the class name

02 var className = "Person ";

03 // define the constructor and Method

04 var proto = {

05 constructor: function (name) {this. name = name ;},

06 getName: function () {return this. name ;},

07 setName: function (name) {this. name = name ;}

08}

09

10 // define the class Person

11 dojo. declare (className, null, proto );

12

13 // create an object

14 var p = new Person ("tom ");

15 console. log (p. getName (); // tom

16 p. setName ("jack ");

17 console. log (p. getName (); // jack

18

19 // test whether instanceof and p. constructor correctly point to Person

20 console. log (p instanceof Person); // true

21 console. log (p. constructor === Person); // true

 

3. Ext Writing Method

Ext uses Ext. extend to define a class (of course, it is more used to expand a class). Various controls of Ext framework, such as Panel and MessageBox, are extended using Ext. extend. Here we only use it to define the simplest class.

Here, you only need to pass two parameters. The first parameter is the root class Object, and the second parameter is the prototype. Specifically, if a class is defined, the first parameter is always passed to the Object.

View sourceprint? 01 /**

02 * Person class

03 * @ param {Object} name

04 */

05 var Person = Ext. extend (Object ,{

06 constructor: function (name) {this. name = name ;},

07 setName: function (name) {this. name = name ;},

08 getName: function () {return this. name ;}

09 });

10

11 // create an object

12 var p = new Person ("Lily ");

13 console. log (p. getName (); // Lily

14 p. setName ("Andy ");

15 console. log (p. getName (); // Andy

16

17 // test whether instanceof and p. constructor correctly point to Person

18 console. log (p instanceof Person); // true

19 console. log (p. constructor = Person); // true

 

4. YUI Writing Method

View sourceprint? 01 // define the package name

02 YAHOO. namespace ("test ");

03

04 // define a class

05 YAHOO. test. Person = function (name ){

06 this. name = name;

07}

08 YAHOO. test. Person. prototype. setName = function (name) {this. name = name ;}

09 YAHOO. test. Person. prototype. getName = function () {return this. name ;}

10

11

12 // create an object

13 var p = new YAHOO. test. Person ("jack ");

14

15 console. log (p. getName (); // jack

16 p. setName (tom );

17 console. log (p. getName (); // tom

18

19 // test whether instanceof and p. constructor correctly point to YAHOO. test. Person

20 console. log (p instanceof YAHOO. test. Person );

21 console. log (p. constructor = YAHOO. test. Person );

We can see that besides the package name, it is no different from the original constructor + prototype method.

 

5. Writing Methods of Mootools

Mootools is designed to be a very compact, modular, and object-oriented JS library. The Class is used for writing classes in mootools. After the import, we only need to use the Class to write the Class.

View sourceprint? 01 /**

02 * Person class

03 * @ param {Object} name

04 */

05 var Person = new Class ({

06 initialize: function (name ){

07 this. name = name;

08 },

09 setName: function (name ){

10 this. name = name;

11 },

12 getName: function (){

13 return this. name;

14}

15 })

16

17 // a new object

18 var p = new Person ("jack ");

19

20 // test the set and get methods.

21 console. log (p. getName (); // jac

22 p. setName (andy );

23 console. log (p. getName (); // andy

24

25 // test whether instanceof and p. constructor correctly point to Person

26 console. log (p instanceof Person); // true

27 console. log (p. constructor = Person); // true