查看: 1088|回复: 0
2017年前端框架、类库、工具大比拼
主题帖子积分
本帖最后由 断天涯大虾 于
14:07 编辑
相比于JavaScript开发人员的数量，目前JavaScript框架、类库和工具的数量似乎更多一些。截至2017年5月，上的显示，有超过110万个JavaScript项目。有近100亿次。
本文将会讨论目前最为流行的客户端JavaScript框架、类库和工具以及它们之间的基本差异。也许本文无法告诉你哪个是最好的，但是最适合自己项目的，就是最好的。
类库类库是一个有组织的功能集合。典型的类库包括字符串处理、日期、HTML DOM元素、事件、Cookie、动画、网络请求等功能。你可以自己实现一个函数，以便选择该函数被调用时是否需要返回一个值。
类库通常提供一种高级别的抽象方法，能够帮助顺利实现项目的细节部分。例如，Ajax通常依赖于，只需要几行代码就实现功能，只是浏览器之间存在细微的差异。类库提供了更简单的ajax（）函数，因此开发者可以专注于更高级别的业务逻辑上。
类库能够使将开发时间缩短20％，开发者不必担心细节实现。但是也有缺点：类库中的错误难以定位和修复开发团队不能保证快速发布补丁补丁程序可能会更改API，导致大量代码必须更改
框架框架是应用程序的骨架。它要求以特定的方式来进行软件设计，在某些节点上实现自己的逻辑。框架通常提供了事件、存储和数据绑定等功能。框架通常提供了比类库更高层次的抽象，帮助快速构建项目的前80％。框架的缺点：如果你的应用程序超出了框架的范围，最后20％可能会很难框架更新很困难核心框架代码和概念很少更新
工具工具会帮助开发工作，但却不是项目的组成部分。工具包括构建系统、编译器、转译器、代码分割器、图像压缩器、部署机制等。
工具帮助实现一个更容易的开发过程。例如，对比于CSS，许多编码者更喜欢，因为它提供了代码分离、嵌套、渲染时变量、循环和函数。浏览器不了解Sass / SCSS语法，因此在测试和部署之前，必须使用适当的工具将代码编译为CSS。
类库、框架和工具的区别类库、框架和工具之间的区别很小。框架可以包括一个类库，类库可以实现类似框架的方法，项目中任何一种工具都是必不可少的。所以不需要明确的区分类库、框架和工具。
JavaScript框架和类库以下是按照流行程度进行的排序：
类型类库网站知识库当前版本<font color="#.2.1开发人员jQuery团队发布日期<font color="#06年8月大小最小30kb用途通用使用度随着WordPress、ASP.NET和一些其它框架的发布，jQuery仍然是最常用的JavaScript类库。它通过将CSS选择器引入到DOM节点检索加链来应用事件处理程序、动画和Ajax调用，这彻底改变了客户端的开发。
jQuery近年来备受青睐，对于需要少量JavaScript功能的项目来说，仍然是一个好选择。
优点：分布规模小学习曲线平缓，丰富的在线帮助简洁的语法容易拓展
缺点：增加了原生API的速度开销浏览器兼容性不好，但已得到改善用法扁平一些行业反对使用
类型类库网站知识库当前版本<font color="#.17.4开发人员John-David Dalton发布日期<font color="#12年4月大小最小4kb - 24kb用途通用使用度低Underscore
类型类库网站知识库当前版本<font color="#.8.3开发人员Jeremy Ashkenas发布日期<font color="#09年10月大小最小6kb用途通用使用度低Lodash和Underscore在本节一起谈论。它们提供了数百个功能性的JavaScript实用程序来补充原生字符串、数字、数组和其它原始对象方法。虽然两个类库之间有一些重叠，但是不太可能在一个项目中同时使用这两个类库。
虽然两个类库在客户端使用率很低，但是却可以在服务器端的Node.js应用程序中使用这两个类库。
优点：小而简单良好的文档易于学习与大多数类库和框架兼容不扩展内置对象可以在客户端或服务器上使用
缺点：有些方法只在ES2015及更高版本的JavaScript中可用。
类型框架网站知识库当前版本<font color="#.6.4开发人员Google发布日期<font color="#10年10月大小<font color="#4KB用途单页应用程序使用度低Angular是框架（或MVC应用程序框架）类列表中的第一个。目前最流行的Angular版本是1.x，它使用双向数据绑定扩展HTML，同时解耦了DOM操作和应用程序逻辑。
尽管版本2（现在是版本4！）已经发布了，但是Angular 1.x仍在开发中。优点：一些大公司正在使用的流行框架开发现代Web应用程序的解决方案是标准MEAN栈（MongoDB，Express.JS，AngularJS，NodeJS）的一部分，有许多文章和教程可用
缺点：学习曲线陡峭大的代码库无法升级到Angular 2.x
（现在是Angular 4.x）
类型框架网站知识库当前版本<font color="#.1开发人员Google发布日期<font color="#16年9月大小最小450kb用途单页面应用使用度低Angular 2.0于2016年9月发布。这是一个完整的重写，它引入了使用TypeScript创建的基于模块化组件的模型。Angular 4.0于2017年3月发布。Angular 2.x与v1版本截然不同，也不与其它版本兼容 - 也许Google应该给项目起一个不同的名字！
优点：开发现代Web应用程序的解决方案是标准MEAN栈的一部分，尽管只有少量的教程可用对于熟悉静态类型语言（如C＃和Java）的开发人员，TypeScript提供了一些优势。
缺点：学习曲线陡峭大的代码库不能从Angular 1.x升级与1.x相比，Angular 2.x较难理解
类型框架网站知识库当前版本<font color="#.5.4开发人员Facebook和贡献者发布日期<font color="#13年3月大小<font color="#kb分钟用途单页应用程序使用度低React是一个用于构建用户界面的JavaScript类库，也是去年最受关注的类库。它专注于Model-View-Controller（MVC）开发的“View”部分，使用它可以轻松创建保留状态的UI组件。它是实现虚拟DOM的首选类库之一， 它的内存结构能够有效地计算差异，页面更新也更加有效。
统计显示React的使用度似乎很低，因为它是在应用程序中使用而不是在网站。
优点：小巧，高效，快捷灵活简单的组件模型良好的文档和在线资源可实现服务器端渲染目前受欢迎，经历了快速增长
缺点：需要学习新的概念和语法构建工具很重要需要其它类库或框架提供model和Controller部分与修改DOM的代码和其它类库不兼容
了解更多关于
类型框架网站知识库当前版本<font color="#.0开发人员Evan You发布日期<font color="#14年2月大小最小19kb用途单页面应用使用度低Vue.js是一个用于构建用户界面的轻量级渐进框架。它提供了一个类似React的虚拟DOM驱动视图层，可以与其它类库集成，用于构建强大的单页面应用。该框架是由之前在AngularJS工作过的Evan You创建的，他提取了AngularJS中自己喜欢的部分。
Vue.js使用HTML模板语法将DOM绑定到实例数据。Model是在数据改变时更新view的纯JavaScript对象。
优点：可以快速使用，并且日益普及很容易提高高水平开发人员的满意度依赖性小，性能好
缺点：一个较新的项目 - 风险可能会更大部分依赖开发人员进行更新相比于其它框架，资源较少
类型框架网站知识库当前版本<font color="#.3.3开发人员Jeremy Ashkenas发布日期<font color="#10年10月大小最小8kb用途单页面应用使用度低Backbone.js是提供服务器端框架中常见的MVC结构的最早客户端选项之一。它唯一的依赖是Underscore.js。Backbone.js声称是一个类库，因为它可以与其它项目集成，但是我觉得大多数开发人员都认为它是一个框架。
优点：体积小，重量轻，复杂度低不添加HTML逻辑文件丰富采用了许多应用，包括Trello、WordPress.com、LinkedIn和Groupon
缺点：与AngularJS等其它框架相比，抽象度较低需要额外的组件来实现数据绑定等功能最新的框架已经不采用MVC架构了
类型框架网站知识库当前版本<font color="#.15.0开发人员Ember team发布日期<font color="#11年12月大小最小95kb用途单页面应用使用度低Ember.js是基于Model-View-ViewModel（MVVM）模式的框架之一。它在单个包中实现模板化、数据绑定和类库。优点：为客户端应用程序提供了单一解决方案开发人员可以立刻提高开发效率 - 它使用jQuery良好的向后兼容性和升级选项采用了现代Web开发标准
缺点：大型分配式与其它正在向较小组件结构发展的框架相比，它十分的庞大学习曲线陡峭
类型框架网站知识库当前版本<font color="#.4.2开发人员Steve Sanderson发布日期<font color="#10年7月大小最小59kb用途单页面应用使用度Knockout.js是最早的MVVM框架之一，它确保了UI与底层数据保持同步，具有模板和依赖关系跟踪。优点：小而轻便，无依赖优秀的浏览器支持，可以支持到IE6良好的文档资源
缺点：较大的项目可能变得很复杂发展已经放缓使用情况似乎在减弱
更多的框架和类库以下项目虽然不是特别流行，但值得考虑： - 可以跨浏览器支持HTML5网页组件的类库 - 一个用于Web应用程序的全栈平台&&- 一种相对较新的，轻量级的跨平台框架 - 一个将框架源代码转换为干净JavaScript的新项目&&- 一个基于状态自动加载和卸载模块的类库
工具：执行通用任务构建工具自动执行各种Web开发任务，例如预处理、编译、优化图像、缩小代码、代码分析和运行测试等。任务可以在一个可执行包中统一管理。目前最受欢迎的工具如下：
网站知识库当前版本<font color="#.9.1每月下载<font color="#0万虽然Gulp不是第一个任务执行工具，它却很快成为了最受欢迎的。Gulp使用易于阅读的JavaScript代码，将源文件加载到流中，并在将数据输出到构建文件夹之前，通过各种插件管理数据。在任何其它选项之前检查Gulp.js是简单、快速和有趣的。
网站知识库当前版本<font color="#.5.0每月下载<font color="#0万npm是Node.js包管理器，但其脚本工具可用于。对于具有少量依赖关系的简单项目来说，这是一个很好的选择。然而，更复杂的任务可能会变得不太适用。
网站知识库当前版本<font color="#.0.1每月下载<font color="#0万Grunt是第一批被大规模采用的JavaScript任务执行工具之一，但其速度和复杂的JSON配置却导致了Gulp的兴起。现在这些问题已经得到了解决，Grunt仍然是一个受欢迎的选择。
工具：模块绑定多个JavaScript文件的管理已经成为了一件繁琐的事情。默认情况下，浏览器文件不会被编译，因此其依赖关系必须以适当的顺序进行加载或连接。虽然有像和CommonJS这样的选项，但是浏览器支持是有限的，因此模块绑定变得十分重要。
网站知识库当前版本<font color="#.5.1每月下载<font color="#0万Webpack支持所有流行的模块选项，并已成为React开发的代名词。虽然Webpack声称是一个模块捆绑程序，但是已经可以用作通用任务运行程序了。
Browserify
网站知识库当前版本<font color="#.3.0每月下载<font color="#0万Browserify支持Node.js正在使用的CommonJS模块，它将所有模块编译成单个浏览器兼容的文件。
RequireJS网站知识库当前版本<font color="#.3.3每月下载百万RequireJS是一种浏览器中的模块加载器，它也可以在Node.js中使用。
工具：代码分析代码分析工具用于分析代码中潜在错误或偏离语法的标准。一个未闭合括号或未声明的变量一定会被检测出。
网站知识库当前版本<font color="#.19.0每月下载<font color="#0万ESLint是一种可插拔的代码分析工具。每个规则都是一个插件，因此可以根据个人喜好进行配置。
网站知识库当前版本<font color="#.9.4每月下载<font color="#0万JSHint是一个灵活的JavaScript代码分析工具，它很好的平衡了真正的错误和老旧的语法。
网站知识库当前版本<font color="#.10.3每月下载<font color="#000JSLint是最早的代码分析工具之一，它实现了一套严格的默认规则。
工具：单元测试测试驱动开发的任务要求需要编写代码来测试自己的代码。目前有许多选择，包括,
和 ，但目前最流行的三个工具是：
网站知识库当前版本<font color="#.3.0每月下载<font color="#0万Mocha是一个JavaScript测试框架，可以在Node.js或浏览器中运行测试。它支持异步测试，并且经常与配合使用，这样可以使测试代码以可读取的方式表达。
网站知识库当前版本<font color="#.6.0每月下载<font color="#0万Jasmine是一个行为驱动的测试工具，可以在浏览器中自动测试UI和交互。
网站知识库当前版本<font color="#.0.0每月下载<font color="#000QUnit是一个单元测试框架，可以在输入特定参数时，检查函数结果。它还上报测试结果，确保没有错过特定的代码分支。
总结与建议目前最为流程的框架是，同时其它的框架也在向着流行的趋势发展。
如果需要一个安全的、通用的Web应用程序，可以考虑使用。
整体框架已经不再受欢迎了，如果你需要对一个较大型项目进行严格的结构管理，是一个不错的选择。目前大多数人坚持使用Angular 1.0版本，但是长远来讲，如果你愿意学习TypeScript，Angular 4.x版本是个更好的选择。
虽然现在并不十分流行，在技术新闻中也很少会被提到，但不可否认它是积极开发的，同时也是网站和应用程序的有力工具。jQuery具有平缓的学习曲线，全球许多开发人员能够很好地理解。
如果你想要冒险，可以试试这是一个有趣的客户端/服务器框架，它可以在构建时预先呈现JavaScript，并且可以改变我们开发的方式。工具的选择因项目而异。虽然目前使用的开发者占大多数，但却越来越受欢迎。同时你也不能错过和等测试工具。过去的十年，JavaScript经历了革命性的发展。过去只有少量基本的类库可以选择，但是现在可供选择的类库已经铺天盖地。也许无法确定哪个类库、框架和工具是最好的，但是最适合自己项目的，就是最好的。
JavaScript 开发工具介绍： 纯前端表格控件是基于HTML5的JavaScript电子表格和网格功能控件，提供了完备的公式引擎、排序、过滤、输入控件、数据可视化、Excel导入/导出等功能，适用于.NET、Java和移动端等各平台在线编辑类Excel功能的表格程序开发。
如果本文错过了你最喜欢的JavaScript类库，框架或工具？欢迎在文末评论。原文链接：转载请注明出自：葡萄城控件
关于葡萄城：全球最大的控件提供商，世界领先的企业应用定制工具、企业报表和商业智能解决方案提供商，为超过75%的全球财富500强企业提供服务。
微信认证勋章
Powered by&#xe621; 上传我的文档
&#xe602; 下载
&#xe60c; 收藏
粉丝量：17
该文档贡献者很忙，什么也没留下。
&#xe602; 下载此文档
正在努力加载中...
2017年前端工作总结
下载积分：2000
内容提示：2017年前端工作总结
文档格式：DOCX|
浏览次数：2048|
上传日期： 14:31:26|
文档星级：&#xe60b;&#xe60b;&#xe60b;&#xe60b;&#xe60b;
全文阅读已结束，如果下载本文需要使用
&#xe71b; 2000 积分
&#xe602;下载此文档
该用户还上传了这些文档
2017年前端工作总结
关注微信公众号(木梓设计)
(小战老师)
(小战老师)
(小战老师)
第三方登录：【视频】2017年前端技术盘点-西安北大青鸟
【视频】2017年前端技术盘点作者：西安北大青鸟 / 公众号：bdqnzl发表时间 ：前言2017年已过去，总是希望来盘点一下这一年中前端的发展。这一年，有一些新技术和新东西产生，同时，前端技术也慢慢的趋于稳固，自成一套体系。正文我们何处说起？自然是离不开那三驾马车。三驾马车自从2015年，react的问世，开始了三驾马车时代的先河。同时，jQuery也逐渐让出了其霸主的地位。后续的，angular开始了大型的改版，似乎想要追逐react的步伐。两种完全不同思路的体现，在前端开发的技术栈中发光发亮。同时，Vue就像一匹黑马一样，一路披荆斩棘，快速地进步着。因此，从2017年开始，3架马车可以说是并驾齐驱。似乎需要看些对比数据，来表示它们目前的现状。(来自国外的数据)可以看到react的深紫色是最多的，表示用户对于react还是十分满意的。虽然，早前的React收到了协议的影响，但是，这似乎并不影响它在开发者心目当中的地位。另外，react如此受欢迎的另一个重要原因就应该是React Native了吧。今年以来，React Native一直以两周一次的小版本更迭周期，迅速发展着。或许，2018年将会迎来最重大的正式版本1.0。(这个还是值得期待的。)对于大多数开发者而言，学习了React的时候，对于它们学习React Native是有直接性质的帮助的，所以一般的国外开发者不会拒绝学习React这个框架的。介绍完，React的情况，我们或许可以回望一下Angular的情况吧。Angular可以说是一个最早问世的MVVM的框架。2009年，angular像一枚重磅炸弹一样，震撼了前端的开发者们。当时，W3C似乎还未推出正式的Web Component标准。React和Vue也还在襁褓之中安眠。可想而知，之后的几年Angular一直影响着后续前端的发展。但是，Angular有着许许多多的问题，也使得它在后续的框架之争中，处于下风。2016年9月正式推出的angular2，将angular引领向了另一种形式——以HTML为中心的框架。一套完整的体现，其中加入了TypeScript+RxJS等组合，可想而知，一套内容的学习成本相当之高，与React以JS为中心的思想完全不同。不过似乎这一次Google将框架的定位目标换成了企业，国内外在使用这套框架的往往是银行、证券类企业。不过，它的发展还是被看好的，毕竟它的背后可都是一群Google的顶尖开发工程师呢！！最后，我们来了解一下三驾马车中的黑马——Vue。从第一张图中，虽然React一直处于领导地位，但是，Vue2的使用，也将于其他两个框架持平快了。毕竟，在国内的前端环境中，Vue可以说是非常受欢迎的。(据说印度开发前端，会用Angular，中国人开发前端，会用Vue)不得不说的是，Vue与Weex的结合，虽然体验不及RN，但是有着阿里的技术支持，也将有希望突破吧。PWA如果在国外，你今年听到的热词一定会有PWA这个东西。前不久，Safari已经开始支持PWA了，那么也就意味着PWA的时代不会太远了。当然，国内实践PWA的公司也不占少数，例如饿了么、阿里等。从去年开始，对其有所耳闻，到今年Google开发者大会上的现场演示，相信更多的开发者对于这门技术的狂热。对于国内开发者而言，唯一不好的优势应该就是文档了。因为目前来说，大部分的文档都是以英文的形式存在于GitHub或者国外书籍中的。翻译过来的书，也不会这么快的速度问世，所以目前研究PWA的中文资料少之又少。不过相信，它的发展在之后的一两年的是强而有力的。国内的小程序今年，在国内会被称为“小程序年”。从1月份开始，微信正式将公测了小程序。继而在7月份开始，支付宝也推出了相应的小程序。在国内，这样子的重大消息是不容忽视的。两大巨头之争，推动的是无与伦比的流量红利。基于小程序的开发，也将成为国内的前端的一大重点。将原用的整体化的内容，逐步分割成一个个小的模块，将至放入到微信这个大环境中去分享，最后起到一个引流的效果。回到技术的成面，小程序或许会有着与PWA一样的思想，将之前在移动端难以为继的Web端，放入到自家应用中，来确保它的长久与稳定。更多的是说，这两者起到了异曲同工的效果。同样的，这项技术，将在2018年持续发展下去，同时，也会有更多的前端投入到这项开发中去。styled-components这项技术，也是从上半年开始有所耳闻的。主要是作为react库的衍生物的形式出现的。它将css部分的代码以js的形式展现在代码中，那么之后只需要开发js就可以完成整个应用的开发了。同时，它还有一个好处，它的样式是基于组件的，所以可以做到复用，同时，往往js的变量在css中去使用时，是一个令人头疼的问题。而styled-components很好的解决了这个问题，因为它本身就是在组件中开发样式，js的变量依然可以被使用在css的部分代码中。这项技术也是可期的，因为越来越多的人在自己的react项目中开始了这项技术的尝试。Rollup这是啥？没错，又有一个模块打包工具来了。或许，大家熟知的更多的是webpack这个模块打包工具。今年的4月份，React做了一个大动作——在React的主分支上合并了一个PR，将当时的构建工具换成了Rollup。可想而知，这个东西将会是多么的重要。好奇的是，它与其他的不同之处吧！它是一款基于ES2015模块进行打包的打包器。在过去的打包工具(包括webpack在内)中，都是基于CommonJS的规范去进行模块的打包的，所以，过去很多库的前面总是会有一大堆webpack等自家的逻辑填充在开头。Rollup不同，他是后天生的，出生的基准点就表明它的高度将不限于此。但是，相对于巨头webpack来说，它或许在今年并未体现出它的优势，但是相信它会厚积薄发的。建议：在开发应用时，使用webpack，在开发库时，可以考虑Rollup。GraphQL这个东西，或许在国内鲜有闻之。但是，它仍是一项不错的技术，同时在调查中，也体现出不俗的潜力，如图：它是有Facebook开发的一款API查询语言，或将替代Rest在后端的地位。虽然，目前来说，其性能并不是特别的优秀，也会bug不断。但是，2018年或将是GraphQL的一年。那么，和前端又有什么关系呢？别忘了，我们手里还有一个利器NodeJS呢！能够用好它，对于你开发nodeJS，或许使用便利。TypeScript这一项由微软老大开发的语言，处处在弥补着JavaScript的缺陷。一出生，就打着“取代JavaScript”的旗号，发展的速度也是惊人的。当然了，W3C也在努力的推进着JavaScript的进步，之后的几年，应该会是着两门语言并驾齐驱的发展吧。因为开发人口众多，不可能走到谁取代谁的地步。最后，贴出一张Stackoverflow上面的一项数据统计表吧！图片来源：I just asked 23,000 developers what they think of JavaScript. Here’s what I learned.总结我们盘点了一年以来前端的发展，有着新技术不断被推出着，相信前端会发展的越来越好北大青鸟西安兆隆免费试听+零元入学＋随到随学+保证就业+名师任教+免费重学+不满意退款.【零元入学】：有经济需要的学员可选零元入学政策.【保证就业】：已形成强大的就业体系，优质就业率达99％．【专业齐全】：java开发、安卓开发、web前端、UI设计、软件测试、网络营销、大数据等IT课程．【名师任教】：课程老师拥有大项目开发经验，定期参加总部培训，持证上岗．欢迎添加西安北大青鸟微信！◆◆◆ ◆◆◆◆◆ ◆◆推 荐 阅 读最适合参加IT培训的4类人，有你么？毕业求职季，如何快速签到8K+的工作IT培训到底有没有用？看了这些图，心里有底了他的今天，你的明天网络营销班职业素质课开讲啦~相关文章猜你喜欢万妍鲜花批发湖南信无忧邢台旅游通更职前爱旅游#统计代码}