JS 的那些MVC 架構 の backbone，mvcbackbone

JS 的那些MVC 架構 の backbone，mvcbackbone

JS 的那些MVC 架構

 

 

         編寫此文的目的其實也是工作的需要，現在我把我學習到的東西分享出來，希望對大家有所協助

                                                                                                                                     ——tomi.zhang

目錄

• l  Backbone.js
• l  Angular.js
• l  Ember.js

Backbone.js

Backbone.js 官方的解釋是為複雜javascript應用提供模型、集合、視圖的結構。其中模型用於綁定鍵值資料和自訂事件；集合附有可枚舉函數的豐富API；視圖可以聲明事件處理函數並通過 RESTFUL 風格的伺服器 以JSON介面連結到應用程式

BackBone.js 分為幾大模組 分別是：

｛events｝｛Model｝｛Collection｝｛Router｝｛View｝

下面我們先從最底層的Model 開始把！我會借用一些書本上的代碼來示範

大家看上面的代碼注釋上寫的很清楚了我建立了一個空的模型  然後我們給這個模型輸入焦點資料 可以看到在LOG中我們剛剛輸入的資料

現在我們有了一個基本的MODEL這是一個好的開始然後在backbone中它為我們提供了一些關於MODEL的方法這個你們可以去看具體的API

地址在這裡：http://backbonejs.org/#Model 

比如說這個Default

大家看到沒有模型預設的資料 title 是Null 字元  然後completed是 false

當然你可以對模型進行添加資料刪除資料，偵聽模型中的資料是否變化，對模型中的資料進行一個基本的驗證bla….bla….在此就不複述了

 

下面我們來看看一些表現層的東西我們叫他 VIEW層

雖然我們叫他VIEW但是其實這個在backbone裡並沒有HTML 標籤哦他其實關注的是 上面模型層MODEL提供出來的資料，並進行一些邏輯上的操作

下面你所看到的VIEW 應該是這樣的

現在你不必去關注去理解這段代碼中每個屬性，方法到底是在幹嘛

這裡我仔細說一下 el  這個東東 （他出現在上面那段代碼的最後一句）

這裡有個小例子看  上面的代碼  tagName ClassName id  是不是感覺和html 中的屬性比較像啊！ 其實就是的 在最後的一句代碼 我們看注釋中的LOG，明白了嗎？

我想不笨的人都應該明白了把，但是我還要說一點這個建立的 dom element 並沒有插入到真正的DOM中哦

這裡el 是用來找到DOM中存在的標籤這裡就是找 ID 為footer的標籤，如果你熟悉jquery的相信你會很喜歡這樣 = =！當然backbone 也確實提供了

你也可以這樣在要建立VIEW的時候產生

其他VIEW 的API 你可以查看http://backbonejs.org/#View

 

我們回到MODEL 這次介紹 Collections 他和MODEL 關係比較大

看上面的代碼我們collection 中擁有了一個模型叫 myTodo

當然你猜的沒錯我們可以對我們的collection進行一個基本的添加刪除

我們有add() 和 remove()方法

當然除了這幾個基本的還有許多方法供我們使用和調遣  http://backbonejs.org/#Collection

 

下面我們來說說 EVENTS

和 jquery 一樣

上面的event  你可以參考JQuery 什麼 click  focus bla…bla…

當然除了這樣你還可以自己擴充哦向這樣

當然event 也是有很多這樣那樣的方法http://backbonejs.org/#Events

下面我來介紹下EVENT 如何和上面所說的VIEW連結起來

看就是這麼的簡單當我單機checkbox 以後會怎麼樣呢？執行clicked回呼函數

 

Router

對於路由的介紹

關鍵是記住這個

下面的代碼都是這種形式的，我截取了一小段

看到了嗎對就是這樣   http://backbonejs.org/#Router

 

講到這裡你可能還是覺得雲裡霧裡的沒關係 參照這個例子 http://documentcloud.github.io/backbone/docs/todos.html並結合上面講的一些小定義好好揣摩把！

 

下一章開始介紹 GOOGLE 的 Angular

 

 

 

backbone中怎根據需要把js template的檔案動態載入進來

什麼是骨幹
骨幹，而不是脊柱，但以協助開發架構重量級的JavaScript應用程式。

提供了三種主要的事情：1，模型（模型）2，集合（集合）3，視圖（視圖）

backbone.js檔案本身很小，只有5.3KB，作為一個架構後核心JS檔案的壓縮層級，這個數字是可怕的。

另外，這也必須依賴於另一個JS JS檔案：underscore.js（包含許多工具方法，集合運算，js的模板等）。

關於Backbone.Model表示應用程式中的所有資料，可以建立資料模型，驗證，銷毀，並將其儲存到伺服器。

當自動觸發值“改變”事件模型改變時，所有的資料檢視顯示模型將偵聽此事件，然後重新渲染。

Backbone.Collection和Java集合我們平時接觸的類似，增加元素，刪除元素，得到了長度，排序，比較方法等一系列的工具，說白了就是一個儲存的集合類車型。

Backbone.View可以綁定DOM EL和用戶端的事件。 Html頁面被渲染方法的意見呈現的時候，一個新的視圖到模型中通過的資料，例如：

js代碼

變種視圖=新EmployeeView （{模式：員工}）;

這種模式是在相關的方式和觀點。

功能來建立模型或視圖的文法：延伸，打造一流的繼承

模型的等價物，破壞，校正和就會引發一系列變化，相應的事件

需求例如：使用backbone.js和jquery實現可編輯的員工資訊表。

功能：1，輸入員工的資訊。 2，刪除員工資訊。 3，員工資訊表上雙擊可以。 4，檢查資訊的有效性給員工。 5，可堅持了員工資訊。

設計：

說Employee類（從Backbone.Model繼承）員工資訊，包含ID，姓名，性別，年齡和工作領域。

js代碼

window.Employee = Backbone.Model.extend（{

/ /模型值校正

驗證：？功能（attrs）兩{

為（在ATTRS變種鍵）{

如果（ATTRS [關鍵] ==''）{

返回鍵+“不可為空”;

} 如果（鍵=='年齡'&&的isNaN（attrs.age））{

回報“年齡必須為數字”;

}

}

}
>}）;

Employee類語句後可以添加例如Employee對象：

js代碼

變種員工=新的Employee（）;

Employee類沒有申報編號，名稱及其他商業領域。當你需要設定員工資訊，您可以直接撥打

js代碼

employee.set（{'身份證'：1，'名'：'賈森'}）;

當然，如果你需要檢查的員工的資訊，Employee類需要配置一個validate方法，這個方法的attrs參數被設定成JSON資料。因此，當資料裡面的員工不斷變化的每次出現將首先調用validate方法。

一個很好的模型類的定義之後就可以開始定義一組類，每個型號裡面可以添加，刪除等在內的一系列集合中的操作，你也可以調用fetch方法來獲得從伺服器端的初始值的集合。

js代碼

window.EmployeeList = Backbone.Collection.extend（{

模式：員工，

/ /持久化到本機資料庫

localStorage中：新百貨（「僱員」），

}）;

window.Employees =新僱員列表（）;

localStorage的屬性自動設......餘下全文>>
 
教js MVC開發架構具體是為何？最好按照個人開發經驗談談

你可以看看ExtJS。一個很流行的JS架構。我也在看這個架構。你去官網看看
其實什麼MVC都一樣的，沒區別。
所謂JS的MVC就是把用伺服器做的事情，換成ajax和伺服器互動。。這樣比較好看，速度有時也比較快(伺服器只負責資料轉送)