http://backbonetutorials.com/organizing-backbone-using-modules/
不幸的是backbone沒有告訴你如何組織代碼,讓很多開發者對於如何加載腳本及規划他們的開發環境感到迷茫。
它不同於別的MVC框架那樣喜歡設置一個開發理念。
幸運的是這個教程可以告訴你如何設計一個更健壯的程序。
教程開始我們將把backbone 與AMD結合起來談談。
什么是AMD Asynchronous Module Definitions 異步模型定義
AMD定義了在瀏覽器和服務器之間如何異步加載模塊化代碼。它實際是Common.js 規范的一個分支。很多代碼加載器都使用AMD來實現,看來它可以作為Javascript 模塊化開發的特色。
這個教程將使用Require.js 來實現一個模塊和組織好Backbone.js
我強烈推薦使用ADM來作開發。
快速一覽
模塊化
可擴展
可編譯
市場認可
為什么使用Require.js
為什么 要用Require.js
Require.js 有一個很強大的社區。作者James Burke對項目很負責,並且樂於回復用戶。作為一個代碼加載的專家,它也是AMD規范的貢獻者。
讓我們開始吧
看代碼是最好的學習方法。
教程里的例子比較松散,你可以找到更全面的例子。
如果你想看到如何實施一個使用案例,你可以在github上創建一個問題。
例子不是很全面,但可以給你一個大概的概念。
例子文件的結構
有很多方法來組織程序的文件結構,這取決於項目的大小,下面的例子將views和template進行了映射。
Collection 和 Models 沒有像ORM那樣組織。
要繼續的話你必需明白我們如何實現說明中的目標。
引導你的應用程序
使用Require.js 我們在首頁定義了一個單點入口。我們必需為Backbone 的各個Views 設立容器
注意:script標簽上的data-main 屬性用於加載 js/main.js 它會自動 加上.js 擴展
<!doctype html> <html lang="en"> <head> <title>Jackie Chan</title> <!-- Load the script "js/main.js" as our entry point --> <script data-main="js/main" src="js/libs/require/require.js"></script> </head> <body> <div id="container"> <div id="menu"></div> <div id="content"></div> </div> </body> </html>
<script data-main="js/main" src="js/libs/require/require.js"></script>
輕量的首頁文件總是好的。你可以斷開服務器,讓cdn休息,確保一切可以緩存。
bootstrap 又是怎樣的呢?
我們的引導文件將會負責配置Require.js ,並且加載最開始最重要的依賴
在下面的例子中我們配置require.js 來創建快捷的別名來加載公用 的代碼,jquery ,Underscore Backbone
由於這些庫的自身可能的依賴關系我們必需依順序加載代碼到總的命名空間。
幸運的是AMD規范處理這些庫將會異步的來加載。因為這樣引導不直觀,我希望在不久的將來解決這個問題。
我們還命名了一個app module ,它包含了整個程序邏輯
模型將會以相對路徑形式加載。"app" app.js
require.config({
paths: {
jQuery: 'libs/jquery/jquery',
Underscore: 'libs/underscore/underscore',
Backbone: 'libs/backbone/backbone'
}
});
require({
'app',
'order!libs/jquery/jquery-min',
'order!libs/underscore/underscore-min',
'order!libs/backbone/backbone-min'
},function(App) {
App.initialize();
});