Javascriptmvc tutorial-7. Start Using jquerymx-class

The Controller and model of jmvc inherit from $. Class. To create a new class, you need to call $. Class (name, [classproperties,] instanceproperties]), for example:

$.Class("Animal",{  breathe : function(){     console.log('breathe');   }});

In the above example, the animal instance has a breathe method. We can create a class instance like below and call the breathe method:

var man = new Animal();man.breathe();

If you want to create a subclass, you can call the base class and input the subclass name and method:

Animal("Dog",{  wag : function(){    console.log('wag');  }})var dog = new Dog;dog.wag();dog.breathe();

 

　　Instantiation

When a class instance is created, the init method is called, and the constructor parameters are used as parameters of the init method.

$.Class('Person',{  init : function(name){    this.name = name;  },  speak : function(){    return "I am "+this.name+".";  }});var payal = new Person("Payal");assertEqual( payal.speak() ,  'I am Payal.' );

 

　　Access Base Methods

You can use this to access the base class. _ super. In the following example, classyperson is inherited from person. He overwrites the person's speak method and uses this. _ super () can access the Speak implementation in person.

Person("ClassyPerson", {  speak : function(){    return "Salutations, "+this._super();  }});var fancypants = new ClassyPerson("Mr. Fancy");assertEquals( fancypants.speak() , 'Salutations, I am Mr. Fancy.')

 

　　Proxy

The callback method of class is similar to $. Proxy. This value of the internal function points to the class instance itself.

$.Class("Clicky",{  init : function(){    this.clickCount = 0;  },  clicked: function(){    this.clickCount++;  },  listen: function(el){    el.click( this.callback('clicked') );  }})var clicky = new Clicky();clicky.listen( $('#foo') );clicky.listen( $('#bar') ) ;

 

　　Static inheritance

Class allows you to define static attributes and methods that can be inherited. The following code allows us to use person. findone (ID, success (person) obtains the person instance from the server, and then calls the success method.

$.Class("Person",{  findOne : function(id, success){    $.get('/person/'+id, function(attrs){      success( new Person( attrs ) );    },'json')  }},{  init : function(attrs){    $.extend(this, attrs)  },  speak : function(){    return "I am "+this.name+".";  }})Person.findOne(5, function(person){  assertEqual( person.speak(), "I am Payal." );})

 

　　Self-description

Class provides namespaces, including the names of classes and namespaces.

$.Class("Jupiter.Person");Jupiter.Person.shortName; //-> 'Person'Jupiter.Person.fullName;  //-> 'Jupiter.Person'Jupiter.Person.namespace; //-> Jupitervar person = new Jupiter.Person();person.Class.shortName; //-> 'Person'

 

　　Model example

After sorting out the above code, we can implement an ORM-style model layer. By inheriting the model, the subclass has the findone method, which can request data from the server. The returned result creates an instance of the class.

$.Class("Model",{  findOne : function(id, success){    $.get('/'+this.fullName.toLowerCase()+'/'+id,       this.callback(function(attrs){         success( new this( attrs ) );      })    },'json')  }},{  init : function(attrs){    $.extend(this, attrs)  }})Model("Person",{  speak : function(){    return "I am "+this.name+".";  }});Person.findOne(5, function(person){  alert( person.speak() );});Model("Task")Task.findOne(7,function(task){  alert(task.name);})

The above code is similar to the functions implemented by $. Model in jquerymx.

 

Javascriptmvc tutorial directory