javascriptMVC入門 — 2.jQueryMX

　　jqueryMX是由一系列有用的jquery類庫組成，他可以協助你開發大規模的jquery應用。jqueryMX的每一部分都可以獨立使用，這樣可以使你的應用程式更輕量化，而且$.String, $.Class, $.Model, $.View, $.Controller 等類庫壓縮以後也只有7kb。

　　如果你使用steal，你可以像這樣去載入你需要的外掛程式：

steal('jquery/controller', function(){  $.Controller('Tabs');})

　　或者去官網download builder下載你需要的檔案。

　　jqueryMX分為4個核心部分：DOM協助類，語言協助類，特殊事件和MVC相關類（Model, View, Controller 和 Class）。下面我們逐一簡單介紹。

　　

　　DOM協助類

　　DOM Helper為jquery擴充了操作DOM的相關功能，例如你可以設定元素的outer width和height。

$('#foo').outerWidth(500);

　　當然他還提供了一些其他外掛程式：

Cookie：擷取或者設定cookie的值。

Fixture：類比ajax響應。

Closest：在事件委託中使用子選取器。

Compare：迅速的比較兩個元素的位置。

CurStyles：快速的擷取多個css屬性。

FormParams：把form序列化成json類型的對象。

Selection：擷取或者設定當前文本的選擇區。

Within：返回在特定地區內部的元素。

Range：文本地區工具類，包括建立、移動、比較方法。

jQuery.route：為ajax應用提供基於history的路由功能。

 

　　特殊事件

　　jqueryMX包含了特殊事件和事件協助類：

Drag：提供拖拽事件的委託。

Drop：提供釋放事件的委託。

Hover：提供懸停事件的委託。

Destroyed：提供元素從頁面移除的事件通知。

Resize：提供對任何元素resize事件的監聽。

Swipe：提供swipe事件的委託。

Key：從一個key事件中擷取相應字元。

Default：為事件提供預設行為。

Pause-Resume：暫停或者恢複事件傳播。

 

　　語言協助類

　　語言協助類使對javascript資料執行不同函數變得更容易。

Object：比較對象或者集合。

Observe：監聽對象或者數組的改變。

String：字串協助類。

toJSON：建立和轉換json字串。

Vector：向量方法。

 

　　$.Class

　　$.Class提供了簡單的原型繼承，在$.Controller 和 $.Model中將會使用到他。例子：

// 建立Monster類$.Class("Monster",// 靜態方法 {  // monsters數組對象  monsters : []},// 原型方法，也就是執行個體化方法{  // 初始化方法，相當於建構函式  init : function(name){    // 將name變數存入name屬性中    this.name = name;    // 將當前執行個體添加到monsters數組中    this.Class.monsters.push(this);  },  // 一個執行個體化方法  speak : function(){    alert(this.name + " says hello.");  }});// 建立monster的執行個體var hydra = new Monster("hydra");    // 調用monster的方法hydra.speak();

 

　　$.Model

　　$.Model封裝了服務和資料層，我們來看一個例子：

$.Model("Task",{  findAll : "GET /tasks.json",  findOne : "GET /tasks/{id}.json",  create  : "POST /tasks.json",  update  : "PUT /tasks/{id}.json",  destroy : "DELETE /tasks/{id}.json"},{  canDestroy : function(){    return this.acl.indexOf('w') > -1  }});

　　假設'/tasks.json'會返回如下的json資料：

[{  "id"       : 1,  "name"     : "take out trash",  "acl"      : "rw",  "createdAt": 1303000731164 // April 16 2011},{  "id"       : 2,  "name"     : "do the dishes",  "acl"      : "r" ,  "createdAt": 1303087131164 // April 17 2011}]

　　下面的代碼會從伺服器擷取所有的tasks，然後銷毀那些使用者可以銷毀的task：

Task.findAll({}, function(tasks){  for(var i =0; i < tasks.length; i++){    var task = tasks[i];    if( task.canDestroy() ){      task.destroy();    }  }});

　　

　　Model還有一些其他的有用特性。

1.監聽[jquery.model.events]事件：

// 監聽task name的改變task.bind("name", function(ev, newName){   alert('task name = '+newName);});//改變task的nametask.attr('name', "laundry");//監聽tasks的created事件Task.bind("created", function(ev, newTask){   // 建立newTask的html，並添加到頁面});

2.將中繼資料轉變成更有用的對象：

$.Model('Task', {  convert  : {    'date' : function(raw){      return new Date(raw)    }  },  attributes : {    'createdAt' : 'date'   }},{});var task = new Task({ createdAt : 1303087131164});// createdAt 現在是一個 date 類型資料了task.createdAt.getFullYear() // -> 2011

3.執行個體對象在list上的方法

// 定義 task list$.Model.List('Task.List',{  // 為tasks添加協助方法  canDestroyAll : function(){    return this.grep(function(task){      return task.canDestroy();    }).length === this.length  }});Task.findAll({}, function(tasks){  //tasks 是一個 Task.List  tasks.canDestroyAll() //-> boolean})

4.延遲

// 弄兩個請求，當兩個都結束的時候，做一些事情$.when( Task.findAll(), People.findAll() )  .done(function(tasks, people){  // 做一些事})

 

　　$.View

　　$.View是一個模版架構，他允許你可以用相同的方式使用不同的模版引擎。我們來看一個例子：

Task.findAll( {}, function(tasks){  $('#tasks').html( 'task/views/tasks.ejs', tasks );});

請求處理完成之後，會從task/views/tasks.ejs載入模版，並渲染當前的tasks，將結果顯示在#tasks元素內。tasks.ejs看起來像這樣：

<% $.each(this, function(task){  %>  <li><%= task.name %></li><% }) %>

$.View會使用延遲，所以他和下面的代碼等效：

 $('#tasks').html( 'task/views/tasks.ejs', Task.findAll() );

javascriptMVC支援的模版引擎包括：jQuery.EJS,Jaml,Micro,jQuery.teml。

 

　　$.Controller

　　$.Controller是jquery外掛程式建立工廠，下面的代碼建立了一個$.fn.list外掛程式，像一個元素中寫入資訊。

$.Controller( "List", {  init: function( ) {    this.element.text( this.options.message );  }});// 建立list$('#list').list({message: "Hello World"});

　　$.Controller允許你建立預設屬性。

$.Controller( "List", {  defaults: {    message : "I am list"  }},{  init: function( ) {    this.element.text( this.options.message );  }});//建立一個寫有"I am list"的list

 $('#list').list();

　　Controller最大的特性就是方便你對事件的管理，比如綁定和取消事件。下面的例子添加了對li元素的click事件。

$.Controller( "TaskList", {  init: function(){    // 使用一個view去渲染 tasks    this.element.html( "tasks.ejs", Task.findAll() );  },  "li click": function(el){    alert( el.text() );  }});

　　Controller方便了參數化事件綁定，下面的代碼實現了對tasks建立和插入到list的事件監聽。

$.Controller( "TaskList", {  init: function( ) {    //使用view渲染tasks    this.element.html("tasks.ejs", Task.findAll());  },  "{Task} created": function( Task, ev, newTask ) {    this.element.append( "tasks.ejs", [newTask] );  }});

　　最後，他使為任何model建立外掛程式變得更簡單。

$.Controller( "List", {  init: function(){    //使用view渲染tasks    this.element.html( this.options.view,                        this.options.model.findAll( ));  },  "{model} created": function( Model, ev, instance ){    this.element.append( this.options.view, [instance] );  }});$("#tasks").list({ model: Task, view: 'tasks.ejs' });$("#people").list({model: Person, view: 'people.ejs' });