Advertisement
  1. Web Design
  2. Frameworks
Webdesign

写给新手的JavaScript框架选择指南

by
Difficulty:IntermediateLength:MediumLanguages:

Chinese (Simplified) (中文(简体)) translation by 4EB Studio (you can also view the original English article)

当选择一个正确的JavaScript框架的时候无疑都会出现相当困惑的场景。本指南将引导刚起步的前端开发人员如何在水如此之深的领域里面选择一款合适的框架。我选择的每一个框架都会包括一个简短的基本描述,语法以及一些有用的学习资源。

什么是JavaScript框架?

在开发界,“框架”可以被定义为一个Javascript库,用来展示和渲染数据驱动(data-driven)的交互界面。 当交互被触发的时候,他们用来帮助渲染数据到用户端。所有这些库之间都会有细微的差别,但是它们的目的都是一样的,当交互发生的时候显示新的数据

让我们检验一下这些强大的框架来深入的帮助我们更好的通过场景来进行筛选。

JavaScript框架选手

下面列出的框架包括Vue,React,Angular以及Ember,选择其中一个框架的时候会有很多选项。每个选项都是基于社区的成长以及可持续发展,GitHub的活跃度,项目已供开发人员使用的时间长短,以及项目是否还在被大量的开发团体和开发公司使用。

Vue

首次提交:2013年7月27日
文件大小:27.5KB(压缩版本)

Vue宣称是一款渐进式框架,易用,灵活,性能优化。如果你有一定的前端基础(HTML, CSS, JS),那么你已经在使用Vue中占据了优势。

”Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。“ – VueJS 介绍文档

下面是 Vue 库提供的基本的“Hello World”示例:

通过在代码中使用“属性值(attribute values)” 可以让Vue库更具有表达性。来看下面这个使用这些属性的语法示例:

除了语法,Vue.js还允许处理用户输入,创建组件化模版,使用条件和循环绑定数据到DOM,以及一个来自于Web 组件规范的“声明式渲染”。

学习资源:

React

首次提交:2013年5月29日
文档大小:7.3k(压缩版本)附件:11.3KB(压缩版本)

React自定义为使用动态数据驱动来创建用户界面的JavaScript库。由Facebook的员工开发,并在GitHub上开源。 当我说你可以让html在Javascript中工作的时候你可能会觉得有些发毛,但是很不幸,这就是它的工作原理

让我们来看一下React介绍文档中的语法示例。 这个示例创建了React的“Component subclasses”,尽管它还有一些不同类型的组件。你在这个html代码中可以注意到组件的语法和XML很像:

React带有额外选项,例如被认为是一组实用工具模块的附件。这些附件包括帮助处理动画和转场的实用工具,性能分析工具,测试案例助手以及更多。React文档建议和Babel一起使用React以便可以在你的JavaScript代码中使用ES6JSX。还有一款可以在ChromeFirefox上使用的React开发工具扩展应用,让你可以在你的浏览器开发工具中检视React组件树状结构。

学习资源:

Angular

首次提交:2014年9月18日(GitHub)
初次发布:(根据维基百科)2010年10月20日
文件大小:CLI工具。不再是一个独立的JS文件。

Angular由google的项目小组开发。自从HTML不再意味着动态语言后,Angular通过允许在代码标记中扩展属性延伸了HTML词汇的含义。 这最终允许“声明式绑定(declarative bindings)”到事件,以便显示动态数据和基于交互的状态。通过在RxJS,Immutable.js或者另外一个推动模型(push-model)上建立数据模型来满足大型数据的需求。并且,你可以使用你自己的组件使用一系列广泛的现成的组件来扩展你的模版。

学习如何基于Angular构建应用程序,并复用代码和技能来构建适用于所有平台的应用。比如:Web应用、移动Web应用、原生移动应用和原生桌面应用等。

Angular的语法就HTML的属性和Mustache-esque占位符而言没有什么新鲜的,除了需要以ng-开头命名,正如你在下面的示例中看的一样:

Angular主要是由组件构成的,这些组件是HTML模版的组合以及控制部分屏幕的组件类。

上述示例中以.ts为后缀名的文件是由TypeScript语言写成的。该语言开始于Javascript相同的语法和语义。 该语言是JavaScript的超集,可以编译成纯的JavaScript,或者你可以把它理解成为“语言增强器”,比如语法糖(syntax sugar)。当需要编译你的代码的时候,命令行工具(CLI)将会起到帮助作用。

学习资源:

Ember

首次提交:2011年4月30日
文件大小:

Ember是一个库,和我们讨论过的其它几个很类似,并集成了Handlebars。对于不熟悉Handlebars的那些人来说,Handlebars是一个模版语言来创建静态页面,和你可能熟悉的Jekyll很像。开发人员使用Handlebars描述标记,使用Javascript为组建执行基于交互的自定义行为。

“Ember是一个Javascript应用框架,用来创建单页,客户端的网页应用,使用MVC模式。”

Ember由Node建立,并使用了大量的Node.js模块来运行。Ember还具有命令行界面工具(如果你愿意的话可以通过npm安装),提供了一个标准的项目结构和一套开发工具包括一个附件系统。 它还包括一个开发服务器以及通过命令行传递建立一个环境标志。

Ember的语法看上去没什么特殊的地方,依托对象文本和我们都非常熟悉JavaSript中的圆点技法,再加上Handlebars的模板调用。

上面这个示例是一个最基本的语法和文件结构。示例代码将被导出并扩展成一个Ember控制器(Ember controller),并将对象文本的名字编译到你的标记中。

值得一提的是,Ember的路由性能可以让你防止网页断点。每一个你创建的路由,默认可以获得URL以及一个后退按钮,API非常容易使用(并且对于那些在服务器端网页框架有经验的人来说非常熟悉)。Ember.js免费,开源,并且将一直像他们网站上声明的的那样。

学习资源:

总结

框架选择总是归结为个人编码偏好和项目长期的信心。如果你想要去更深入X与Y的对比来帮助你做出选择,Vue在他们的网站上提供了一个非常正规的解读和对比,除了上述提到的框架外,还包括Knockout, Polymer以及Riot。你也可以做一下我们的测试,将会帮助你缩窄你的选择范围。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.