前端大牛 Addy Osmani 的15个精彩PPT与其作品《Backbone.js应用程序开发》 | 程序员书屋小组 | 果壳网 科技有意思
796人加入此小组
Addy Osmani 创建了 TodoMVC、jQuery UI Bootstrap、jQuery Plugin Patterns 和 Backbone Paginator，出版了《Learning JavaScript Design Patterns》和《Developing Backbone.js Applications》两本技术书籍，而且还是著名的 jQuery、Modernizr 以及 Backbone.js 框架的贡献者。《Developing Backbone.js Applications》即将由 出版，中文名称：《Backbone.js应用程序开发》目前在印刷状态，即计9月15日可与大家见面。后面会给大家详细说明。本文中的PPT分享来自博客园中昵称梦想天空整理的《前端大牛 Addy Osmani 的15个精彩彩PPT》因为《Developing Backbone.js Applications》作者与PPT作者同为一人，所以微信君整合在一起与大家回顾PPT、分享技术书！作者PPT分享1、Tooling For The Modern WebApp Developer现代 Web App 开发者必备的实用工具推荐，深入介绍了 Chrome 开发者工具的功能。2、The New Wave Utility Belt (FOWA)介绍了 Google 强大的工具系统：Yeoman，帮助开发人员快速构建出漂亮的、引人注目的 Web 应用。3、Digesting JavaScript MVC深入解析 JavaScript MVC，讨论 JavaScript MVC 模式应用情况以及优秀的框架推荐。4、Decoupling JavaScript Vs. The World讲解 JavaScript 组件级别解耦、模块级别解耦以及观察者模式、门面模式和中介者模式等。5、Scaling Your JavaScript Applications探讨 JavaScript 应用程序的体系结构，模块化和可扩展性。内容包括MV*模式（MVC，MVP，MVVM），MV*框架，AMD 和大规模的应用模式和解决方案。 6、The jQuery Essentials《jQuery 必知必会》教你编写 jQuery 的最佳实践和性能技巧，如果你正在学习 jQuery，一定不能错过了。7、Polyfilling The HTML5 Gaps With JavaScriptPolyfill 是 JavaScript 垫片，让你能够在旧的浏览器中使用 HTML5 和 CSS3 的那些强大的新功能。 8、Large-scale JavaScript Application Architecture构建高扩展的 JavaScript 项目必须要了解的架构和设计模式使用经验。 9、Scalable JavaScript Design Patterns在这个幻灯片中，作者详细介绍了大型 JavaScript Web 应用程序的架构和设计模式。 10、jQuery Proven Performance Tips & Tricks, 2011jQuery 代码的性能测试方法和技巧分享，都是作者多年的最佳实现经验。 11、Building Decoupled Large-scale Applications Using JavaScript (And jQuery)探索 JavaScript 构建大型 Web 应用的优秀设计模式，关注解耦（decoupling）的重要性。 12、Large-Scale JavaScript Development在这个幻灯片中，作者分享了一组优秀的设计模式用于构建低耦合、高扩展的 JavaScript 应用程序。 13、Tools For jQuery Application Architecture (Extended Slides)jQuery 应用架构工具集锦，包括：JavaScriptMVC, Backbone.js, Spine.js, Sammy.js等众多内容。 14、Evaluating jQuery Learning Material教你如何评估 jQuery 学习资料的价值，帮助你挑选有价值的学习内容。 15、jQuery Performance Tips & Tricks使用 jQuery 进行开发时的最佳实践和性能技巧，值得前端开发人员时刻加载脑子里。 关于《Backbone.js应用程序开发》 内容简介本书先从了解MVC、SPA和Backbone的基本知识开始，然后着手构建示例应用程序----一个简单的Todo列表应用程序、RESTful风格的图书应用程序、以及使用Backbone和RequireJS的模块化应用程序。本书的作者是谷歌Chrome团队的工程师Addy Osmani，他还演示了框架的高级应用。本书特色了解Backbone.js如何给客户端带来MVC方面的好处； 编写易于阅读的、结构化的和易扩展代码 ； 使用Backbone.Marionette和Thorax扩展框架； 解决使用Backbone.js时会遇到的常见问题； 使用AMD和RequireJS将代码进行模块化组织； 使用Backbone.Paginator插件为Collections数据分页； 使用样板代码引导新的Backbone.js应用程序； 使用jQuery Mobile，并解决两者之间的路由问题； 使用Jasmine、QUnit和SinonJS对Backbone应用进行单元测试。Addy Osmani博客地址：Addy Osmani Github：
+ 加入我的果篮
(C)2016果壳网&&&&京ICP证100430号&&&&京网文[-239号&&&&新出发京零字东150005号第一章 Hello Backbonejs - [ Backbone.js入门教程第二版 ] - 看云
1.1 基础概念
Backbone，英文意思是：勇气， 脊骨，但是在程序里面，尤其是在Backbone后面加上后缀js之后，它就变成了一个框架，一个js库。
Backbone.js，不知道作者是以什么样的目的来对其命名的，可能是希望这个库会成为web端开发中脊梁骨。
好了，八卦完了开始正题。
Backbone.js提供了一套web开发的框架，通过Models进行key-value绑定及自定义事件处理，通过Collections提供一套丰富的API用于枚举功能，通过Views来进行事件处理及与现有的Application通过RESTful JSON接口进行交互.它是基于jQuery和underscore的一个前端js框架。
整体上来说，Backbone.js是一个web端javascript的MVC框架，算是轻量级的框架。它能让你像写Java（后端）代码组织js代码，定义类，类的属性以及方法。更重要的是它能够优雅的把原本无逻辑的javascript代码进行组织，并且提供数据和逻辑相互分离的方法，减少代码开发过程中的数据和逻辑混乱。
在Backbonejs有几个重要的概念，先介绍一下:Model，Collection，View，Router。其中Model是根据现实数据建立的抽象，比如人（People）；Collection是Model的一个集合，比如一群人；View是对Model和Collection中数据的展示，把数据渲染（Render）到页面上；Router是对路由的处理，就像传统网站通过url现实不同的页面，在单页面应用（SPA）中通过Router来控制前面说的View的展示。
通过Backbone，你可以把你的数据当作Models，通过Models你可以创建数据，进行数据验证，销毁或者保存到服务器上。当界面上的操作引起model中属性的变化时，model会触发change的事件。那些用来显示model状态的views会接受到model触发change的消息，进而发出对应的响应，并且重新渲染新的数据到界面。在一个完整的Backbone应用中，你不需要写那些胶水代码来从DOM中通过特殊的id来获取节点，或者手工的更新HTML页面，因为在model发生变化时，views会很简单的进行自我更新。
上面是一个简单的介绍，关于backbone我看完他的介绍和简单的教程之后，第一印象是它为前端开发制定了一套自己的规则，在这个规则下，我们可以像使用django组织python代码一样的组织js代码，它很优雅，能够使前端和server的交互变得简单。
在查backbone资料的时候，发现没有很系统的中文入门资料和更多的实例，所以我打算自己边学边实践边写，争取能让大家通过一系列文章能快速的用上Backbone.js。
关于backbone的更多介绍参看这个：
1.2 backbone的应用范围：
它虽然是轻量级框架，但是框架这东西也不是随便什么地方都能用的，不然就会出现杀鸡用牛刀，费力不讨好的结果。那么适用在哪些地方呢？
根据我的理解，以及Backbone的功能，如果单个网页上有非常复杂的业务逻辑，那么用它很合适，它可以很容易的操作DOM和组织js代码。
豆瓣的阿尔法城是一个极好的例子----纯单页、复杂的前端逻辑。
当然，除了我自己分析的应用范围之外，在Backbone的文档上看到了很多使用它的外国站点，有很多，说明Backbonejs还是很易用的。
稍稍列一下国内用到Backbonejs的站点：
1. 豆瓣阿尔法城 链接：
2. 豆瓣阅读 链接： 主要用在图书的正文页
3. 百度开发者中心 链接：
4. 手机搜狐直播间 链接：
5. OATOS企业网盘 链接：
1.3 学以致用
现在，我们就要开始学习Backbonejs了，我假设你没有看过我的第一版，那一版有很多很多问题，在博客上也有很多人反馈。但是如果你把那一版看明白了，这新版的教程你可以粗略的浏览一遍，不过后面新补充的实践是要自己写出来、跑起来的。
先说我们为什么要学习这新的东西呢？简单说来是为了掌握更加先进的工具。那为什么要掌握先进的工具呢？简单来说就是为了让我们能够以更合理、优雅的方式完成工作，反应到代码上就是让代码变得可维护，易扩展。如果从复杂的方向来说的话，这俩话题都够我写好几天的博客了。
学以致用，最直接有效的就是用起来，光学是没用的，尤其是编程这样的实践科学。新手最常犯的一个错误就是喜欢不停的去看书，看过了就以为会了，然后就开始疯狂的学下一本。殊不知看懂和写出来能运行是两种完全不同的状态。因此建议新手----编程新手还是踏踏实实的把代码都敲了，执行了，成功了才是。
下面直接给一个简单的Demo出来，用到了Backbonejs的三个主要模块：Views，Collection，Model。通过执行这个例子，了解这个例子的运行过程，快速对要做的东西有一个感觉，然后再逐步击破。
1.4 完整DEMO
这个demo的主要功能是点击页面上得“新手报到”按钮，弹出对话框，输入内容之后，把内容拼上固定的字符串显示到页面上。事件触发的逻辑是： click 触发checkIn方法，然后checkIn构造World对象放到已经初始化worlds这个collection中。
来看完整的代码:
&!DOCTYPE html&
&title&-backbone.js-Hello World&/title&
&button id="check"&新手报到&/button&
&ul id="world-list"&
&a href=""&更多教程&/a&
&script src="http://the5fireblog./staticfile/jquery-1.10.2.js"&&/script&
&script src="http://the5fireblog./staticfile/underscore.js"&&/script&
&script src="http://the5fireblog./staticfile/backbone.js"&&/script&
(function ($) {
World = Backbone.Model.extend({
//创建一个World的对象，拥有name属性
name: null
Worlds = Backbone.Collection.extend({
//World对象的集合
initialize: function (models, options) {
this.bind("add", options.view.addOneWorld);
AppView = Backbone.View.extend({
el: $("body"),
initialize: function () {
//构造函数，实例化一个World集合类
//并且以字典方式传入AppView的对象
this.worlds = new Worlds(null, { view : this })
//事件绑定，绑定Dom中id为check的元素
"click #check":
"checkIn",
checkIn: function () {
var world_name = prompt("请问，您是哪星人?");
if(world_name == "") world_name = '未知';
var world = new World({ name: world_name });
this.worlds.add(world);
addOneWorld: function(model) {
$("#world-list").append("&li&这里是来自 &b&" + model.get('name') + "&/b& 星球的问候：hello world！&/li&");
//实例化AppView
var appview = new AppV
})(jQuery);
这里面涉及到backbone的三个部分，View、Model、Collection，其中Model代表一个数据模型，Collection是模型的一个集合，而View是用来处理页面以及简单的页面逻辑的。
动手把代码放到你的编辑器中吧，成功执行，然后修改某个地方，再次尝试。
页面正在加载中用Backbone.js创建一个联系人管理系统(五) - 狮子座男 - 博客园
Blog Stats
Posts - 47
Stories - 13
Comments - 0
Trackbacks - 0
这是这系列教程最后一部分了.&之前所有的增删改都在前端完成. 这部分我们要把Contact的数据存储到数据库里.
在这里我们需要一个Web服务器,还有一个数据库. 可以是SQLServer.我们需要在
数据库中创建一个表来存储Concat. 表还要有一个主键ID,最好这个ID是unique和
自增长类型的. 虽然现在我们的Concat model里没有这个属性但是要把它存储到数
据库里ID还是有必要的.
Backbone的sync()
sync是Backbone.js提供给我们和服务器沟通的模块. 这是我们唯一还没用到的重要模块.
理解它后我们就可以完整的了解Backbone.js的整个框架.
调用sync()方法可以向服务器发送一个请求. 假设这个方法是通过调用JQuery或者Zepto来执行的请求.
又假设一个RESTful接口在后台使用POST,PUT,GET,DELETE,HTTP等方法.就像我们看到的,Backbone
能够用在headers中加入预处理动作的方法来配置GET,POST方法的回调函数(我觉得应该是call back他写错了).
除了直接调用sync(),models和collections也有方法可以用来和数据库通信. models有destory(),fetch(),
parse()和save()方法, collection有fetch()和parse()方法.不管是models还是collections的destroy(),fetch()
和sync()方法性能都不如sync().parse()方法在服务器返回数据后自动调用. 默认不做任何操作只是返回数据库
响应,但是你重写它来添加你希望在服务器响应前做的操作.
页面载入时的操作
让model数据显示到页面中的方法依赖后台技术.Backbone官方文档中collection的fetch()方法提到,这个方法不
能在页面初始化的时候从服务器请求数据.这部分在精华问答区有提到,一个页面在所有必需的模块没有完全载入前
应该避免初始化AJAX请求.当我们还不清楚一件事的时候听从别人的建议是比较好的主意.这会让我们的应用程序更
加稳定.让model数据显示到页面中的方法依赖后台技术.我们在这个例子里要使用.net技术. 所以需要创建一个&script&
标签来动态加载需要的js模块到页面里.做完这些后我们要开始把原来的index.html改成index.aspx.& 当然我也也
需要index.aspx.cs存放后台代码.但是这会产生一个问题.在ASPX页面中使用Underscore微模版.我们可以把
Underscore文档中的Mustache-style例子直接拿来用.现在的问题是Underscore的模版使用&%=作为指定的占位符
来代替实际数据.这和ASPX页面.net代码使用的一样.Underscore的模版我们在ASPX页面里运行会报出服务器错误.
很幸运有几种办法能解决这个问题,其中最简单的是在模版中修改使用占位符的语法.
Underscore提供的templateSettings这个属性就是为了解决这样的问题的.他能够很容易的用指定的正则表达式来替
换成我们希望的符号.实际上我们可以直接拿'Mustache-style这个例子来用,在app.js文件开始(在闭包内)我们只要加入
_.templateSettings = {
interpolate: /\{\{(.+?)\}\}/g
所有这些支持一个正则表达式方法interpolate, 它允许我们使用{{property}}这个语法还替换&%= property%&
为此我们必须把所有原来的模版的标签替换成新的语法.尽管这和我们原来用的模版变化比很大, 至少我们现在可以用
Underscore了.我们对于Javascript使用&%的地方可以使用用&%-来转换数据.如果我们准备使用这些在我们的模版
里来替换interpolate属性. 我们应该也要配置Underscore里的evaluate和escape.属性.
准备Model数据
我们现在要考虑在页面初始化渲染的时候怎么样把model数据从数据库中如何取到我们的页面中来.我们能很容易的在
ASPX的类文件中加入一个简单的方法. 从数据库中读取记.创建一个对象列表. 每个对象能够表示一个联系人.我们接下
来把数据转化为Javascript数据类型并且插入到页面中.和前面四部分教程使用的模拟数据一样的格式. 我们不用改变前
端代码.作为数组的占位符,我们只要在页面的body里加入一个新的&script&标签. 直接把后台调用的代码放在app.js
引用的签名.后台代码的执行逻辑就是要从数据库取出数据列表然后序列化. 实现的方法有很多种,这些超出了本教程的范围.
我们更关注在页面初始化时如何得到这些数据.随时查看样例代码的文件是一个简单又快速的方法,但是这不是最好的做法.
在此基础上,我们必须要删除app.js里的联系人数组数据. 把页面运行在WVD或者ISS服务器上. 看看是不是和我们完成
第四部分的时候一样.
&和服务器同步应用
&在这个例子里我们用了.net4.0的asmx文件处理前端的请求.按后端看到的数据顺序发送它. 我们应该配置Backbone的
emulateHTTP和emulateJSON属性.在我们修改后的Underscore模版语法后加入下面代码:
Backbone.emulateHTTP = true;
Backbone.emulateJSON = true;
当你创建Backbone应用时你是否需要配置这些属性取决于于你你选择的后端技术是什么?看我们的应用程序编辑数据的
几种方法都实现了. 它能改变联系人的信息,能添加一个新的联系人. 还能够删除一个 已有的联系人.所有的这些前端逻辑
都有了,但是现在要从服务器调用这些方法得要修改.尽管之前页面已经做过渲染了,如果我们删除一个联系人. Backbone
还是会报一个错误,url has not been defined.原因是我们使用了destroy()方法在ContactView类的deleteContact()
方法里.来看看怎么让删除功能恢复正常.首先在model里得定义url属性.为Contact类添加url属性.
url: function () {
return "/ContactManager.asmx/ManageContact?id=" + this.get("id");
我们为url属性指定一个function,返回需要请求的url.在这个例子中我们用asmx文件去处理请求.我们还要为我们的Web
方法取一个名字(ManageContact)& 并且使用model的id属性作为查询参数.现在如果我们在页面上删除一个联系人就向
Web Service提交了一个请求.DELETE方法的原理是在请求的HTTP 头中重写入指定的信息.(X-HTTP-Method-Override)
值为DELETE.利用这个方法我们能让Web service知道应该对数据库做什么操作.下步我们该修改ContactView类的
saveEdits()方法. 当一个联系人编辑完后. 像下面这样使用set()方法来告诉web service.
this.model.set(formData).save();
我们所有要做仅仅是在set()后接着再调用save().save()通过sync()方法代理向服务器提交请求.像之前一般使用PUT把
model的id作为查询字符串发送给服务器.这次http头的Content-Type设置为application/x-www-form-urlencoded.
(如果我们没有配置emulateJSON属性默认是application/json)并且model数据会以表单数据的形式发送. 所以我们修改
这个设置还是很有必要的.所有这些前端的修改都在DirectoryView类的addContact()方法中.之前这个方法里有一条if语句
检查model的类型是否已经存在来判断select按钮是否需要更新.现在我们要把这条if语句改成下面这个样子:
if (_.indexOf(this.getTypes(), formData.type) === -1) {
this.$el.find("#filter").find("select").remove().end().append(this.createSelect());
this.collection.create(formData);
我们把if语句下面的else条件删除掉使代码更加简洁.我们还删除了add()方法并且增加create()方法在原来的位置.create()
方法实际上自动的增加一个model对象到collection中.不需要我们手动创建model实例. 并且通过sync()自动向服务器发送请求.
这次我们不用去设置http头的X-HTTP-Method-Override属性. 因为我们要用的POST方法使用了RESTful接口.和save()
方法一样. create()方法的数据也是以form data形式发送给服务器.和教程开始时候服务器端处理一样. 如何服务器端请求初始
化model数据也不属于本教程的范畴.我们仅仅关注前端部分.和之前教程一样. 本教程demo有包含注释的完整web service代码,
你感兴趣的化可以下载查看.而且还包含了数据库的备份文件. 你可以回复本分得到demo里的数据.
这部分教程,我们学习了如果一些使用Backbone的sync()方法和后台通信的前端方法.我们看到Backbone通过缺省RESTful方式
请求一个指定的URL. 并且在REST的基础上通过配置和传统服务器一同工作.我们还学习了一些使用通过sync()代理和服务器通
信的方法.特别是remove(),save()和create()方法如何向服务器发送请求.我们还学习了如何使用正则表达式修改Underscore.js
模版的插入符号.联系人管理的培训现在结束了.当然我们还能为应用添加更多的功能.我们的教程已经包含用非常出色的Backbone.js
创建功能完善的应用程序的基础知识.
感谢你的阅读.
源文件下载链接: /net/uploads/legacy/1151_bb5/demo.zipjavascript（24）
web前端（14）
首先在此感谢Addy Osmani先生，他写了《Developing Backbone.js Applications》，并且在github上开源，为其开源精神和对js以及Backbone的熟知而敬佩不已，在翻译这篇文章的时候，笔者并没有去联系Addy Osmani获取翻译为中文并将其开源的版权，但是我会在近期完成（最近工作太忙了，请见谅，当然，现在我也就翻译了1/10而已，相信伟大的Addy Osmani先生不会为此而生气的，哈哈）。
同时，笔者深知自己水平和英语功底有限，在此，也请大家积极指出不足，定当及时修复，先行谢过。
=======================================================
以下为与Addy Osmani先生的邮件，在等待其回复。如果他愿意，我就会将翻译开源。
=======================================================
由于Addy Osmani先生不是特别愿意这样做，可能对于其对版权的尊重，我们暂时不会将翻译开源，当然也再次感谢Addy Osmani先生。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：123070次
积分：2190
积分：2190
排名：第12848名
原创：75篇
转载：30篇
评论：79条
PM交流群2群（1群已满）：进群暗号：IT驿站 （水军肆虐，不得已为之） 这里有来自互联网巨头的产品经理，有HR经常更新招聘信息，是您学习、找工作 的好地方
进群须知：
1. 不可讨论与产品经理无关的问题（如果都是吐槽、讨论无益的内容，那么这就失去了主题群的意义，导致很多人屏蔽群信息）； 2. 禁止刷屏，您发布了问题，可能有些人比较忙，无法及时给您回复，但是如果大家都发布的是有含量的问题和想法，那么最终都会有人回复，相信集体的力量可以帮助你解决心中的疑惑；
3. 问问题方法：（1）您需要在自己深思熟虑之后再问问题，社会不是学校，需要您自己发现问题并解决问题；（2）您需要将问题表达清楚，尽量用一条就发不完全，这样才有人愿意去回答您的问题；
文章：21篇
阅读：16758
文章：13篇
阅读：28665移动网站用backbone还是angular?
普通的移动网站（网上订餐的），打算用backbone或angular开发，但还没确定哪种自己更熟悉AngularJS，做过一些网站，但没做过移动站，最担心的就是性能问题，有谁用AngularJS做过移动站吗？性能怎样？Backbone更轻巧，但是我Backbone方面的经验相对欠缺，我只知道蘑菇街新的移动站是用Backbone做的，很喜欢所以比较犹豫，性能可以的话自然希望用AngularJS希望大家给些意见
UPDATE：前端发展太快了，此***有点过时。目前建议用 * * *太好了，终于又可以吐槽Backbone。我搞不懂为什么现在还有人用Backbone，它的流行就是一种病毒般传染的恶性循环。不过目前情况有点改观，感觉很欣慰。Backbone唯一的优势在于学习成本，对于不会如何组织自己的应用程序和懒得去接受比较高级的概念的人来说，Backbone是非常好的选择。吐槽一下Backbone：几乎什么都没干。没有data-binding。纵观这么多MV*框架，Backbone是在这点上最偷懒的一个。所有data和view的数据绑定都要靠自己用事件来绑定。SPA很重要一个需要解决的问题就是视图的嵌套和视图的组合。Backbone你需要搭配一个　或者才好得心应手。视图爆炸。基本上需要的逻辑都要在view里面处理，view又有复杂的嵌套关系。view会非常的零散，加上view之间依赖，基本上没有扩展性可言。为了解决这个问题，当年还写了一个插件来解决相对而言，可维护性和可扩展性极差。虽然Angular库体积本身比Backbone大，但是如果你构建的是一个比较大型的App，最终你用Angular写的代码会比Backbone要少很多，而且不是一两倍的问题。...好了，虽然这样说，Backbone还是有优点的，例如体积比较小，学习成本低。所谓的缺点，其实这也是本身Backbone的哲学所决定了它一些实现。用Angular，它包含很多复杂的概念，也许不懂它为什么要加这么多乱七八糟的东西，但是慢慢地你就会了解一切都是有它存在的原因的。如果你在没有用Angular之前，构建过大型的SPA，并且经过蛋疼的几次大重构以后，就会发现Angular所有的东西filter，service,BDD Test等等的存在都是合理的。有一句话不知道听过没有，大概是这样的：一个程序员不学数据结构与算法，那么他编程一辈子的经验就可以写成一本“数据结构与算法”。Angular的情况也大概一样，它是一群人很多年蛋疼的经验所总结出来的东西，我们就不要走弯路了。但是，Angular很多时候是小题大作，为了让新手们能够不犯低级错误，它做了很多限制。对于前端框架，我认为其实没有必要做这么复杂。一个data-binding的库，加一个事件处理库，加一个动画库，加以一些模块化技巧，就可以松松实现Angular主张的一些东西，搞定各种SPA。一句话总结：如果你看重学习成本，选Backbone；如果你看重以后的可维护性，用什么都好，不要用Backbone，至于移动端问题相信楼上几位大大已经给出***。
backbone吧。虽然我后来重构的时候把backbone删掉了，他还是很nice的
想要省心，angular想要自由，backbone
首选我说说为什么推荐 Angular1.路由是我最关注一个点 你点击QQ 打开一个应用 除了 angular 其他都要新窗口 弹出 这是angular强大的原因2.社区成熟 目前很多开源的JQ插件都转型到angular3.虽然不支持 CMD,但是通过插件 可以完美过度 ， 目前我在移动应用上面引用了SEA 来做加载，应用 localstage 实现 除去 SEA 7KB的体积外的 0KB js加载 打开任何 webapp 秒开4.应用开发简单 可靠 配合上nodejs 完美过度 兼容所有客户端 开发效率高等等等......总之 angular 是目前开发最高效的MVVM框架 （***ALON，vueJS 的路由真心不行 直接抛弃）
google出品放心安全，个人比较倾向ajgular的html模版机制，具体的选择对比，移步《JavaScript MVC框架PK：Angular、Backbone、CanJS与Ember》
backbone其实对学习的人是很有帮助的，我最早做复杂模块时就是在他的帮助下完成的，但是由于使用比较复杂，即便一个很简单的功能也要有一个基本的构建，大量暴露出来的机制必须你自己手动控制，比如何时***什么东西对象集合的各种事件，何时如何render，学习成本并不低，简单的说就是你要hold的住。-angular嘛，学习成本也不低，而且马上就要推翻出2.0了，你学不学都尴尬，我当然是希望一个mvvm能在任何需要的地方都能使用而且平滑升级，而且你现在开发的是手机端，将来又不是不开发电脑端。你学1.2还是1.3还是1.4还是2.0？ 最终我还是选择avalon，更符合国内的国情支持ie6+，国内各山寨浏览器，即便相比于ng，学习更容易使用更方便。
用angular吧。前面说的backbone的学习成本低，我觉得其实backbone的学习成本并不低的。因为backbone只是提供了一个model和view分层的架构，所有逻辑几乎全部在view里面完成，感觉有点乱。另外，backbone因为轻量，所以有时候我觉得只能算一个“半成品”吧，你还要搭配jQueryh和一些其他模板引擎来使用，所以我觉得新手也比较难hold住。
Angular的优势在于它几乎什么都做了，而且有数据绑定，当然缺点也在于绑定。无尽的data-binding虽然减少了代码，也让代码在后期非常难以维护，所有的数据交互全都绑在一块，想要做一些修改的时候就会牵一发动全身。几乎什么都做了也就导致angular only，它几乎不支持其他解决方案，别跟我说angular也可以使用jquery，的确可以，使用起来非常笨拙，jquery与angular的理念冲突，代码会很丑。backbone的优势在于它几乎什么都没干，只是提供了一个model与view分离的解决方案，当然缺点也在此。所有的数据操作逻辑都在model里，所有交互逻辑都在view里，后期维护的时候会非常方便，寻找代码比较容易。但是在做的时候，由于它什么都没干，需要配合requirejs，jquery，再加上一个template插件，灵活是灵活，但是挺费时间的，因为解决方案的选择也是需要很谨慎地。所以，如果项目的时间比较紧张，使用angular吧，它帮你把事情都做了。如果时间比较多，想把项目做得很完美，那就使用backbone吧，你可以使用各种解决方案来解决项目中的各种问题。
可以看看Angular的最新mobile框架
是否适合你
个人觉得CanJS很好：1、学习成本和backbone差不多，很容易学，差不多一天就能学会；2、功能比较强大，基本上该有的都有了。 给的那个链接中描述的内容其实有点老，现在CanJS要强大的多；3、相对于AngularJS，学习成本低很多（至少一天学不会AngularJS），轻很多，功能却不含糊；补充一点：CanJS的文档似乎不是很全面，一些东西没有写在文档里面，需要demo、文档一起看。
已有帐号？
无法登录？
社交帐号登录