Backbone.js简介 #

Backbone.js = 轻量级MVC框架 + 事件驱动架构

┌─────────────────────────────────────────────────┐
│                   Backbone.js                    │
├─────────────────────────────────────────────────┤
│                                                  │
│   ┌─────────┐    ┌─────────────┐               │
│   │  Model  │───►│ Collection  │               │
│   │  (模型) │    │  (集合)     │               │
│   └─────────┘    └─────────────┘               │
│        │               │                        │
│        │               │                        │
│        ▼               ▼                        │
│   ┌─────────┐    ┌─────────────┐               │
│   │  View   │◄───│   Router    │               │
│   │  (视图) │    │  (路由器)   │               │
│   └─────────┘    └─────────────┘               │
│                                                  │
├─────────────────────────────────────────────────┤
│              Events (事件系统)                   │
└─────────────────────────────────────────────────┘

<!-- 必需：先引入Underscore.js -->
<script src="underscore.js"></script>
<!-- 然后引入Backbone.js -->
<script src="backbone.js"></script>

<!-- 可选：用于DOM操作和事件处理 -->
<script src="jquery.js"></script>
<!-- 或使用轻量级的Zepto -->
<script src="zepto.js"></script>

传统框架：提供完整解决方案，强制约定
Backbone.js：提供基础结构，自由组合

var Book = Backbone.Model.extend({
    urlRoot: '/api/books'
});

var book = new Book({ id: 1 });
book.fetch();

传统页面 → 添加Backbone Model → 添加View → 添加Router → 完整SPA

适合构建中等复杂度的单页应用
- 管理后台
- 内容管理系统
- 数据展示平台

<script src="underscore.js"></script>
<script src="backbone.js"></script>
<div id="comments"></div>
<script>
var Comment = Backbone.Model.extend({});
var Comments = Backbone.Collection.extend({
    model: Comment,
    url: '/api/comments'
});
</script>

Backbone.js 轻量级特性适合移动端
- 响应式设计友好
- 加载速度快
- 内存占用小

以下场景可能需要考虑其他框架：
- 超大型复杂应用（考虑Angular）
- 需要完整生态（考虑React/Vue）
- 团队缺乏架构经验

┌──────────────────────────────────────┐
│           Backbone.js 应用            │
├──────────────────────────────────────┤
│  Backbone.js   │   Underscore.js     │
│  (核心框架)    │   (工具库)           │
├──────────────────────────────────────┤
│  jQuery/Zepto  │   Handlebars        │
│  (DOM操作)     │   (模板引擎)         │
├──────────────────────────────────────┤
│  Require.js    │   RESTful API       │
│  (模块加载)    │   (后端接口)         │
└──────────────────────────────────────┘

基础阶段
├── Backbone.js基础概念
├── Model模型
├── Collection集合
└── View视图

进阶阶段
├── Router路由
├── Events事件系统
├── Sync同步机制
└── 模板引擎集成

高级阶段
├── 自定义扩展
├── 性能优化
├── 测试策略
└── 最佳实践

浏览器支持：
- IE 11+
- Chrome 最新版
- Firefox 最新版
- Safari 最新版
- Edge 最新版