Backbone vs AngularJS

首先 Backbone 没有 AngularJS 那么容易上手. 而且作者并没有想让Backbone草根化的意思.

Backbone 比喻成战斗机. 看上去更像是真正的MVC框架, model-views-controller(collection).
书写Backbone的时候模型, 集合数据, 视图都是分开的, 逻辑很清晰. js模版的好处自然不用多说.Backbone实际上是 (( 为了去除掉以往 jQuery 过分依赖DOM来写业务逻辑, 导致后期代码逻辑混乱,DOM和JS上紧耦合. 函数内部层层调用, 甚至还会出现各种夸多个文件层层调用.使得业务最终变得难以维护,越来越臃肿,功能耦合度越高.修改起来就越容易导致其他功能出现难以预料的BUG . )), 而Backbone则很大程度上解除DOM和JavaScript的耦合关系. 更接近MVC的真谛. 但是Backbone只提供基本的工具. 没有进行更加复杂的封装.
Backbone 的优势 :

  1. 体积小, 制定性很强.
  2. 提供underscore工具函数, 按照每个程序员不同的Style来处理数据, 或者你自己封装
  3. 提供自定义模版引擎, 也就是说, 你想怎么渲染, 就怎么渲染
  4. 提供完整的RESTful 风格API.想怎么写就怎么写.
  5. 模型 , 集合, 视图分离. 逻辑清晰. 只要是个稍微懂规范的程序员, 都可以写出不错的逻辑结构.

AngularJS 比喻成坦克. 看上去更加像是弥补HTML构建应用的不足(官方自己这样描述的).把JS逻辑和HTML标签紧密结合在一起, 通过依赖注入, 来实现开发模块化. AngularJS的确提供了很多的遍历, 封装了很多复杂逻辑, 双向数据绑定. 逻辑区域划分. 所以它是重武器.
------------------------------------- 插入 写在这里 -------------------------------------------
Pass : 关于Google 为什么力推 AngularJS? 而不推MVC的鼻祖Backbone
首先是兼容性方便, Backbone 坚持支持IE6以上的浏览器, 原则就是希望大部分浏览器都可以跑Backbone. Angular 在这方面就截然相反了. Angular 由于库本身非常庞大, 模块很多, 为了不让库变的臃肿, 在 AngularJS 1.3 之后就不支持IE9以下的浏览器了( IE9上也有很多问题 ). 也就是说, AngularJS 开发就是针对一些高端的APP. 高端的应用, 换而言之, 一般来说 一些懂一点电脑的用户都知道升级浏览器, 而其中Google 的体验最好.
所以Google 首先力推Angular , 你看不了网站, 被提示版本过低,要么不以后都不看, 要么你会选择升级浏览器, 或者换浏览器, 我想大多数都会升浏览器.
AngularJS 对一些技术含量比较低的搜索引擎来说非常不友好, 没有什么原因. 像Google 的搜索技术已经摇摇领先全世界了, 而且爬虫可以识别JS渲染之后的数据. 这也是为什么Google力推Angular的原因之一/
------------------------------------- 小段结束 -------------------------------------------
AngularJS 的优势:

  1. 容易上手, 必须了解依赖注入
  2. 少量代码就可以完成双向数据绑定. 自动同步改变数据. Backbone需要自己手动
  3. 和HTML结合在一起写逻辑. HTML结构有清晰的划分.
  4. 脏值检测.
  5. 不依赖其他第三方库

1.Backbone 和 AngularJS 比实际上主要优势是在移动端还有它的兼容性, Backbone 组合兼容IE6 - IE11 后现代浏览器都没问题。 AngularJS 撑死就兼容到了IE8,还有很多功能在IE8上都有问题。 而且AngularJS通过对标签添加自定义属性 和 混入模板 来执行操作。所以对于搜索引擎而言, 非常不友好, 无论你是通过混入模板的方式 如{{ item.data }} 还是通过自定义属性 ng-model = “item.data” 来给你标签绑定模型。搜索引擎都无法读取到你标签内部真实渲染后的数据。而读取到{{ item.data }} 这样的模板.(大多数爬虫都是忽略掉页面js的影响的.) . 对SEO很不利。

2.Backbone 和 AngularJS 体积上来看, 并没有什么优势可言,(不算站点开启了gzip) 一个表面上压缩过的AngularJS 大概是101k -120k (没有压缩的开发者版是800K以上,1.2.X版本). 不需要依赖什么其他的js库。
而Backbone 依赖 Underscore.js 压缩后 Backbone + Underscore = 20k + 14k = 34k ~ 36k的样子。 别高兴的太早的, Backbone 还需要引入一个核心库。类似于jQuery这样的。 PC开发时,引入一个压缩过的jQuery1.11.1 是101k~105k,不兼容IE6 7 8 引入压缩后的 jQuery 2.0以上版本是 89K ~ 94k。 所以大小加起来 Backbone + Underscore + jQuery = 130k ~ 145k 。
如果是移动端的开发,不需要引入jQuery ,而是使用Zepto的话。Backbone组合的大小就骤降到了 44k~50k. 这个时候Backbone在移动端的优势就体现出来了。
而这样一来. Backbone + Underscore + jQuery(or Zepto) 就比一个AngularJS 多出了2 次HTTP请求.

3. 这里注意一下, Backbone自己描述是非必要! 非必要!依赖jQuery 和 Zepto. 实际上它没了jQuery 它的View视图就会各种出错, 所以说白了, 他自己就跟jQuery绑在了一起. 要换其他DOM库你还得自己操作,老版本的Backbone还根本就没有提供你改库的权利.
Backbone 表面说不依赖jQuery. 实际上.... 呵呵, 你懂的, 没有jQuery你视图怎么绑定在DOM上? el 根本就不支持类似于 document.getElementByxxxx这样的获取DOM节点.所以我想说, 你如果不想在项目里搞太多库, 找AngularJS. Backbone进去了你就必须用个jQuery!

如果有Ruby开发经验的人就知道, Backbone实际上是把Ruby on Rails给放到前端来了,Ruby程序员对Backbone的结构会是再了解不过了.

1.Backbone的实例非常少.冰山一角.
2.Backbone是一个Framework,而不是个Library.
3.Backbone只提供了工具函数 small、simple、flexible , make sense. 也就是它和jQuery不太一样的地方,不是"write less , do more"
4.Backbone并没有减少代码的编写量,用不好反而增加不少工作量, 一个原本看似简单的功能,用Backbone现实起来看起来总感觉会很别扭. 所以用不好的人就是会"write more. do less"
5.Backbone能不能发挥它的极致完全取决于使用者的水平, 所以作者对FrameWork理解是: "a framework calls you, you call a library"

对于一个新手而言, 不具备一定的原生JavaScript功底是很难驾驭Backbone, 仅仅局限于会用几个$符号来是完全不能理解Backbone的哲学的.

Backbone到目前为止都没有完整的中文文档, 之前有个人翻译了0.5版本的中文文档(基本可以说他没有翻译...), 但是目前Backbone已经是1.0版本以上了. 比之前新增了不少的功能. 可以说, 想学的人,就算你看得懂英文, 看得懂API, 没有实例, 你也不知道怎么样应用. 市面上的书籍也非常少.\
而能把Backbone发挥到极致的, 一般都是老外, 比如说,著名的USATODAY就使用了Backbone. 你很难想象一个全美大型的新闻网站是一个Backbone打造的SPA (注: SPA在国外的应用已经非常普遍了, 见怪不怪,反观国内Web技术可以说还是落后人家5-6年)
USA TODAY: Latest World and US News

从 Backbone在GitHub 上的18258个Star就足够证明它在国外的地位. (注:Jeremy Ashkenas 08年入驻GitHub. 非常深厚的原生JavaScript背景.)

反观 AngularJS , 中文文档不少, 网上也有不少实例, 上手较Backbone来说要容易一些. 而且AngularJS 没有必要强制依赖其他库.而Backbone本身就依赖作者Jeremy Ashkenas 自己开发的另外一个JS工具包UnderScore 可以说你想要学好Backbone, 就不得不去了解和学习UnderScore. 而UnderScore总共有60多个针对数组,集合,函数操作的Method. 只有在项目中实践了才可以说真正理解了UnderScore的用途. 这也造成了 Backbone 学习曲线陡峭, 尤其是对于那些本身对MVC就不了解的新手来说, Model, Collection 理解起来可以说是晦涩难懂.

时间: 2024-08-01 14:53:36

Backbone vs AngularJS的相关文章

摆脱DOM操作,从TodoMVC看angularJS

取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解...... 根据之前的经验,就现有的前端项目,如果最初没有良好的设计,做到一定阶段一定会变得难以维护,就算最初有设计,变化无常的PM也会让你的项目BUG丛生. 一个页面的复杂程度不断的增加,依赖模块也会变得混乱,而其中最为头疼的就是页面级随心所欲的DOM操作了! MVC类的框架可以很好的解决以上问

再叙AngularJS

上一篇讲到AngularJS是在三月17号,已经过去整整3个月. 当时我也只是AngularJS的入门程序员,文章涉及的内容也只是针对框架的特性和Backbone进行简单的对比. 在当时,我正在进行内部平台从Backbone向AngularJS的转型.那时Backbone版的平台,已经趋于稳定,并且已经服务于多家客户. 很多读者会有疑问:既然Backbone版的平台已经稳定且有成功案例,为什么要使用AngularJS再大费周章的进行替换呢? 主要有几个考虑的因素: 1. Backbone思想简单

Vue 全家桶 + Express 实现的博客(后端API全部自己手写)

为什么学习并使用Vue 1.发展趋势 最近这几年的前端圈子,由于戏台一般精彩纷呈,从 MVC 到 MVVM,你刚唱罢我登场. backbone,AngularJS 已成昨日黄花,reactjs 如日中天,同时另一更轻量的 vue 发展势头更猛,号称兼具了 angularjs 和 reactjs 的两者优点. 2.Vue能干吗 移动端的上网需求已经远高于pc端,特别是 hybrid 方式的H5应用中,但是性能问题一直是痛点. 如果使用 SPA(就是俗称的单页应用(Single Page Web A

前端框架

近几个月,工作中用了一个我们骆驼厂自己的一整套移动前端开发框架,包括css框架.js框架. 所以这次想回过头来想想前端框架这个东西. 为什么出现了即么多各种各样的框架: web app概念的出现,可见前端HTML界面开发变得越来越复杂,本质问题可以说是如何将来自服务器端或者用户输入的动态数据高效的反映到复杂的用户界面上. 有哪些比较得到认可的框架:react.backbone.angularjs... 想看看react: 1.用于开发数据不断变化的大型应用程序. 2.原理:虚拟dom机制:在浏览

浅谈移动前端的最佳实践(转)

前言 这几天,第三轮全站优化结束,测试项目在2G首屏载入速度取得了一些优化成绩,对比下来有10s左右的差距: 这次优化工作结束后,已经是第三次大规模折腾公司框架了,这里将一些自己知道的移动端的建议提出来分享下,希望对各位有用 文中有误请您提出,以免误人自误 技术选型 单页or多页 spa(single page application)也就是我们常常说的web应用程序webapp,被认为是业内的发展趋势,主要有两个优点: ① 用户体验好 ② 可以更好的降低服务器压力 但是单页有几个致命的缺点:

JavaScript全讲-架构原则解析

因为近期一直在忙,非常久没有更新,见谅. 上篇我们讲完JavaScript函数式编程的特性,今天我们就来聊聊JavaScript中的架构. 提到JavaScript架构.非常多人会认为不可思议,由于架构多是针对类似Java这样的强语言,而JavaScript一直被看成是弱语言,它有设计模式,能够用来构建架构吗? 答案无疑是肯定的! 设计模式本身是一种非常重量级的东西.当JavaScript被当做辅助使用时.谈架构反而会添加复杂度! 所以这么多年.大家并没有看到JavaScript关于设计模式.架

过去十年,编程语言领域有什么重要进展

如果把当前TIOBE编程语言排行榜的前十拿出来,与十年前的前十做以比对,就会发现这两份名单完全相同! 唯一的不同在于:其中Visual Basic.PHP和Perl与同为十大热门却更现代的C#.Python和JavaScript交换了位置.在这十年间Objective-C确曾进入过十大热门语言,甚至还攀升到了前三的位置,不过在苹果宣布用Swift代替Objective-C之后,它便很快销声匿迹了. 根据这些情况,我们可以得出结论:编程语言并无实质性变化,而且未来十年也不会出现什么新的大型编程语言

关于前端的一些概述

语言本身:1. 工业标准网页标准有w3c控制,尤其是浏览器的开发,所有主流的浏览器都会自觉符合这个组织的标准,当然这些开发商本身就是这个组织的成员.所以新的HTML5,CSS3,ES6 javascript的新特性的得到顺利推动,让大部分主流浏览器都支持它,w3c功不可没. PHP有PHPFIG组织,虽然不是强制性的,但是很多新的框架和库都自觉遵守这个组织的编程标准 Java, C语言都有各自的工业标准准则,来维护各自工业标准. 这个标准其实不是强制性的,虽然很多程序员在自己工作上,不遵守这些工

angular js使用记录

jquery本身并不是框架,而仅仅是一个操作dom的工具,它的核心是操作dom; 目前较火的前端框架:backbone.angularjs.react.avalon.vue; angularjs是由google开发的框架并进行维护,特别针对SPA(单页面)应用开发的框架,但不支持按需加载; MV*; mvvm框架 达到视图与逻辑(模块)同时绑定,同时更新: 1.ng-app——指令,使文档具有angularjs的能力(视图与逻辑混合); angular的核心就是视图与逻辑的同时绑定.同时更新;