靜態文件目錄整體規划
網站的static目錄下有如下子目錄
.
├── css
├── img
├── js
├── myjs
└── sea-modules
- css目錄存放整體性的css，比如bootstrap,網站主layout的css等, 一些插件的css和插件本身的js文件放在同目錄就行了，不用單獨放到這里，不能太死板。
- img目錄下放圖片，包括bootstrap使用的圖片，網站本身使用的圖片等。
- js目錄存放第三方的javascript腳本，如jquery和jquery的插件等，這些腳本不符合seajs 規范，但也可以用seajs去require，而且像jquery這樣最最常用的腳本，我就直接在html里引入 了。
- 就把jquery當作瀏覽器自帶的功能，而假設jquery內置的話，jquery 插件就可以直接用seajs區require了，省得下載一個jquery插件還得去包裝成seajs格式的。
- 再有就是像bootstrap的一些腳本是依賴jquery的，而且整個站都用，沒必要為了實現潔癖把它們都用 seajs異步加載。
- myjs里存放我們自己寫的代碼，除了這個目錄里的代碼，其它目錄的代碼都是網上下載的，有可能會在升級時覆蓋。
- sea-modules目錄存放seajs格式的第三方javascript包,具體里面的目錄安排下面說。
sea-modules目錄
sea-modules目錄下的包都用spm install安裝，首先是按包的名字建立各個子目錄，每個包的目錄里 每個版本再建立一個子目錄，版本目錄里存放具體的源文件，包括開發調試版本和生產環境的壓縮版本。 如果要更新某個包的話也可以直接用spm來更新，然后sejs.config里可以隨時切換版本，下面會看到。
myjs目錄
這個目錄下存放我們編寫的js代碼，要求全部符合seajs規范。 首先下面建立一個utils和stuff目錄，分別存放每個單頁面app所要用到的helper包和雜項包。 然后其它的目錄基本上是一個子目錄表示一個單頁面app，單頁面app用Backbone開發，每個app目錄里面做如下約定。
- main.js 用來引導整個app，包含了seajs.config和seajs.use的調用，具體下面會看到。
- app.js 用來做Backbone的初始化工作，包含Backbone的Router的定義，以及驅動路由的Backbone.History.start()語句。
- *-view.js 用來實現app的每個View。
- *.tpl 用來存放view使用的模板文件，使用seajs按需異步加載。
- *.css 用來存放app UI所需要的樣式文件，使用seajs按需異步加載。
依賴關系
每個app基本上是一個獨立的個體，實現高內聚，盡量少的外部依賴。除了本目錄內的view,model, tpl的依賴外，再就是第三方組件(Backbone,Mustache等)的依賴了和項目公共組件的依賴了如require('../utils/xxx.js')。
也就是說如果有多個app使用的共用代碼，也保存在myjs目錄下，並建立子目錄進行命名空間划分，如stuff,utils,xxxhelper等。 這樣下來一個網站有很多個app，整個文件目錄也很有條理，不會亂。
main.js 開發
每個app里的這個文件做一些seajs的配置和app的引導，大致如下。
seajs.config({
alias: {
"underscore": "underscore/1.4.4/underscore-debug",
"backbone": "backbone/0.9.2/backbone-debug",
"mustache": "mustache/0.5.0/mustache-debug",
"cookie": "cookie/1.0.2/cookie-debug",
"moment": "moment/1.7.2/moment-debug"
},
preload: ['seajs/plugin-text'],
map: [
['.tpl', '.tpl?201304261457'],
['.js', '.js?201304261457']
]
});
seajs.use(['/static/myjs/add-domain/app'], function(main){
$(function(){
main.init();
});
});
- 首先alias里聲明第三方的依賴，這里以后要想升級組件版本，或者使用調試版本的話就修改這里。
- preload里加載必要的seajs插件，最常用的就是用來加載模板和css的插件了。
- map里做一個各種文件的映射，如果app升級后記着修改這里的版本號用來清空緩存。
- seajs.use里直接使用app目錄下的app.js文件，並約定每個app.js都export一個init方法, 調用init最好在document.ready的回調里，因為這時候layout的dom都加載好了，app里可能會用到。 而且jquery是在html里載入的，這里可以放心的使用$(function(){})。
關於打包
原則上是可以把每個app打包成一個js文件，以減少http請求次數。 但以前折騰過好久，在github上發了很多個issue，也沒理解為啥打出來的包各種不能用。 我在app目錄下建立了一個package.json
{
"name":"app",
"output":{"app.js":"."}
}
執行spm build --src . 竟然提示不能加載../utils/utils.js，我手工把app.js里的../修改成http://www.cnblogs.com/再執行，能打包成功了。 然后我把main.js里修改成seajs.use(['/static/myjs/domains/dist/app-debug']),結果打包后的模塊導出的不是app.js，而是utils.js，根本沒有init方法。 總之spm打包各種問題，所以再次放棄了，就調試模式跑吧。
關於測試
不會。
目錄安排示例
.
├── css
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-responsive.css
│ ├── bootstrap-responsive.min.css
│ └── main.css
├── img
│ ├── global_sprite.png
│ ├── glyphicons-halflings.png
│ ├── logo.png
│ └── simple.png
├── js
│ ├── bootstrap.js
│ ├── bootstrap.min.js
│ ├── china-zh.js
│ ├── highcharts.src.js
│ ├── jquery-1.8.2.min.js
│ ├── jquery.vector-map.css
│ ├── jquery.vector-map.js
│ ├── jquery.zclip.js
│ └── ZeroClipboard.swf
├── myjs
│ ├── add-domain
│ │ ├── app.js
│ │ ├── domains-view.js
│ │ ├── domains-view.tpl
│ │ ├── main.js
│ │ ├── records-view.js
│ │ └── records-view.tpl
│ ├── charthelpers
│ │ ├── chart.js
│ │ ├── chinamap.js
│ │ ├── isp_chart.js
│ │ ├── region_chart.js
│ │ └── time_chart.js
│ ├── day_report
│ │ ├── app.js
│ │ ├── main.js
│ │ ├── template.tpl
│ │ └── view.js
│ ├── domains
│ │ ├── app.js
│ │ ├── domains.tpl
│ │ └── main.js
│ ├── stuff
│ │ └── moment-zh-cn.js
│ └── utils
│ ├── data_map.js
│ └── utils.js
└── sea-modules
├── backbone
│ └── 0.9.2
│ ├── backbone-debug.js
│ ├── backbone.js
│ └── package.json
├── cookie
│ └── 1.0.2
│ ├── cookie-debug.js
│ ├── cookie.js
│ ├── package.json
│ └── src
│ └── cookie.js
├── jquery
│ └── 1.8.3
│ ├── gallery
│ ├── jquery-debug.js
│ ├── jquery.js
│ └── package.json
├── marked
│ └── 0.2.4
│ ├── marked-debug.js
│ ├── marked.js
│ └── package.json
├── moment
│ └── 1.7.2
│ ├── moment-debug.js
│ ├── moment.js
│ └── package.json
├── mustache
│ └── 0.5.0
│ ├── mustache-debug.js
│ ├── mustache.js
│ └── package.json
├── seajs
│ └── 1.3.0
│ ├── package.json
│ ├── plugin-base.js
│ ├── plugin-text.js
│ ├── sea-debug.js
│ └── sea.js
└── underscore
├── 1.4.2
│ ├── package.json
│ ├── underscore-debug.js
│ └── underscore.js
└── 1.4.4
├── underscore-debug.js
└── underscore.js