javascriptMVC教程 — 7.開始使用jQueryMX–Class

　　JMVC的 Controller and Model 繼承自 $.Class，去建立一個新類需要調用$.Class(NAME, [classProperties, ] instanceProperties])，如：

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

　　在上面的例子中，Animal的執行個體有一個breathe方法，我們可以像下面這樣建立一個類的執行個體，調用breathe方法：

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

　　如果你想建立一個子類，可以調用基類，傳入子類名稱和方法：

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

 

　　執行個體化

　　當一個類的執行個體建立的時候，會調用init方法，建構函式的參數會作為init方法的參數。

$.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.' );

 

　　訪問基類方法

　　訪問基類的方法可以使用this._super，下面的例子中ClassyPerson繼承自Person，他重寫了Person的speak方法，使用this._super()可以訪問到Person中speak的實現。

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

 

　　代理

　　Class的callback方法類似於$.proxy，將內建函式的this值指向Class執行個體本身。

$.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') ) ;

 

　　靜態繼承

　　Class允許你定義可以繼承的靜態屬性和方法，下面的代碼允許我們使用Person.findOne(ID, success(person) )從伺服器端擷取Person的執行個體，之後會調用success方法。

$.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." );})

 

　　自我描述

　　Class提供了命名空間，還有類和命名空間的名字。

$.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例子

　　把上面代碼整理一下，我們可以實現一個ORM風格的model層。子類通過繼承Model就擁有了findOne方法，可以向伺服器請求資料，返回的結果會建立類的執行個體。

$.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);})

　　上面的代碼類似於jqueryMX中$.Model實現的功能。

 

javascriptMVC教程目錄