当前位置: 首页 > 科技观察

14个优秀的JS前端框架、库、工具以及何时使用

时间:2023-03-13 17:16:47 科技观察

本文主要介绍一些流行的JavascriptWeb前端框架、库及其适用场景。新的Javascript库不断涌现,使网络社区越来越活跃、多样化,并在许多方面迅速发展。想要详细描述每一个主流的Javascript框架和库几乎是不可能的,所以本文主要介绍一些对前端开发影响最大的前端框架。接下来,我们一起来研究一些主流的前端框架、库和工具,并讨论它们的适用场景。同时:如果本文没有包含你喜欢的Javascript框架,请勿喷。使用前端框架开发时,建议保持版本更新。一般提供***版本是为了更好的跨浏览器和跨平台效果。要检测旧版本的框架是否与各种浏览器和设备兼容,请使用像这个扫描仪这样的工具。做好准备,让我们一一讨论。AngularJSAngular是一种流行的企业框架,许多程序员使用它来构建和维护复杂的Web应用程序。Angular非常受欢迎,使用它的公司与Domino'sPizza一样多,例如Ryanair、iTunesConnect、PayPalCheckout、Google。Angular是一个由谷歌支持的开源框架。Angular自称为HTML的扩展,用于构建复杂的Web应用程序。如果你也熟悉TypeScript,可以看看HowtowriteAngular2。Angular采用MVC架构。它提供了模型层和视图层之间的双重数据绑定。这种数据绑定方式的好处是无论哪边的数据发生变化,两边的数据都会自动更新。这有助于您构建可使用的视图组件。它还为前端和后端服务之间的轻松交互提供了一个服务框架。最重要的是,它是纯JavaScript。什么时候使用AngularJS?当您正在构建一个复杂的Web前端应用程序并且需要一个单一的模块框架来处理所有事情时。GitHub:https://github.com/angular/angular.js当前版本:1.4.7/1.2.29网址:angularjs.orgReact是年度最佳JavaScript项目!几乎每个人都在谈论ReactJS。去年,我参加的几乎所有会议都有一两个主题讨论React和同一架构中的其他库(Flux、Redux)。React是一个开源项目,几乎由Facebook和其他主要科技公司贡献。React自称是一个用于构建用户界面的JavaScript库。React基本上充当MVC中的V。它完全专注于MVC的V部分而忽略了应用程序架构的其他部分。它提供了一个组件层,可以让我们很方便地制作UI元素,并将这些UI元素组合在一起。它抽象出DOM,从而优化渲染,并允许您使用node.js渲染React。此外,它实现了一种单向的数据交互流程,这使得它比其他框架更容易理解和使用。Angular、Ember等多个项目使用React绑定成为MVC中的V。什么时候使用反应?当你想要一个强大的视图层,而应用程序的其余部分不需要复杂的框架时,或者当你想要一个视图层与Angular、Backbone或Ember应用程序一起使用时。当您尝试构建同构Web框架时。GitHub:https://github.com/facebook/react当前版本:v0.14.0网站:Facebook.github.io/react/BackboneBackbone是一个众所周知的流线型框架,所有的东西都可以放在一个文件中。Backbone已经存在了一段时间,由JeremyAshkenas编写,他以开发CoffeeScript和Underscore而闻名。Backbone特别适合那些需要开发小型Web应用程序的团队,他们希望使用小型框架而不是像Angular或Ember这样的大型框架。Backbone提供了一个全功能的MVC框架和路由器。它的Model可以实现键值绑定和数据更新事件处理。模型(和集合)可以使用RESTfulAPI。View可以声明事件处理,而Router在URL处理和状态管理方面做得很好。对于开发单页应用程序,可以支持所有需要的功能,而不会引入不必要的复杂性。什么时候使用骨干网?Backbone是我用于小型Web应用程序的首选框架。GitHub:https://github.com/jashkenas/backbone/当前版本:1.2.3官网:backbonejs.orgEmber作为一个web应用框架,非常注重程序员的效率。Ember比较流行,核心团队有不少聪明人,包括曾经在RubyonRails和jQuery核心团队的YehudaKatz。Ember自称是“用于创建令人惊叹的Web应用程序的框架”,它真的不会浪费您的时间。它非常专注于此,并为您提供了很多选择。Ember也是一个MVC框架。它包括一个模板和视图引擎,可以在数据更新时自动更新,在这方面类似于Angular、Backbone和React。它还具有Web组件的概念,允许您使用自己的标签(如Angular)扩展HTML。它还具有与RESTfulAPI配合良好的路由和建模引擎。什么时候使用Ember?当您需要一个可以立即使用的框架时。当您对灵活性要求不高时可以选择Ember,因为您通常预算紧张或时间紧迫。GitHub:https://github.com/emberjs/ember.js当前版本:2.1.0官网:emberjs.comJQuery这个库不需要介绍。它独自承担了使跨浏览器网络成为现实的责任,使整个网络成为今天的样子。jQuery为Web标准的开发和浏览器制造商对标准的接受做出了贡献。jQuery基金会的目标是“通过开源软件的开发和支持以及社区协作,推进开放网络并使每个人都可以访问它。”JQuery是世界上使用最广泛的JavaScript库,除非您对开发效率不感兴趣,否则任何应用程序都离不开它。它使DOM遍历、事件处理、动画和AJAX在所有浏览器上都非常容易使用。什么时候使用jQuery?任何时候,除非您打算使用更轻量级的版本,例如Zepto。GitHub:https://github.com/jquery/jquery当前版本:v1.11.3或v2.1.4官方网站:jquery.com下划线和lodash有时内置的JavaScript不足以让程序员真正高效。总会缺少实用功能,或者简化代码的功能。Underscore(和lodash)就是这样一个JavaScript库,它提供了一整套实用函数,无需没有经验的程序员修补内置的JavaScript对象。这两个库都提供了100多个辅助函数,以及其他特殊功能;包括map、filter、invoke、reduce、template、throttle、bind、extend、pick、clone等函数。什么时候使用Underscore?当你想要一个能立即提高程序员生产力的JavaScript文件时。UnderscoreGitHub:https://github.com/jashkenas/underscoreUnderscore当前版本:1.8.3Underscore网站:underscorejs.org什么时候使用lodash?当您想要一个模块化的、性能稍高的模块时,它支持AMD和社区插件支持的Underscore版本。LodashGitHub:https://github.com/lodash/lodashLodash当前版本:v3.10.1Lodash网站:lodash.comD3.js数据可视化和图表是Web应用程序的常见需求。当涉及到任何类型的数据操作和可视化时,D3.js是事实上的标准。它是GitHub上最受欢迎的项目之一,被数百个组织使用。大量的图形、图标和可视化库都建立在D3之上。D3允许您操作来自任何来源的数据文档并将转换应用到DOM、SVG和CSS。D3专注于现代网络标准,并确保您不受任何专有格式(如Flash或Silverlight)的限制。什么时候使用D3.js?当您需要任何一种视觉效果时。GitHub:https://github.com/mbostock/d3当前版本:3.5.6网站:d3js.orgBabylon.js想要构建一个完全在现代浏览器上运行并跨浏览器运行的视频游戏?然后查看Babylon.js,一个基于WebGL和JavaScript的3D游戏引擎。您可以使用它的物理、音频和粒子系统来创建超出预期的高质量游戏。何时使用Babylon.js?当您构建视频游戏或某种3D场景时。GitHub:https://github.com/BabylonJS/Babylon.js当前版本:2.2网站:babylonjs.comThree.js想要构建3DVFX但不需要功能齐全的游戏?Three.js提供了一个轻量级的3D库,允许您将3D效果渲染到HTML5画布、SVG和WebGL。这是一个简单的库,在three.js展示网站上有数百个漂亮的例子。什么时候使用Three.js?当您需要可以导出到Canvas的简单3D视觉效果时。GitHub:https://github.com/mrdoob/three.js/当前版本:r73网站:threejs.orgMocha和Chai长期以来对测试JavaScript不太反感。说起来,测试任何代码都是令人反感的,但这是每个开发人员都应该做的事情。每个开发人员似乎都对此不屑一顾,而忽略了测试他们的代码。现在有一种方法可以治愈这种厌恶,那就是摩卡和柴。这两个库都以美味的热饮命名,都可以帮助您测试代码,但方式不同。Mocha是一个JavaScript测试框架,可以轻松测试节点模块或浏览器应用程序中的异步代码。Mocha测试可以在链中运行,并为适当的测试用例提供良好的质量异常跟踪。Chai是行为驱动开发和测试驱动开发的断言库,可与Mocha媲美。它以易于使用的可读风格描述了您正在测试的内容。什么时候使用Mocha和Chai?使用它们!请测试您的代码,让这个世界变得更美好。MochaGitHub:https://github.com/mochajs/mochaMocha当前版本:2.3.3Mocha官网:mochajs.orgChaiGitHub:https://github.com/chaijs/chaiChai当前版本:v3.4.1Chai官网:chaijs。com我们已将Mocha和Chai包含在此列表中,如果不引入可以运行这些测试或可能设置持续集成测试的测试运行器,则该列表将是不完整的。Karma是一个帮助您在不同浏览器中自动运行测试的工具。它将帮助您在所有现代浏览器上运行Mocha和Chai测试。并非每个浏览器都能在每个平台上运行,但幸运的是,有许多免费工具可用于测试其他浏览器,请查看浏览器屏幕截图。如果您在OSX上运行并且正在测试Edge或IE,则可以免费使用此工具。什么时候使用业力?当您想要一个功能齐全的测试套件并希望确保测试在所有浏览器上通过时。GitHub:https://github.com/karma-runner/karma当前版本:v0.13网站:karma-runner.github.ioPhantomJS运行所有浏览器来测试你的代码是内存和CPU密集型的。PhantomJS让你运行一个纯WebKit——Safari和以前版本的Chrome(现在是Blink)中的渲染引擎。它允许您通过JavaScriptAPI自动运行测试、截取屏幕截图、模拟网络和浏览页面。什么时候使用PhantomJS?当你需要做更多的测试、操作网页和模拟网络请求时。GitHub:https://github.com/ariya/phantomjs当前版本:v2.0网址:phantomjs.orgGruntandGulp生产环境建站一般都会涉及到一些性能提升的任务,比如JavaScript和CSSMinification,CoffeeScript的编译/TypeScript、单元测试、代码缩小。也许您已经拥有用于准备生产网站的工具链,如果没有,您将希望拥有Grunt或Gulp这样的任务运行器。他们都有无数的插件,可以对您的网站进行任何类型的转换,使其为生产做好准备。什么时候使用Grunt?当您宁愿编写配置文件而不关心您的任务运行器将生成什么中间文件时。GruntGitHub:https://github.com/gruntjs/gruntGrunt当前版本:v0.4.5Grunt网址:gruntjs.com什么时候用Gulp?当您更喜欢编写配置代码并希望利用node.js的流处理功能更快地执行任务时。GulpGitHub:https://github.com/gulpjs/gulpGulp当前版本:v3.9.0Gulp网站:gulpjs.comBabelJavaScript作为一种语言正在快速发展。ECMAScript2015于去年夏天发布,其许多新功能正在许多领先的浏览器中实现。如果您想了解浏览器与ECMAScript2015的兼容性信息,请查看来自@kangax的表格。您会注意到,对于最新版本的Edge,Firefox和Chrome几乎完全兼容。我们并不生活在一个完美的世界中。作为开发人员,我们将需要继续支持没有最新和最强大的JavaScript功能的旧浏览器。我们真的很想发展我们的网络并改进我们的代码库。Babel是一个JavaScript编译器,它将最新的JavaScript标准编译成兼容ES5的JavaScript,让你可以在IE9等老浏览器上运行它们。它具有使React开发更容易的插件,以及使用不属于规范一部分的功能的设置(例如ES7)。什么时候使用Babel?当您想要使用新的JavaScript语言功能同时仍支持旧版浏览器时。GitHub:https://github.com/babel/babel当前版本:6.1.2网址:babeljs.io更多web开发实践本文是web开发系列的一部分,来自微软技术布道师和工程师,全是实用的JavaScript学习、开源项目和互操作性的最佳实践,包括MicrosoftEdge浏览器和新的EdgeHTML呈现引擎。我们鼓励您在所有浏览器和设备上进行测试,包括Windows10上的默认浏览器MicrosoftEdge-使用dev.microsoftedge.com上的这个免费工具:扫描您的站点以查找过时的库、布局问题和辅助功能下载免费的Mac、Linux和Windows虚拟机在所有浏览器中,包括MicrosoftEdge检查Web平台的状态在您自己的设备上远程测试MicrosoftEdge2015年会议(来自我们的工程团队和JS社区)哇,我可以在Mac和Linux上测试IE和Edge!(来自ReyBango)AdvancedJavaScriptThatDoesn'tBreaktheWeb(来自)EdgeRenderingEngineThatMakestheWebInstantlyWork(来自JacobRossi)UsingWebGLtoUnleashthePotentialof3DRendering(来自DavidCatuhe)HostingWebAppsandInnovations在网络平台上(来自KevinHill和KirilSeksenov)我们的社区开源项目:vorlon.JS(多设备远程JavaScript测试)manifoldJS(部署跨平台托管网络应用程序)babylonJS(使3D图形之类的东西更容易使用)更免费用于后端Web开发的工具和材料:适用于Linux、MacOS和Windows的VisualStudioCode尝试在AzureCloud上使用node.JS编写代码和文档,受代码项目开放许可证(CPOL)保护