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 的优势 :
- 体积小, 制定性很强.
- 提供underscore工具函数, 按照每个程序员不同的Style来处理数据, 或者你自己封装
- 提供自定义模版引擎, 也就是说, 你想怎么渲染, 就怎么渲染
- 提供完整的RESTful 风格API.想怎么写就怎么写.
- 模型 , 集合, 视图分离. 逻辑清晰. 只要是个稍微懂规范的程序员, 都可以写出不错的逻辑结构.
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 的优势:
- 容易上手, 必须了解依赖注入
- 少量代码就可以完成双向数据绑定. 自动同步改变数据. Backbone需要自己手动
- 和HTML结合在一起写逻辑. HTML结构有清晰的划分.
- 脏值检测.
- 不依赖其他第三方库
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 理解起来可以说是晦涩难懂.
Backbone vs AngularJS的更多相关文章
- 以todomvc为例分析knockout、backbone和angularjs
一.整体结构 项目github地址https://github.com/tastejs/todomvc/ 排除通用的css样式文件和引用的js库文件,仅看html和js 1.1 knockoutjs版 ...
- 摆脱DOM操作,从TodoMVC看angularJS
取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...
- 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...
- 初探React,将我们的View标签化
前言 我之前喜欢玩一款游戏:全民飞机大战,而且有点痴迷其中,如果你想站在游戏的第一阶梯,便需要不断的练技术练装备,但是腾讯的游戏一般而言是有点恶心的,他会不断的出新飞机.新装备.新宠物,所以,很多时候 ...
- (一)半小时开发一个APP
[前言] HPP是什么? HybirdApp的简称,详细介绍参见:HPP--让所有中小企业拥有自己的APP 说白了就是用html+css+js开发app,包括ios和android版本. HBuild ...
- 前端这条路怎么走,作为一名后端er,说说我的见解
近期都游荡在各大群里看大家的讨论,经常看到关于程序员生涯的一些讨论,颇有感触,最近的国庆的确过得有些堕落,都没怎么更新,仔细相信还是应该分享点经验给大家的!想必大家都经历过面试,这是进入一家公司的必要 ...
- 抛开react,如何理解virtual dom和immutability
去年以来,React的出现为前端框架设计和编程模式吹来了一阵春风.很多概念,无论是原本已有的.还是由React首先提出的,都因为React的流行而倍受关注,成为大家研究和学习的热点.本篇分享主要就聚焦 ...
- 八款你不得不知的开源前端JS框架
angular.js Angular.JS是一个开源的JavaScript框架,最适于开发客户端的单页面应用.它实现了前端MVC架构,专注于扩展HTML功能,提供动态数据绑定(Data Binding ...
- Sea.js创始人玉伯的前端开发之路
在Web应用程序的用户体验越来越被重视的今天,前端开发的地位也上升到了前所未有的高度,而随之而来的也有更多的挑战. 为了将前端开发者繁重的工作变得简单,框架应运而生.国内也不乏一些非常优秀的前端开发框 ...
随机推荐
- jenkins按版本发布maven项目
1.先为java这个项目创建三个版本 vim pom.xml vim src/main/java/com/ghz/testweb/App.java git add . git commit -m &q ...
- 优雅的使用ImageGetter
https://daihanglin.github.io/2017/10/13/imageGetter/ 1. 使用ImageGetter的场景 Android中用于显示文本的控件为textVie ...
- (入门SpringBoot)SpringBoot配置全局异常(五)
Spring的全局异常,用于捕获程序员没有捕获的异常.具体请看下面代码: 1.ControllerAdvice拦截异常,统一处理.通过Spring的AOP来管理. @ControllerAdvicep ...
- IntelliJ IDEA提示:Class JavaLaunchHelper is implemented in both的错误解决
这个错误是Mac下特有的,并且据说是一个老Bug,不影响使用. 修复方法: Help->Edit Custom Properties,没有这个properties文件的话,IDEA会提示创建,然 ...
- xamarin android 获取根证书代码
Java.Security.KeyStore keyStore = Java.Security.KeyStore.GetInstance("AndroidCAStore"); ke ...
- Canvas的效果操作及save()和restore()方法应用
平移.缩放.旋转等操作等于是,我在一个正的画布绘制好图,然后再把画布做旋转.平移.缩放等等的效果. 也就是说,我使用的X.Y坐标还是正常的坐标(没旋转.平移.缩放等之前的坐标). save()和res ...
- 【Todo】Java并发学习 & 示例练习及代码
接上一篇:http://www.cnblogs.com/charlesblc/p/6097111.html <Java并发学习 & Executor学习 & 异常逃逸 & ...
- qt实现又一次登录
1.需求 须要实现程序操作过程中的又一次启动,即常常说的又一次登录功能 2.解决 在main函数中检測exec的返回值决定是关闭还是重新启动.使用注冊函数atexit(relogin)来实现这个功能 ...
- 在.NET中怎样取得代码行数
文章目的 介绍在.NET中取得代码行数的方法 代码 [STAThread] static void Main(string[] args) { ReportError("Yay!" ...
- FFmpeg for ios架构:中级
FFmpeg这部分想了非常久,也没找到比較好的解说方式.本来想像其他博客一样.对着代码一行行的分析.但后来感觉不太现实,FFmpeg应用在IOS上怎么说代码最少也有个5.6k行(包含音视频.业务逻辑) ...