热门标签 | 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 的

推荐阅读
  • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
  • 本文讨论了如何根据特定条件动态显示或隐藏文件上传控件中的默认文本(如“未选择文件”)。通过结合CSS和JavaScript,可以实现更灵活的用户界面。 ... [详细]
  • Startup 类配置服务和应用的请求管道。Startup类ASP.NETCore应用使用 Startup 类,按照约定命名为 Startup。 Startup 类:可选择性地包括 ... [详细]
  • FineUI 是一款基于 jQuery 的专业级控件库,专为 ASP.NET WebForms 和 MVC 开发设计。它提供了丰富的用户界面组件,简化了复杂 Web 应用程序的开发过程。 ... [详细]
  • 深入理解Vue.js:从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
  • Spring Boot 中静态资源映射详解
    本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理,包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文,您将了解如何高效地管理和引用静态资源。 ... [详细]
  • 在寻找轻量级Ruby Web框架的过程中,您可能会遇到Sinatra和Ramaze。两者都以简洁、轻便著称,但它们之间存在一些关键区别。本文将探讨这些差异,并提供详细的分析,帮助您做出最佳选择。 ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 深入理解ASP.NET MVC中的_ViewStart.cshtml
    本文介绍了_ViewStart.cshtml文件在ASP.NET MVC 3.0及以上版本中的作用和使用方法。该文件位于Views目录下,主要用于统一配置视图布局和其他全局设置。 ... [详细]
  • 本文介绍了一段使用jQuery实现的用户注册页面表单验证代码,适用于前端开发人员学习和参考。该示例结合了HTML、CSS和JavaScript,确保用户输入的数据格式正确。 ... [详细]
  • jQuery HooRay:一款自创的实用 jQuery 工具插件
    这款插件主要由作者在工作中积累的常用功能开发而成,旨在解决现有插件间的冲突及浏览器兼容性问题。通过整合和优化现有插件,确保其稳定性和高效性。 ... [详细]
  • 在现代Web应用中,当用户滚动到页面底部时,自动加载更多内容的功能变得越来越普遍。这种无刷新加载技术不仅提升了用户体验,还优化了页面性能。本文将探讨如何实现这一功能,并介绍一些实际应用案例。 ... [详细]
  • 探讨了在 Spring MVC 框架下,JSP 页面使用 标签时遇到的数据无法正确显示的问题,并提供了可能的原因和解决方案。 ... [详细]
  • 深入解析Spring Boot自动配置机制
    本文旨在深入探讨Spring Boot的自动配置机制,特别是如何利用配置文件进行有效的设置。通过实例分析,如Http编码自动配置,我们将揭示配置项的具体作用及其背后的实现逻辑。 ... [详细]
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社区 版权所有