Backbone vs AngularJS

Posted 2020-07-19 随便写写

首先 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 理解起来可以说是晦涩难懂.