值得推荐的JavaScript框架库
2011-02-24 11:07:58 阿炯

JavaScript 是 Web 开发与设计中不可或缺的东西,不管是一个简单的网页还是一个专业的站点,也不管你是高手还是菜鸟;如今 JavaScript 库越来越强大,可以胜任许多复杂的工作,然而同时,人们在众多 JavaScript 库面前又觉得无所适从。这里将使用 Google 搜索出排名前 10 位的 JavaScript 库,并对它们逐一进行简单介绍。

1. jQuery:The Write Less, Do More, JavaScript Library

jQuery 是一个很新的 JavaScript 库,它的口号是“几行代码,能干大事”(Write Less, Do More),它是拥有最多插件和扩展的 JavaScript 库,jQuery也同样是一个轻量级的库,它拥有强大的选择器,出色的DOM操作,可靠的事件处理、出色的兼容性,以及链式操作等等,这些优点吸引了一批批JavaScript开发者去学习它、研究它。像一些非常著名的开源软件:wordpress、Drupal都使用了它。以下是 jQuery 现状:

* 当前版本:1.5
* 作者:John Resig
* 拥有19种语言的教程:教程总计183种。
* 著名用户:超过1000个
* 易学
* 对设计师来说非常易学,使用 CSS 语法
* 拥有大量有趣的扩展
* 拥有非常出色的社区,可能是最大的
* 被数以百万的站点使用,包括诸如 Google, Dell, CBS, NBC, DIGG, Bank of America, Wordpress, Drupal, Mozilla 等著名站点。

2. MooTools – a compact javascript framework

MooTools 是一个使用 MIT 许可的开源项目,意味着你可以在任一场合使用或对它就行修改。这是一套轻量级的JavaScript库,是一个简洁、模块化、面向对象的JavaScript框架。其语法几乎跟Prototype一样,但却提供了更强大的功能和更好的扩展性及兼容性,其模块化思想非常优秀,核心代码只有8K。用到什么模块可即时导入,即使是完整版也不超过160K。还有它彻底完全的面向对象的编程思想、语法简洁直观、文档完善。

* 当前版本:1.2
* 作者:Valerio Proietti
* 著名用户:w3c, cnet, bing, …
* 官方站上的插件数目:4
* 拥有更好的面向对象结构
* 它的动画效果更平滑
* 语法及对象句柄更富逻辑

3. Prototype:Easy Ajax and DOM manipulation for dynamic web applications

被一些大型媒体公司和组织使用,Protorype 是一个很独特的 JavaScript 库,逐渐成为 Web 引用开发者的代码基础,随着1.6版本的推出,Protorype 在性能,用户自定义事件以及同现代浏览器兼容方面越来越完善。这个算是最早成型的JavaScript库之一,它对JavaScript的内置对象(如String对象、Array对象等)做了大量的扩展。现在很多项目中都使用它,但这很大程度上是由于以前项目用了,现在不得不继续沿用。这个库可以看做是把很多好的有用的JavaScript的方法组合在一起的一个JS库,你甚至可以在你需要的时候随时将其中的几段代码抽出来放进自己的脚本里。但也正是由于它成型年代早,在整体对于面向对象的编程思想把握上并不是很到位,导致了结构的松散,不过现在Prototype也在改进。

* 最新版本:1.7
* 作者:Sam Stephenson
* 著名用户:NASA, CNN, NBC, …
* 插件数目:150+
* 更适用于大型 Web 程序

4. Dojo Toolkit:great experiences for everyone

Dojo 的内核小巧、快、精深,可用来创建反应灵敏的 Web 程序,拥有很出色的 UI 工具,在可访问性、本地化方面也做得很好。Dojo强大之处在于它提供了很多其他JavaScript库所没有提供的功能。比如离线存储的API、生成图标的组件、基于SVG/VML的适量图形库、Comet支持等等很多优点。是非常适合企业级应用的一款JavaScript库。同时它也得到了一些大公司的支持,如IBM、SUN、BEA等。同时它的缺点也是很显著的:学习曲线陡,文档不齐全,最要命的就是API不稳定,每次升级都可能导致已有的程序失效。但从它的1.0版以后看起来,情况有所好转。未来是个很有潜力的库。

* 最新版本:1.4
* 开发组织:Dojo Foundation
* 著名用户:AOL, IBM, Sun, …
* 支持客户端数据存储
* 支持服务器端数据存储
* 异步通讯

5. script.aculo.us:easy-to-use, cross-browser user interface JavaScript libraries

script.aculo.us 是一个开源 JavaScript 库,适用于创建视觉效果和 UI 行为,最新版本拥有一些新功能,如创建加载进程,Windows Media 和 Real Media 播放器检查等。

* 最新版本:1.8
* 作者:Thomas Fuchs
* 著名用户:Gucci, Feedburner, Ruby on Rails, …
* Documentation wiki & Usage (文档)
* script.aculo.us 是对 Prototype 的扩展,增加了视觉效果,UI 控制等功能。

6. ExtJS:Cross-Browser Rich Internet Application Framework

ExtJS 是一个很出色的跨浏览器 JavaScript 框架,可以用来创建富 Web 应用,支持所有现代浏览器,拥有大量插件和扩展。ExtJS,也常简称Ext。原本是对YUI的一个扩展,主要是用于创建前端用户界面,它提供了极其丰富的组件。如今已经发展到可以利用包括jQuery 在内的多种JavaScript框架作为基础库,而Ext作为界面的扩展库来使用。但由于侧重于界面,所以本身比较臃肿,不压缩的话文件上兆(MB),所以使用之前请先考虑。请注意,Ext并非完全免费的,如果用于商业用途的话,是要付费获得授权许可的。

* 最新版本:3.3
* 作者:Jack Slocum
* 著名用户:Gucci, Feedburner, Ruby on Rails, …
* Download | Samples & Demos | API Documentation
* 拥有很出色的部件和技术支持

7. UIZE:supporting widgets, AJAX, DOM, templates, and more

UIZE 的一些现状:
- 一个开源 JavaScript 框架
- 很容易更换 CSS 皮肤
- 大量内置饰件
- 令人目眩的效果和强大的功能

* 压缩后的尺寸:4.47 MB
* 作者:Chris van Rensburg

8. YUI Library:is proven, scalable, fast, and robust

YUI 是本列表中规模最宏大的 JavaScript 库,它拥有数不清的强大功能,插件以及扩展,当然要掌握它也需要很长时间。这套库是Yahoo打造出来的JavaScript库,全名是The Yahoo! User Interface Library。它提供了一些比较丰富的关于DOM操作、Ajax应用等一系列的封装,同时它还包括了几个核心的CSS等。是一套比较齐全完备的富交互网页程序工具集。本身的文档极其完备,以至于很少看到第三方写相应的文章。本身的代码编写也非常的规范,扩展性也很不错的一套库。

* 最新版本:3
* 开发公司:Yahoo! Developer Network
* 著名用户:LinkedIn, Wikia, NewsVine, …

9. Archetype
Archetype JavaScript Framework

Archetype 现状:
* 最新版本:0.1
* 作者:Temsa & Swiip
* 用户:GifTeer, Meteo France, …

10. qooxdoo:the new era of web development

qooxdoo 是什么?是一个面向对象 JavaScript 库,包含跨平台开发工具链,顶级 GUI 工具以及高级客户端服务器通讯层,它是一个基于 LGPL/EPL 许可的开源项目:

* 最新版本:1.2
* 核心开发者:1&1 Internet AG
* Download | Samples & Demos | Documentation
* 完整的 GUI 工具包
* 支持对象间的拖放操作


JavaScript 后端开发者必须跨越的门槛

在IT行业中,后端开发者发挥着至关重要的作用。尤其是在技术变革日新月异的时代,更需要后端开发者不断提升自我的技能;但无论技术迭代如何迅速,后端开发人员的“基本功”都不可以落下。本节展开讨论成为JavaScript堆栈后端开发人员,必须经历的那些成长经历。越来越多编程语言和开发工具的出现,让开发者能够方便且快捷地开发和部署应用程序。其中,后端开发多是指服务器端编程,开发人员通过创建应用程序体系结构和业务逻辑,以此处理和存储数据并输出有用的信息。

毋庸置疑,成为后端开发人员必然有门槛,掌握Web和操作系统的基础知识、了解数据库、计算机网络协议、数据结构和算法、开发工具等,逐渐成为后端开发人员的入门技能。后端编程语言、框架和堆栈也很多,例如JavaScript、Python、PHP、Java、Ruby、Perl等。那么,成为JavaScript堆栈后端开发人员,需要面临那几个必须经历的阶段呢?

第1阶段:掌握Web基础知识

在开发人员的初始阶段,学习Web的基础知识是至关重要的。因为拥有Web概念可以帮助开发人员更好地了解互联网的工作原理,例如使用哪些协议、如何传递消息等。

首先是了解Web中的一些基本概念,例如HTTP的概念、HTTP的基本方面、HTTP 请求的类型及作用、客户端和服务器模型、OSI 模型、DNS 工作原理等。

第2阶段:了解操作系统知识

操作系统,管理着计算机上的所有软件和硬件。它执行内存和进程管理,处理输入和输出等。通过运行操作系统,进一步运行完整 Web 应用的服务器。因此,开发人员有必要了解操作系统整体实现,以最大限度地提高性能并优化内存。

在此阶段,开发者需要了解操作系统体系结构、文件系统、基本CLI命令、内存和进程管理、操作系统线程等。

第3阶段:学习后端框架和语言

在开发者学习要使用的后端框架和语言的过程中,第一步是学习JavaScript。学习JavaScript的基础知识,例如数据类型、循环、选择、函数、对象、类、数组、字符串、正则表达式等。

JavaScript 由ECMAScript、文档对象模型(DOM)和浏览器对象模型(BOM)三个部分组成。ECMAScript是JavaScript所基于的脚本语言规范。它引入了新的JavaScript功能,如箭头函数,异步等待,模板文本等,这些功能可以对有效的编码很有帮助。

Node.js是一个开源的、跨平台的、后端的JavaScript运行时环境,它在JavaScript引擎上运行并执行JavaScript代码。开发人员可以学习基本的节点JavaScript模块,例如fs、path、os等。

第4阶段:使用服务器框架和API开发

首先,服务器端框架作为后端开发中的主要角色,它是前端和后端(节点应用)之间的通信网关,使编写、维护和扩展Web应用更加容易。服务器端框架提供工具和库来实现简单、常见的开发任务,包括路由处理,数据库交互,会话支持和用户验证,格式化输出,提高安全性应对网络攻击,也能使开发人员完全控制传入和传出的请求/响应,提供端点,执行中间件功能等。

其次,API开发作为一种实践阶段,开发人员将学习如何使用Express JS和节点JS创建简单的REST API并执行CRUD操作。使用快速中间件验证传入请求,使用路由器处理端点等。Postman 在测试 API 端点方面很有帮助。添加更多内容并了解 swagger 和 Open API。

第5阶段:使用模板引擎

通常,前端(React应用程序)和后端(快速应用程序)之间的通信是使用MERN堆栈中的API调用完成的。客户端从服务器请求数据,服务器将请求的数据发送回客户端。但如果开发人员的项目很小,并且对 React 或其他前端框架不了解,可以使用模板引擎。模板引擎可帮助开发人员创建静态HTML模板文件,并在运行时将模板文件中的变量替换为实际值,这使其成为动态网站。模板引擎与Express JS的集成一起工作。它从数据库获取数据值,并可以通过HTML 模板文件呈现这些值。

第6阶段:了解数据库

数据库在后端开发中发挥着巨大的作用。数据库用于以结构化方式存储数据以及访问和维护数据。

后端应用程序可以通过使用MongoDB,MySQL等第三方npm包查询数据库来直接与数据库交互。如果开发人员不了解SQL或数据库语言,则需要学习任何ORM/ODM作为中间件,将对象方法转换为复杂的数据库查询,这些中间件为开发人员提供了一个名为模型的完整结构,用于在将数据输入数据库之前验证数据。此外,它在对象模型之上提供了一个额外的安全层。

第7阶段:关注安全性

安全性是企业级 Web 应用程序的一大关注点。单个漏洞会导致数据泄露或应用程序故障。Web 应用中应有适当的验证、身份验证和授权。因此,开发人员在该阶段可能会涉及促进应用更安全的一些技术,例如:
JWT:使用令牌防止对受保护资源的意外访问;
Cookie:用于存储有关访问网页的信息;
会话:用于维护与服务器的安全连接;
CORS:使用CORS从一个网站向另一个网站发出请求;
哈希:使用中间件通过salt对密码进行哈希处理;
加密/解密:使用中间件加密和解密重要数据;
SSL:使用SSL认证来保护事务;
限制:使用中间件应用请求限制,防止DDOS攻击。

第8阶段:使用消息代理

现代应用程序非常复杂,由于时间复杂度大,CPU密集型操作、大量数据处理以及多个服务之间的API通信存在耗时的问题,会带来糟糕的用户体验。消息代理成为帮助克服其中一些困难的解决方案之一。消息代理由 3 个组件组成:
制作人:生产者发送有关主题的消息。一个或多个发布者可以针对同一主题发布内容;
消费者:订阅者订阅主题,发布到该主题的所有消息都将由该主题的所有订阅者接收;
队列/主题:队列保存由生产者发布并由消费者访问的消息。

第9阶段:测试完整的API

在实时服务器上部署Web应用程序之前,为了减少单个错误的输入或缺少数据导致正在运行的服务器出现故障,需要进行测试。测试可以根据多个标准在多个级别上进行,开发人员可以检查Web应用是否返回了正确的状态代码、错误消息、数据等。在这个阶段,开发人员的主要任务是使用Jest测试完整的API。Jest是一个著名的单元测试框架,用于测试Web应用程序和API。它提供了多种方法来自动化测试过程,检查对错误或缺失数据的响应等。

第10阶段:实时服务器/云上部署Web应用程序

在部署Web应用之前,开发人员需要学习Git、GitHub的操作以及版本控制工具的使用,以使部署灵活且可扩展。

Git可以用于版本控制,通过创建多个分支,跟踪源代码中的更改,并使多个开发人员能够协同工作。GitHub是一个用于版本控制和协作的代码托管平台,可以允许开发人员和其他人共同处理项目。GitHub操作可帮助您自动执行软件开发工作流。单个操作是可重用的代码段,可用于在GitHub上生成、测试、打包或部署项目。它还可用于自动执行工作流程的任何步骤。部署完整的Web应用非常复杂。开发者还需要一个专用服务器来响应HTTP请求,并使用在线数据库。

总的来说,从应用程序开发最初阶段的掌握Web基础知识,到最后阶段在实时服务器/云上部署Web应用程序。JavaScript堆栈后端开发者在点滴的积累中,学习和掌握了与应用开发相关的实践经验。然而,无论是对于后端开发的初学者还是对有经验工程师,无论迈过多少个阶段,学习之路都不会中断。


JavaScript前端页面框架

由于用于构建前端页面等现代技术的出现,JavaScript 在 Web 开发社区早已是如雷贯耳。通过在网页上编写几个函数并提供执行逻辑,可以很好的支持 HTML (主要是用于页面的表现或者布局)。如果没有 JavaScript,那页面将没有任何交互特性可言。现在的框架和库的已经从蛮荒时代崛起了,很多老旧的技术纷纷开始将功能分离成模块。现在不再需要在整个核心语言中支持所有特性了,开发者允许所有用户创建库和框架来增强核心语言的功能。这样,语言的灵活性获得了了显著提高。如果在已经在使用JavaScript(以及JQuery) 来支持 HTML,那么肯定知道开发和维护一个大型应用需要付出多大的努力以及编写多么复杂的代码,而 JavaScript 框架可以帮助你快速的构建交互式 Web 应用 (包含单页面应用或者多页面应用)。

当一个新手开发者想要学习 JavaScript 时,常常会被其各种框架所吸引,也幸亏有为数众多的社区,任何开发者都可以轻易地通过在线教程或者其他资源来学习。但多数的程序员都很难决定学习和使用哪一个框架。因此在下文中将为大家推荐 6 个值得好好学习的 JavaScript 框架。本文成文于2016年7月。

1、AngularJS

无论你是何时听说的 JavaScript,很可能你早就听过 AngularJS,因为这是在 JavaScript 社区中最为广泛使用的框架了。它发布于 2000 年,由 Google 开,它是一个开源项目,这意味着你可以阅读、编辑和修改其源代码以便更加符合自身的需求,并且不用向其开发者支付。


如果说你觉得通过纯粹的 JavaScript 代码编写一个复杂的 Web 应用比较困难的话,那么你肯定会兴奋的跳起来,因为它将显著地减轻你的编码负担。它符合支持双向数据绑定的 MVC (模型-视图-控制) 设计典范。假如你不熟悉 MVC,你只需要知道它代表着无论何时探测到某些变化,它将自动更新前端 (比如,用户界面端) 和后端 (代码或者服务器端) 数据。

Model–view–controller

MVC 可为大大减少构建复杂应用程序所需的时间和精力,所有你只需要集中精力于一处即可 (DOM 编程接口会自动同步更新视图和模型)。由于视图组件与模型组件是分离的,你可以很容易的创建一个可复用的组件,使得用户界面的效果非常好看。

如果因为某些原因,你已经使用了TypeScript(一种与 JavaScript 非常相似的语言),那么你可以很容易就上手 AngularJS,因为这两者的语法高度相似。与TypeScript相似这一特点在一定程度上提升了 AngularJS 的受欢迎程度。2.0 版本提升了移动端的性能,这也足以向一个新的开发者证明,该框架的开发活跃的够高并且定期更新。AngularJS 有着大量的用户,包括 (但不限于) Udemy、Forbes、GoDaddy、Ford、NBA 和 Oscars。

对于那些想要一个高效的 MVC 框架,用来开发面面俱到、包含健壮且现代化的基础架构的单页应用的用户来说,我极力的推荐这个框架。这是第一个为无经验 JavaScript 开发者设计的框架。

2、React

与 AngularJS 相似,React 也是一个 MVC (模型-视图-控制) 类型的框架,但不同的是,它完全针对于视图组件(因为它是为 UI 特别定制的) 并且可与任何架构进行无缝衔接。这意味着你可以马上将它运用到你的网站中去。


Model–view–controller

它从核心功能中抽象出 DOM 编程接口 (并且因此使用了虚拟 DOM),所以你可以快速的渲染 UI,这使得你能够通过node.js将它作为一个客户端框架来使用。它是由 Facebook 开发的开源项目,还有其它的开发者为它贡献代码。

假如说你见到过并喜欢 Facebook 和 Instagram 的界面,那么你将会爱上 React。通过 React,你可以给你的应用的每个状态设计一个简单的视图,当数据改变的时候,视图也自动随之改变。只要你想的话,可以创建各种的复杂 UI,也可以在任何应用中复用它。在服务器端,React 同样支持通过node.js来进行渲染。对于其他的接口,React 也一样表现得足够的灵活。

除 Facebook 和 Instagram 外,还有好多公司也在使用 React,包括 Whatsapp、BBC、PayPal、Netflix 和 Dropbox 等。

如果你只需要一个前端开发框架来构建一个非常复杂且界面极好的强大视图层,那我极力向你推荐这个框架,但你需要有足够的经验来处理各种类型的 JavaScript 代码,而且你再也不需要其他的组件了 (因为你可以自己集成它们)。

3、Ember

这个 JavaScript 框架在 2011 年正式发布,是由Yehuda Katz开发的开源项目。它有一个庞大且活跃的在线社区,所有在有任何问题时,你都可以在社区中提问。该框架吸收融合了非常多的通用 JavaScript 风格和经验,以便确保开发者能最快的做到开箱即用。


它使用了 MVVM (模型-视图-视图模型) 的设计模式,这使得它与 MVC 有些不一样,因为它由一个连接器 (binder)帮助视图和数据连接器进行通信。

Model–view–viewmodel

对于 DOM 编程接口的快速服务端渲染,它借助了Fastboot.js,这能够让那些复杂 UI 的性能得到极大提高。

它的现代化路由模式和模型引擎还支持RESTful API,这可以却确保你可以使用这种最新的技术。它支持句柄集成模板,用以自动更新数据。

Handlebars integrated template

早在 2015年间,它的风头曾一度盖过 AngularJS 和 React,被称为最好的 JavaScript 框架,对于它在 JavaScript 社区中的可用性和吸引力,这样的说服力该是足够了的。

对于不追求高灵活性和大型架构的用户,并且仅仅只是为了赶赴工期、完成任务的话,我个人非常推荐这个 JavaScript 框架,

4、Adonis

如果你曾使用过Laravel和NodeJS,那么你在使用这一个框架之时会觉得相当顺手,因为它是集合了这两个平台的优点而形成的一个框架,对于任何种类的现代应用来说,它都显得非常专业、圆润和精致。


它使用了NodeJS,所以是一个很好的后端框架,同时还附带有一些前端特性 (与前面提到那些更多地注重前端的框架不同),所以想要进入后端开发的新手开发者会发觉这个框架相当迷人。

相比于NoSQL,很多的开发者都比价喜欢使用SQL数据库 (因为他们需要增强和数据以及其它特性的交互性),这一现象在这个框架中得到了很好的体现,这时的它更接近标准,开发者也更容易使用。

如果你混迹于各类 PHP 社区,那你一定很熟悉服务提供商,也由于 Adonis 相应的 PHP 风格包含其中,所以在使用它的时候,你会觉得似曾相识。

Service Providers

在它所有的特性中,最好的便是那个极为强大的路由引擎,支持使用函数来组织和管理应用的所有状态、支持错误处理机制、支持通过 SQL ORM 来进行数据库查询、支持生成器、支持箭头函数、支持代理等等。

arrow functions

如果喜欢使用无状态 REST API 来构建服务器端应用,我比较推荐它,因为你会爱上这个框架的。

5、Vue.js

这一个开源的 JavaScript 框架,发布于 2014 年,它有个极为简单的 API,用以为现代 Web 界面开发交互式组件。其设计着重于简单易用。与 Ember 相似,它使用的是 MVVM (模型-视图-视图模型) 设计范例,这样简化了设计。


Modern Web Interface

Reactive components

Model–view–viewmodel

这个框架最有吸引力的一点是,你可以根据自身需求来选择使用的模块。比如,你需要编写简单的 HTML 代码,抓取 JSON,然后创建一个 Vue 实例来完成可以复用的小特效。

与之前的那些 JavaScript 框架相似,它使用双路数据绑定来更新模型和视图,同时也使用连接器来完成视图和数据连接器的通信。这是一个还未完全成熟的框架,因为它全部的关注点都在视图层,所以你需要自己处理其它的组件。

如果你熟悉AngularJS,那你会感觉很顺手,因为它大量嵌入了AngularJS的架构,如果懂得 JavaScript 的基础用法,那你的许多项目都可以轻易地迁移到该框架之下。假如你只想把任务完成,或者想提升你自身的 JavaScript 编程经验,又或者你需要学习不同的 JavAScript 框架的本质,我极力推荐这个。

6、Backbone.js

这个框架可以很容易的集成到任何第三方的模板引擎,默认使用的是Underscore模板引擎,而且该框架仅有一个依赖 (JQuery),因此它以轻量而闻名。它支持带有RESTful JSON接口的 MVC (模型-视图-控制) (可以自动更新前端和后端) 设计范例。


Model–view–controller

假如你曾经使用过著名的社交新闻网络服务reddit,那么你肯定听说过它在几个单页面应用中使用了Backbone.js。其原作者为之建立了与CoffeScript旗鼓相当的Underscore模板引擎,所以你可以放心,开发者知道该做什么。

该框架在一个软件包中提供了键值对模型、视图以及几个打包的模块,所以你不需要额外下载其他的外部包,这样可以节省不少时间。框架的源码可以在 GitHub 进行查看,这意味着你可以根据需求进行深度定制。

如果你是寻找一个入门级框架来快速构建一个单页面应用,那么这个框架非常适合你。

小结

至此已经在上文着重说明了 6 个值得好好学习的 JavaScript 框架,希望读完本文后能够决定使用哪个框架来完成任务。如果说对于选择框架还是不知所措,请记住,这个世界是实践出真知而非教条主义的。最好就是从列表中挑选一个来使用,看看最后是否满足你的需求和兴趣,如果还是不行,接着试试另一个。尽管放心好了,列表中的框架肯定是足够了的。

原文地址

作者:Danyal Zia,译者:GHLandy,校对:wxy
由LCTT原创编译,Linux中国荣誉推出。




该文章最后由 阿炯 于 2023-05-31 16:13:07 更新,目前是第 2 版。