蛙蛙推荐：Backbone和seajs搭配最佳实践探讨

静态文件目录整体规划

网站的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