热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

AngularJS、Backbone.js和Ember.js的比较

1 介绍我们准备在这篇文章中比较三款流行于Web的“模型-视图-*”框架:AngularJS、Backbone和Ember。为你的项目选择正确的框架能够对你及时交付项目的能力和在以后维护你自己代码的能力产生巨大影响。你也许想基于一款可靠的、稳定的和成熟的框架来构建项目,但又不想为此受到约束。Web发展迅速——

1 介绍

我们准备在这篇文章中比较三款流行于Web的“模型-视图-*”框架:AngularJS、Backbone和Ember。为你的项目选择正确的框架能够对你及时交付项目的能力和在以后维护你自己代码的能力产生巨大影响。你也许想基于一款可靠的、稳定的和成熟的框架来构建项目,但又不想为此受到约束。Web发展迅速——新技术产生,旧的那套方法很快跟不上潮流。如此形势之下,我们准备仔细深入的比较这三个框架。

2  框架概览

今天我们提到的所有框架有许多共同点:都是开源的,遵从 MIT 协议,并且都尝试通过 MV* 模式来解决开发单页面应用的问题。它们都有类似的概念:视图,事件,数据模型和路由。我们先简单回顾一下有关的历史和背景知识,然后再展开深入比较这三款框架。前端UI共享

AngularJS 诞生于 2009 年,当时作为一个大型商业产品的一部分叫做 GetAngular。不久之后,Misko Hevery,GetAngular 项目创建者之一,花了仅仅三周时间,用 GetAngular 重写了一个曾经耗时 6 个月才完成的,有 17K 行代码的页面应用,并将代码削减到 1,000 行左右,于是成功的说服了谷歌开始赞助该项目,并将其开源,也就是我们今天看到 AngularJS 。Angular 的特点是拥有双向数据绑定,依赖注入,易于测试的编码风格,以及通过使用自定义指令可以简单的扩展 HTML。

Backbone.js 是一个轻量级的 MVC 框架。诞生于 2010 年,它作为那种笨重全功能的 MVC 框架,比如说 ExtJS, 的一个代替品,迅速流行开来。 很多服务都使用了它,比如 Pinterest, Flixster, AirBNB 等等。

Ember 则要回溯到 2007 年,最开始是以 SproutCore MVC 框架展现在世人面前,由 SproutIt 开发,后来是 Apple,再后来到 2011 的时候,jQuery 和 Ruby on Rails 的核心贡献者 Yehuda Katz 参与了进来。有名的 Ember 用户包括了 Yahoo!, Groupon, 和 ZenDesk。

3 社区

社区是在选择一个框架的时候,要考虑的最重要因素之一。大社区意味着更多的答案,更多的第三方模块,更多的 YouTube 教程…你,明白了么。我做了个统计,截止 2014年8月16日,Angular 是绝对的王者,作为 GitHub 上第六大星级项目,在 StackOverflow 上的提问比 Ember 和 Backbone 加起来还多,你自己看:

指标 AngularJS Backbone.js Ember.js
Github 的点赞星数 27.2k 18.8k 11k
第三方模块 800 ngmodules 236 backplugs 21 emberaddons
栈爆网的提问件数 49.5k 15.9k 11.2k
YouTube 件数 ~75k ~16k ~6k
GitHub 贡献者 928 230 393
Chrome 插件用户 150k 7k 38.3k

所有这些指标,显示的仅仅是每个框架的当前状态。看看哪个框架增长最快也是很有趣的,你有福了,通过谷人希的趋势跟踪。

4 框架大小

页面的加载时间是你网站成功的关键。当涉及浏览速度的时候,用户没太多耐性 — 所以很多情况下你要尽可能让你的应用跑得越快越好。使用框架,有两个因素会对应用的加载时间产生影响: 框架的大小和它启动的时间。

Javascript 资源通常都会被经过精简和压缩,所以我们来比较一下压缩版。但是只看框架的大小肯定不够的。Backbone.js,尽管是最小的 (只有 6.5kb),但是必须 Underscore.js (5kb) 和 jQuery (32kb) 或者 Zepto (9.1kb),而且你还有可能还有一些第三方插件要加进来。

框架     净大小      包含依赖之后的大小
AngularJS 1.2.22      39.5kb      39.5kb
Backbone.js 1.1.2      6.5kb      43.5kb (jQuery + Underscore)
     20.6kb (Zepto + Underscore)
Ember.js 1.6.1      90kb     136.2kb (jQuery + Handlebars)

 

5 模板

Angular 和 Ember 都有模板引擎。而另一方面 Backbone,把这个选择权留给了你。感受模板引擎的异同最好的办法就是上点代码,好的,我们开始。我们将演示把一个列表转换成 HTML 列表的例子。

5.1 AngularJS

Angular 的模板引擎仅仅是在 HTML 上使用绑定表达式。而绑定表达式又仅仅是两层大括号而已:

1 <ul>
2   <li ng-repeat="framework in frameworks" 
3       title="{{framework.description}}">
4     {{framework.name}}
5   li>
6 ul>

5.2 Backbone.js

Backbone 可以和许多第三方模板引擎集成,默认的选择是 Underscore 模板。 因为 Underscore 是 Backbone 的

推荐阅读
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]
  • Android实战——jsoup实现网络爬虫,糗事百科项目的起步
    本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时,使用50作为默认值;当输入字段填充有-20或更多(负数)时,使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码,用于动态地根据条件使用默认值。 ... [详细]
  • 如何压缩网站页面以减少页面加载时间
    本文介绍了影响网站打开时间的两个因素,即网页加载速度和网站页面大小。重点讲解了如何通过压缩网站页面来减少页面加载时间。具体包括图片压缩、Javascript压缩、CSS压缩和HTML压缩等方法,并推荐了相应的压缩工具。此外,还提到了一款Google Chrome插件——网页加载速度分析工具Speed Tracer。 ... [详细]
  • gitlab重置password
    ruby没怎么学,自己搭建的gitlab的rootpassword又忘了。幸好看见此帖子,试验okhttp:roland.kierkels.netgitreset-your-git ... [详细]
  • Allegro总结:1.防焊层(SolderMask):又称绿油层,PCB非布线层,用于制成丝网印板,将不需要焊接的地方涂上防焊剂.在防焊层上预留的焊盘大小要比实际的焊盘大一些,其差值一般 ... [详细]
  • 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之六 || API项目整体搭建 6.1 仓储模式
    代码已上传Github+Gitee,文末有地址  书接上文:前几回文章中,我们花了三天的时间简单了解了下接口文档Swagger框架,已经完全解放了我们的以前的Word说明文档,并且可以在线进行调 ... [详细]
  • 本文介绍了Composer依赖管理的重要性及使用方法。对于现代语言而言,包管理器是标配,而Composer作为PHP的包管理器,解决了PEAR的问题,并且使用简单,方便提交自己的包。文章还提到了使用Composer能够避免各种include的问题,避免命名空间冲突,并且能够方便地安装升级扩展包。 ... [详细]
  • 本文介绍了如何在Jquery中通过元素的样式值获取元素,并将其赋值给一个变量。提供了5种解决方案供参考。 ... [详细]
  • 本文介绍了DataTables插件的官方网站以及其基本特点和使用方法,包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性,以及国际化和动态创建表格的功能。此外,还提供了参数初始化和延迟加载的示例代码。 ... [详细]
  • 获取ul中第一个li元素的五种方法和多个ul中第一个li元素的四种方法
    本文介绍了获取ul中第一个li元素的五种方法和多个ul中第一个li元素的四种方法,包括使用jQuery的选择器和遍历方法。通过这些方法,可以方便地获取到所需的元素,并进行相应的操作。 ... [详细]
  • 云原生应用最佳开发实践之十二原则(12factor)
    目录简介一、基准代码二、依赖三、配置四、后端配置五、构建、发布、运行六、进程七、端口绑定八、并发九、易处理十、开发与线上环境等价十一、日志十二、进程管理当 ... [详细]
  • mui框架offcanvas侧滑超出部分隐藏无法滚动如何解决
    web前端|js教程off-canvas,部分,超出web前端-js教程mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格 ... [详细]
author-avatar
小冰的大夢想
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有