Backbone js and requirejs

1,772 views

Published on

Backbonejs and RequireJS

Published in: Business, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,772
On SlideShare
0
From Embeds
0
Number of Embeds
334
Actions
Shares
0
Downloads
15
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Backbone js and requirejs

  1. 1. Backbone.js and RequireJS為何需要 Backbone 與 requireJS●RequireJS●Project 檔案架構●自訂 Backbone Class●Router●Model●Collection●View●
  2. 2. 一 . 為何需要 BackboneJS 與 RequireJS● 使用 Backbone 將程式結構化 將一堆的 js function, 依照 MVC 架構切割成一個個的 Class 物件● 使用 RequireJS 將物件模組化 將產生的 Class 物件包裝成一個個獨立檔案的 Module ,去除物件與物件 間的直接關連性● 減少 Global 變數存在● 使用 RequireJS 做檔案最佳化 使用 Optimizer, 將所有檔案壓縮並 compile 成單一檔案
  3. 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. 4. 二 .RequireJS● Module 定義 1. define([_Underscore,_backbone,_$],function(_,Backbone,$){ return { } }) 2. define(function(require){ var $ = require(_$), _ = require(_Underscore); return { } })
  5. 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. 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. 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. 8. 五 .Router 在 routes 設定規則,以 URL 決定要呼叫執行的 functon● 設定 "/login" :"loginPage" 當網址是 localhost/myproject/#/login 會執行 router 裡面的 loginPage()● 設定 "/prod/:id" :"prodPage" 當網址是 localhost/myproject/#/prod/3 會執行 prodPage(id), 並得到一個 id=3 的參數
  9. 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. 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. 11. 六 .Model● 使用模式 當做 Collection 取得大批資料後儲存的資料格式 取代 global 變數,將 model 當做共用資料物件 , 監聽 model 內值變化● 重要性質 id: cid:系統自動產生的唯一値 attributes: 在這裡的資料才可被監聽 url: 處理產生要與 server 取得資料的 url 路徑 parse: 可改寫這部分,對接收到值做加工處理 sync: 改寫這部分,可以讓 CRUD 使用不同 URL
  12. 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. 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. 14. 八 .View 使用 Underscore 的 Template● 載入樣板檔案 透過 requireJS 的 text plugin 載入● 使用 underscore template var data = { items: models, _: _ }; var _html = _.template(tmplFile, data); this.$el.append(_html);

×