React.JS & BackBone.JS 前後端分離初體驗
傳統的web開發開發可以簡單的描述成切圖、css、js。而現在的大前端将資料處理也包含到了前端工作中，整個項目周期由接口文檔來驅動，機資料驅動開發。
首先我們需要來了解一下MVC？
什麼是MVC？常常我們會在背景開發的口中聽到這個詞，感覺陌生而熟悉。傳統的前端開發就隻是V（View）這一層的工作。而現在，我們需要肩負更大的責任，資料處理展示交換都交由前端完成。
模型-視圖-控制器(MVC)
模型：即資料模型。了解過面向對象程式設計的朋友應該知道，我們要建立一個叫做人的對象，我們則需要先了解，人有哪些屬性，性别，身高，體重，年齡。。。有這些屬性組成了一張叫做人的表象特征，我們知道了人的屬性，則需要有方法，對外的接口讓别人了解這個人，–屬性+方法則組成了這個人。這個人就會被當作一個模型。這個模型會提供給我們方法來擷取關于這個對象的所有資訊。
視圖：顯示層。一般而言，View都是對應MOdel建構的，尤其在子產品化開發中。我們可以将View當作Model的衣服，Model的特點都通過View來展現給使用者。
控制器：處理使用者互動。負責從視圖讀取資料，控制使用者輸入，并向模型發送資料。
Backbone.js-輕量級JS庫。用于開發MVC類應用程式
Backbone.js為複雜WEB應用程式提供模型(models)、集合(collections)、視圖(views)的結構。
附官網的一段簡介
通過Backbone，你可以将資料呈現為 Models, 你可以對模型進行建立，驗證和銷毀，以及将它儲存到伺服器。 任何時候隻要UI事件引起模型内的屬性變化，模型會觸發”change”事件； 所有顯示模型資料的 Views 會接收到該事件的通知，繼而視圖重新渲染。 你無需查找DOM來搜尋指定id的元素去手動更新HTML。 — 當模型改變了，視圖便會自動變化。
某種意義上說，在用javaScript來建立web項目時，Backbone試圖定義一組最小而高效的集合，包括了資料結構（models（模型） 和 collections（集合））和使用者接口（views（視圖） 和 URLS）。在web開發環境裡，到處都是架構（幫你寫好了一切），不過這些庫需要你的網站在建構的時候符合該架構的樣子，風格，預設的行為。但是，Backbone還是作為一個工具，讓你可以随心所欲的設計你的網站
接下來，我們看着代碼進一步了解在Backbone.js中對于Model / Collection / View / Events 的運用
- model
var Backbone = require("backbone");
var AJAX_POST = require("util/ajax.js").AJAX_POST;
var Model = Backbone.Model.extend({
initialize: function() {},
dotestSave: function(option) {
option.loadingText = "正在儲存,請稍候!";
option.url = "/testschedule/testsave.action";
option.data = option.param;
option.success = function(data) {
this.trigger("afterdotestSave");
}.bind(this);
AJAX_POST(option);
},
doModeify function(option) {...},
doDele function(option) {...},
SS});
- Collection
var Backbone = require("backbone");
var AJAX_POST = require("util/ajax.js").AJAX_POST;
var Model = require("datatest.js");
module.exports = Backbone.Collection.extend({
model: Model,
initialize: function() {},
doGettests: function(option) {
option.loadingText = "正在查詢,請稍候!";
option.url = "/testschedule/testtest.action";
option.data = option.param;
option.success = function(data) {
this.set(data.testList);
this.trigger("afterdoGettests",{
testTotal:data.testTotal,
testFailed:data.testFailed
});
}.bind(this);
AJAX_POST(option);
},
});
我們将AJAX封裝成了一個公共方法的js,上述的AJAX_POST則是調用POST請求方法。Collection是一個集合，裡面包含了多個Model，這個集合擁有自己的方法，而他擁有的每個“孩子”也擁有Model的屬性和方法。在VIew層，我們需要顯示一個Tests清單，且需要對每一行的資料有相關的修改和删除的操作，則我們需要有一下的步驟：
1.請求List清單
2.将清單循環顯示在頁面上。
通過檢視Backbone的官方文檔我們知道，Collection可以通過Model:model指定集合包含的模型。進而将請求過來的資料（數組）中的每一條轉換為指定的Model。每一條資料同時也擁有的Model相關的方法。
注意：map循環的return并不會跳出循環。在react的render中，隻能使用map循環。
- View
var React = require("react");
var test = React.createClass({
componentDidMount: function() {
this.listEvents = {
"afterdoGettests": this.afterdoGettests
}
this.state.ListDef.on(this.listEvents);
this.querytestsList();
},
querytestsList: function() {
this.state.ListDef.doGettests({
loadingFlag: true,
param: {
teststatus: this.state.teststatus,
testname: this.state.filter
}
});
}
},
afterdoGettests: function(data) {
this.state.testTotal = data.testTotal;
this.state.testFailed = data.testFailed;
this.setState({
testTotal: this.state.testTotal,
testFailed: this.state.testFailed,
});
},
render: function() {
return (
<div className="childlog">
{this.state.ListDef.length>?(
this.state.ListDef.map(function(item,index){
return(
<p key = {index} onClick={this.clickHander.bind(this,item)}>
<em className={item.get("teststatus")=="1"?"ic-data-normal":"ic-data-error"}></em>
<span className={item.get("teststatus")=="0"?"redtxt":""}>{item.get("testname")}</span>
</p>
)
}.bind(this))
)
:<p className="tac">暫無資料</p>}
</div>
)
}
});
module.exports = test;
事件：
在代碼中。我們看到了this.state.ListDef.**on**(this.listEvents);
this.**trigger**("afterdoGettests",{
testTotal:data.testTotal,
testFailed:data.testFailed
});
on則是給對象綁定事件，
trigger則是通過對象調用其綁定的事件。
on、和trriger聯通了ajax請求的和顯示層。
我們需要在ajax請求結束後，對其作出相應的操作，界面需要相應的重新整理。此時則需要依賴backbone的事件系統了，我們是使用collection集合去調用的背景的查詢接口，則我們可以給這個對象綁定重新整理事件，在ajax請求的回調中，我們也可以得到此對象，此時使用該對象調用它的重新整理事件，則可以對view層進行相應的操作。
backbone的事件系統中還擁有很多的方法。詳見其官網API。
** 以上是自己的一些拙見，有不對的地方請盡情指正
** 以此對自己對react和backbone的前後端分離的了解進行記錄，也希望能給需要的人提供一定參考，謝謝