Getting started with javascriptmvc-3. jquerymx-> $. Class

$. Class simulates the inheritance implementation for Javascript. It connects jquery's function-oriented programming with object-oriented programming. $. The class is based on John resig's simple class library. Apart from prototype inheritance, it has other features: static inheritance, and introspection) namespace support, creation and initialization methods, and callback functions that are easier to create.

 

Constructor

We use the following method to Lifecycle a type:

$.Class( [NAME , STATIC,] PROTOTYPE ) -> Class

Name {optional: string}: if it is set, it will be used as the value of fullname and shortname, and the corresponding namespace will be added.

Static {optional: Object object}: If set, static attributes and methods are added to the class.

Prototype: {object}: add the attributes and methods of the prototype for the class.

When the class is created, the static setup and init methods will be executed. Instantiate a type as follows, and the setup and init methods of the prototype will be executed in this process:

new Class([args ... ]) -> instance

　　

　　Static attributes vs prototype attributes

Before learning class, it is very important to figure out the difference between static and prototype attributes. Let's look at the example:

// Static myclass. staticproperty // shared property // prototype myclass = new myclass () myclass. prototypemethod () // instance method

The static and prototype attributes here are similar to those in C #. The static and prototype attributes in Java are used, but the implementation mechanism is different. Static attributes are attributes of class objects (rather than their instances. in class, we can use this. constructor. but in traditional JavaScript programming, only class is allowed. property access is like the previous example. The prototype property is inherited from the prototype chain, or has the instance object itself.

 

　　A basic class

The following example creates a class named Monster.

$. Class ('monster',/* The static attribute is defined here */{count: 0},/* The prototype attribute is defined here */{init: function (name) {// Save the name variable to the name attribute of the Instance. This. name = Name; // set health to 10 this. health = 10; // use this. constructor. you can access static properties in XXX mode. Here, the value of the count attribute is increased from this. constructor. count ++;}, eat: function (smallchildren) {This. health + = smallchildren;}, fight: function () {This. health-= 2 ;}}); Hydra = new monster ('hybrid'); dragon = new monster ('Dragon'); Hydra. name //-> hydramonster. count //-> 2monster. shortname/shortname is $. class comes with a static property-> 'monster' Hydra. eat (2); // health = 12dragon. fight (); // health = 8

The init method in the prototype property is equivalent to the constructor, which is executed when the object is instantiated this time.

 

　　Inheritance

When a class is extended by another class, all its static and prototype attributes will be inherited. When you override a function, you can use this. _ super () to access its implementation in the parent class. Let's create a new class seamonster:

Monster("SeaMonster",{  eat: function( smallChildren ) {    this._super(smallChildren / 2);  },  fight: function() {    this.health -= 1;  }});lockNess = new SeaMonster('Lock Ness');lockNess.eat(4);   //health = 12lockNess.fight();  //health = 11

 

　　Static property inheritance

You can inherit static attributes like this:

$.Class("First",{    staticMethod: function() { return 1;}},{})First("Second",{    staticMethod: function() { return this._super()+1;}},{})Second.staticMethod() // -> 2

 

　　Namespace

Namespace is a good thing. You can use it to separate your code by function, which makes the program architecture more reasonable. It also facilitates code porting to other places without worrying about exceptions. Javascript itself does not support namespaces, so there is only one alternative. For example, we can use the singleton mode. The following is an example of using namespace in $. class:

$.Class("MyNamespace.MyClass",{},{});new MyNamespace.MyClass()

 

　　Introspection)

$. Class provides the string name self-expression function for the class. See the following example:

$.Class("MyOrg.MyClass",{},{})MyOrg.MyClass.shortName //-> 'MyClass'MyOrg.MyClass.fullName //->  'MyOrg.MyClass'

Fullname includes namespaces, while shortname does not include namespaces. They are all static attributes.

 

　　Creation and initialization Methods

$. Class provides static and prototype initialization methods to help you create classes. They are setup and init. Setup will run before init. Generally, you do not need to use it, but when you need to do some complicated work for init, for example, you can use it to initialize the parameters required by init.

$.Class("MyClass",{  setup: function() {} //static setup  init: function() {} //static constructor},{  setup: function() {} //prototype setup  init: function() {} //prototype constructor})

　　

1. Setup:

Setup is called before init. The static setup function passes the parameters of the base class to the extension class, and the prototype function passes the constructor parameters. If setup returns an array, the array will be used as a parameter of the init method. In this case, some default parameters can be passed to the init method. You can also place frequently-run code in setup. You do not need to override the setup method.

$.Class("jQuery.Controller",{  ...},{  setup: function( el, options ) {    ...    return [$(el),            $.extend(true,               this.Class.defaults,               options || {} ) ]  }})

2. init:

The init method runs after setup. They receive the result of setup as a parameter.

$.Class("Foo", {  init: function( arg1, arg2, arg3 ) {    this.sum = arg1+arg2+arg3;  }})var foo = new Foo(1,2,3);foo.sum //-> 6

 

　　Proxy

Similar to the proxy method provided by jquery, this returns a callback function, which always points to the class or class instance. In the following example, this. Proxy is used to ensure that this. Name is directed to the todo instance, so that show can get the correct value.

$.Class("Todo",{  init: function( name ) {       this.name = name   },  get: function() {    $.get("/stuff",this.proxy('show'))  },  show: function( txt ) {    alert(this.name+txt)  }})new Todo("Trash").get()