Backbonejs and RequireJS

1. Backbone.js and RequireJS
為何需要 Backbone 與 requireJS
●
RequireJS
●
Project 檔案架構
●
自訂 Backbone Class
●
Router
●
Model
●
Collection
●
View
●

2. 一 . 為何需要 BackboneJS 與 RequireJS
●
使用 Backbone 將程式結構化
將一堆的 js function, 依照 MVC 架構切割成一個個的 Class 物件
●
使用 RequireJS 將物件模組化
將產生的 Class 物件包裝成一個個獨立檔案的 Module ，去除物件與物件
間的直接關連性
●
減少 Global 變數存在
●
使用 RequireJS 做檔案最佳化
使用 Optimizer, 將所有檔案壓縮並 compile 成單一檔案

3. 二 .RequireJS
●
使用
<script data-main="main" src="require.js"></script>
●
程式進入點
●
1. 設定 require.config()
baseUrl : 設定所有 js 找檔案的 root 節點，
預設是 main.js 所在路徑
paths : 對檔案或目錄，設定別名在 module 中使用
urlArgs : 可在 runtime 時替所有 js 都加入 string ，
避免 JS Cache
●
2. 執行 app 邏輯 require([],function(){})
把在 project 內需要共同監聽的物件在這裡產生 instance
並設定到 App 內讓需要的物件可以參考

4. 二 .RequireJS
●
Module 定義
1.
define(['_Underscore','_backbone','_$'],function(_,Backbone,$){
return {
}
})
2.
define(function(require){
var $ = require('_$'),
_ = require('_Underscore');
return {
}
})

5. 二 .RequireJS
●
Module 應用模式
1.singleton instance
定義 App.js
define([],function(){
return {....}
})
使用 App.initialize();
2.Use Class
定義 MyView.js
define(['_backbone'],function(Backbone){
return Backbone.View.extend({})
})
使用 var myView=new MyView();

6. 三 .Project 檔案架構
●
main.js : project 的進入點
●
app.js : 初始化 App 產生所有要用 Module 的 instance
●
router.js : 使用者 url 經過 router 處理 , 呼叫對應要執行的 function
●
text.js 與 order.js 是 RequireJS 的 Plugin, 若有用到則放在這裡
●
views/,collections/,models/ : Backbone 產生的各個物件 , 包成
Module 後 , 分別放入各個目錄內
●
templates/ : 要提供給 view render 使用的 html 樣板檔案
●
libs/ : 會用到的各種外部 resource lib 放在這裡，如 jQuery..

7. 四 . 自訂 Backbone Class
●
自訂 Class
framework 內已經定義好所有的基礎 Class, 依照需要 extend 相關 Class
即可
例
MyRouter=Backbone.Router.extend({..})
MyModel==Backbone.Model.extend({..})
MyView==Backbone.View.extend({..})
●
initialize
initialize 會在 new instance 時被自動執行
new instance 要傳進去的 option 設定都會被傳到這處理
●
使用 _.bindAll
將 module 內設定的 function bind 到 Module 上使用 this 來呼叫才會有效

8. 五 .Router
在 routes 設定規則，以 URL 決定要呼叫執行的 functon
●
設定 "/login" :"loginPage"
當網址是 localhost/myproject/#/login
會執行 router 裡面的 loginPage()
●
設定 "/prod/:id" :"prodPage"
當網址是 localhost/myproject/#/prod/3
會執行 prodPage(id), 並得到一個 id=3 的參數

9. 六 .Model
●
當作一般資料儲存物件
var model=new Backbone.Model({
x:123,
y:456
})
●
可自行與 Server 溝通取得資料
以 model.fetch() 取得資料 , 資料會儲存在 model 內 , 再透過 model 提供
的 function 操作
var Item=Backbone.Model.extend({
url:function(){
return "xxx.php?id="+this.get("id");
}
});
var item=new Item();
item.fetch()

10. 六 .Model
●
可被監聽
利用 model.set() 儲存變數值，則可針對這變數做監聽
var myModel=new Backbone.Model({
x:123,
y:456
})
var view=new Backbone.View({
model:myModel,
initialize:function(){
model.on('change:x',this.onChangeHandler)
},
onChangeHandler:function(){
}
})

11. 六 .Model
●
使用模式
當做 Collection 取得大批資料後儲存的資料格式
取代 global 變數，將 model 當做共用資料物件 , 監聽 model 內值變化
●
重要性質
id:
cid:系統自動產生的唯一値
attributes: 在這裡的資料才可被監聽
url: 處理產生要與 server 取得資料的 url 路徑
parse: 可改寫這部分，對接收到值做加工處理
sync: 改寫這部分，可以讓 CRUD 使用不同 URL

12. 七 .Collection
用來取得批次資料 , 儲存資料在 collection 內大多數屬性與
model 相同
1.collection.get(id) 取得指定 id 的 model 物件
2.at(index) 取得指定 index 的 model 物件
3.length 取得 collection 內 model 的數量
4.collection.models:array 直接取得 models array

13. 八 .View
用來產生頁面元件 , 並直接接收與使用者互動的 event
●
產生 instance
options 資料到帶到 initialize 內，部分特定屬性同時也會寫到 view 的屬性
上
如 model, collection, el, id, className, and tagName
●
重要性質
el: 產生 view instance 時 , 設定要指到實體的 dom 物件 , 值的設定是
selector 字串
var homePageHeader = new HomePageHeaderView({
el: "#homeHeader",
})
$el:jQuery 包裝好的 el 元素 , 可以 jQuery function 操作
this.$el.empty()
$: view.$(selector) 可以使用 jQuery 在 view 內部操作
this.$(".title").text()
render: 預設會在這裡產生 html, 依照需求改寫

14. 八 .View
使用 Underscore 的 Template
●
載入樣板檔案 透過 requireJS 的 text plugin 載入
●
使用 underscore template
var data = {
items: models,
_: _
};
var _html = _.template(tmplFile, data);
this.$el.append(_html);