背景：
最近在做一个大型网上银行项目前端的优化，需要使用一个胖客户端的优化，大概思路就是前端通过Ajax 请求去后端获取数据，以Jason的格式返回，然后显示在页面上。由于这个系统非常庞大，胖客户端方案难免需要在客户端写大量的JS代码。我想对于任何团队来说，大量的，非结构化的代码维护起来都非常的不方便。所以BackBone进入了我的视线。
BackBone简介：
BackBone不能看做是一个framework，它是一个轻量级的MVC JS lib，它提供了一种途径可以让你结构化你的JS代码，让你以面向对象的方式来组织你的前端JS代码。这就好比我们在前端应用Domain Driven Design. 我们可以把一个非常大的项目按模块切分。 每个模块里面又可以按照BackBone的要求切分成View, Model, Collection Router.
1. BackBone View
View 就是你的页面，用来显示你的数据model中的数据，另外它还包括对页面上用户action的响应。此外通过JS 模板引擎，View可以由页面template组合而成，把显示逻辑彻底从页面上分离了开来，方便我们做View layer的extension. 下面就是一个页面，跟一个模板，以及一个back bone的view，任何view都必须继承Backbone.View。
window.BookDetailView = Backbone.View.extend({
template : _.template($('#item-detail-template').html()),
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
// 把每个单元格的值赋予隐藏的输入框
//this.setText();
return this;
},
});
</head> <body> <div style="width: 700px;margin: 0 auto;" id="app"> <p id="book-form"> <label for="username">书名：</label> <input id="username" class="username" name="username"/> <label for="level">等级：</label> <select id="level" name="level" class="level"> <option value="0">好</option> <option value="1">差</option> </select> <label for="publisher">出版社：</label> <input id="publisher" name="publisher" class="publisher"/> <label for="isbn">ISBN：</label> <input id="isbn" name="isbn" class="isbn" /> <label for="author">作者：</label> <input id="author" name="author" class="author" /> <button id="add-btn">增加</button> </p> <table class="book-table" border="1" cellspacing="0" cellpadding="0"> <caption style="font-size: 14px;font-weight: bold;">图书信息表（双击编辑）</caption> <thead> <tr> <th>ID</th> <th>书名</th> <th>等级</th> <th>出版社</th> <th>ISBN</th> <th>作者</th> <th>操作</th> <th>显示详细</th> <th>隐藏详细</th> </tr> </thead> <tbody> </tbody> </table> <div id="pager"></div> <div id="detail-content">
</div> <script type="text/template" id="item-template"> <td><%= bookid %></td> <td class="username"><div class="display"><%= username %></div><div class="edit"><input class="username" name="username"></input></div></td> <td class="level"><div class="display"><%= level=="1" ? "差":"好" %></div><div class="edit"><select name="level" class="level" style="width:45px"><option value="0">好</option><option value="1">差</option></select></div></td> <td class="publisher"><div class="display"><%= publisher %></div><div class="edit"><input class="publisher" name="publisher"></input></div></td> <td class="isbn"><div class="display"><%= isbn %></div><div class="edit"><input class="isbn" name="isbn"></input></div></td> <td class="author"><div class="display"><%= author %></div><div class="edit"><input class="author" name="author"></input></div></td> <td><a href="#" class="del">删除</a></td> <td><a href="#" class="display">显示详细</a> </td> <td><a href="#" class="hidden">隐藏详细</a></td> </script>
2.BackBone Model
模型用来存储页面上要显示的数据，它是这个JS lib的核心，此外它还包括了数据验证，转换等相关的逻辑。models中的数据可以创建、校验、销毁和保存到服务端以一种Restful的API的方式。当models中值被改变时自动触发一个"change"事件、所有用于展示models数据的views都会侦听到这个事件，然后进行重新渲染。Model必须继承自Backbone.Model。下面是一个model的定义包括验证逻辑：
window.Book = Backbone.Model.extend({
// 模型值校验
validate:function(attrs){
for(var key in attrs){
if(attrs[key] == ''){
return key + "不能为空";
}
if(key == 'isbn' && isNaN(attrs.isbn)){
return "ISBN必须是数字";
}
}
}
});
3. BackBone Collection
BackBone的Collection就是model的聚集，所以的Collection必须继承自Backbone.Collection.当然当你定义一个Collection时你也必须指定它的模型。通常我们通过Collection的fetch方法跟后端交互去获取数据。
window.BookList = Backbone.Collection.extend({
model : Book,
// 持久化到本地数据库
localStorage: new Store("Books")
});
4.BackBone Router
BackBone router 就相当于一个路由转发器，它扮演了一个MVC中的controller的角色。在单页应用中，我们通过JavaScript来控制界面的切换和展现，并通过AJAX从服务器获取数据。
可能产生的问题是，当用户希望返回到上一步操作时，他可能会习惯性地使用浏览器“返回”和“前进”按钮，而结果却是整个页面都被切换了，因为用户并不知道他正处于同一个页面中。
对于这个问题，我们常常通过Hash（锚点）的方式来记录用户的当前位置，并通过onhashchange事件来监听用户的“前进”和“返回”动作，但我们发现一些低版本的浏览器（例如IE6）并不支持onhashchange事件。你可以看到，当URL Hash发生变化时，会执行所绑定的方法。
// Router
var AppRouter = Backbone.Router.extend({
routes:{
"":"list",
"wines/new":"newWine",
"wines/:id":"wineDetails"
},
initialize:function () {
$('#header').html(new HeaderView().render().el);
},
list:function () {
this.wineList = new WineCollection();
var self = this;
this.wineList.fetch({
success:function () {
self.wineListView = new WineListView({model:self.wineList});
$('#sidebar').html(self.wineListView.render().el);
if (self.requestedId) self.wineDetails(self.requestedId);
}
});
},
wineDetails:function (id) {
if (this.wineList) {
this.wine = this.wineList.get(id);
if (this.wineView) this.wineView.close();
this.wineView = new WineView({model:this.wine});
$('#content').html(this.wineView.render().el);
} else {
this.requestedId = id;
this.list();
}
},
newWine:function () {
if (app.wineView) app.wineView.close();
app.wineView = new WineView({model:new Wine()});
$('#content').html(app.wineView.render().el);
}
});
BackBone使用前提:
BackBone比较适合单页面的应用跟复杂的大型应用，此外BackBone 还依赖其他的JSlib.比如：
Backbone依赖于Underscore框架的基础方法，此外在Backbone中，对DOM和事件的操作依赖于第三方库（如jQuery或Zepto）。
Sample 下载，图书管理程序
相关推荐
在本文中，我们将深入探讨如何使用Node.js构建应用程序，并结合MongoDB数据库以及Backbone.js作为前端框架，实现数据的高效管理和交互。Node.js是基于Chrome V8引擎的JavaScript运行环境，它让JavaScript能够运行在...
第二部分包括第5章到第10章，介绍如何使用这些工具去构建一个具有社交网络风格的网站。如果是刚开始学习，建议先从第一部分获取一些背景知识，然后在第二部分深入学习。如果你已经熟悉JavaScript，可以直接跳过第一...
, 《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始，然后着手构建3个示例应用程序；此外，backbone和grunt-bbb、jquery mobile等开发...
, 《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始，然后着手构建3个示例应用程序；此外，backbone和grunt-bbb、jquery mobile等开发...
《Backbone.js应用程序开发》详细介绍了如何使用Backbone.js完成Web应用开发。全书从了解MVC、SPA和Backbone.js的基本知识开始，然后着手构建3个示例应用程序。《Backbone.js应用程序开发》还介绍了Backbone和...
解压提供的"Backbone.js API中文文档.zip"后，你会得到一个HTML文档，里面详细介绍了每个组件的用法、方法、事件和属性。通过阅读这份文档，你可以了解如何创建模型、视图、集合和路由器，以及如何使用Backbone....
《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始，然后着手构建3个示例应用程序；此外，backbone和grunt-bbb、jquery mobile等开发工具...
Backbone.js 建立在 jQuery 和 Underscore.js 之上，因此它可以无缝集成到已经使用这些库的项目中。此外，它还支持通过 RESTful JSON 接口与服务器通信，使得前后端之间的数据交换更加高效。 #### 二、通过 Hello...
在本教程中，我们将详细介绍Backbone.js的核心概念和技术细节，并通过一个具体的示例来加深理解。 #### 二、Backbone.js 的核心概念 Backbone.js主要由三大部分组成：Models（模型）、Collections（集合）以及Views...
6. `README.md` 文件：介绍项目的基本信息、安装步骤和使用指南。 7. `.gitignore` 文件：指定在版本控制中忽略的文件或目录。 在实际应用中，开发者会根据项目需求，将Backbone.Pageable集成到他们的前端框架中，...
本书重点介绍了如何使用CompositeView来组合不同的视图，以及如何在视图间传递数据和参数。通过这些技巧，开发者可以更灵活地控制视图的呈现方式，提升用户体验。 ##### 5. 事件系统与通信 Marionette强大的事件...
10. **项目结构**："backbone.epoxy-master"目录可能包含README文件（项目介绍和使用指南）、src目录（源代码）、dist目录（编译后的代码）、test目录（测试用例）和其他配置文件。 以上就是关于"前端项目-backbone...
此书名明确了本书的核心内容：如何使用Node.js、MongoDB及Backbone这三个关键技术来构建Web应用程序。这三个技术组合在一起提供了一个全栈的开发解决方案。 - **Node.js**：作为后端服务器端的技术，它使用...
《Mastering Backbone.js》这本书详细介绍了Backbone.js的核心概念和实践应用。作者深入浅出地讲解了如何使用Backbone.js来组织前端代码，包括模型（Models）、集合（Collections）、视图（Views）和路由器（Routers...
1.backbone+require+jquery前端框架 2.包容性极强，现有的js插件几乎都能在本框架使用 3.健壮很稳定性极好。**开发了很多项目，都用的本框架，权限验证在本框架也很容易做 4.精心整理，有很多使用的注释，及文档支持