Javascript MVC -- class

Original article: http://javascriptmvc.com/docs.html#&who=jQuery.Class

Liu guixue, liuguixue@gmail.com)

 

The class library can simulate inheritance in Javascript, and the class can be used for object-oriented programming, which is different from jquery functional programming. The implementation of class is based on John resig's "simple class" inherited library. In addition to implementing inheritance, the Class Library also includes some important features:

• Static inheritance
• Introspection
• Namespace
• Setup and init Methods
• Easily created callback Functions

Static and prototype)

Before learning the class library, we need to first understand the static and prototype attributes of the class;

// Static <br/> myclass. staticproperty // shared property </P> <p> // prototype <br/> myclass = new myclass () <br/> myclass. prototypemethod () // instance method 

 

A static (or class) attribute belongs to the class constructor and can be shared by all such instances. The prototype attribute belongs to only the respective instances.

 

Basic Class

Next we will create a class named (convenient for introspection) and add some static and prototype members. Every time a monster instance is created, the static (attribute) Counter is added.

$.Class.extend('Monster',/* @static */{  count: 0},/* @prototype */{  init: function( name ) {     // saves name on the monster instance    this.name = name;     // sets the health    this.health = 10;     // increments count    this.Class.count++;  },  eat: function( smallChildren ){    this.health += smallChildren;  },  fight: function() {    this.health -= 2;  }}); hydra = new Monster('hydra'); dragon = new Monster('dragon'); hydra.name        // -> hydraMonster.count     // -> 2Monster.shortName // -> 'Monster' hydra.eat(2);     // health = 12 dragon.fight();   // health = 8

 

Note: When a new monster instance is created, the prototype function init is automatically executed.

 

Inheritance

When a class is inherited, all static and prototype attributes are available in the subclass. If you want to overwrite a function, you can use this. _ super to call the base class. Let's create a class, seamonster eats less (EAT), but fight is more powerful.

Monster.extend("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 also inherit static attributes using the following methods:

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

 

Namespace

Namespace is a great idea. We encourage you to use namespace in your code, which allows your code to be easily transplanted to other applications (to avoid name conflicts ). It is very easy to create a class with a namespace:

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

Introspection

Generally, when creating a class, the class name is helpful for Some deterministic (determine) functions. Ruby on Rails's activerecord ORM class is a very typical example. However, JavaScript does not support specifying object names, so developers need to provide a name. The class library determines the accepted string as the class name.

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

Fullname (with namespace) and shortname (without namespace) are added as static attributes of the class.

 

Loading and initialization Methods

The Class Library provides static and prototype initialization functions, namely setup and init. Setup is called before init, and can be used to standardize init parameters.

Tip: Normally, you do not need the setup function and use init instead. On the contrary, the setup function is suitable for complex preprocessing of classes before init is called.

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

Setup

Before calling the init function, the setup function is static.
Setup functions are passed the base class followed by arguments passed to
Extend function. Prototype static functions are passed the class Constructor
Function arguments.

If the setup function returns an array, the array will be used as a parameter of the init function, so that the setup function can pass in the init parameter in a standardized manner, which is also the most common usage of setup.

Next, we will describe how to use jquery. Controller. setup to ensure that the init parameter is an HTML element, but the init parameter cannot be extended.

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

Init

The init function is called after the setup function. Normally, they receive the same parameters from the setup function. The example of calling the init function of the foo class is as follows:

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

Callback

Similar to jquery's proxy method, the class first provides a callback function, and its return will be called back to the class or instance function.

In the following example, this. Callback is used to ensure that this. Name is available in show:

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

 

Callback functions are available in both static and prototype functions.