2017年前端框架、类库、工具大比拼
EniSVJ
7年前
<p>相比于JavaScript开发人员的数量，目前JavaScript框架、类库和工具的数量似乎更多一些。截至2017年5月， <a href="https://github.com/search?utf8=%E2%9C%93&q=language:JavaScript&type=Repositories&ref=advsearch&l=JavaScript&l=" rel="nofollow,noindex">GitHub</a> 上的 <a href="https://github.com/search?utf8=%E2%9C%93&q=language:JavaScript&type=Repositories&ref=advsearch&l=JavaScript&l=" rel="nofollow,noindex">快速搜索</a> 显示，有超过110万个JavaScript项目。 <a href="/misc/goto?guid=4958867133348946608" rel="nofollow,noindex">npmjs.org</a> 有 <a href="/misc/goto?guid=4958867133348946608" rel="nofollow,noindex">50万个可用的软件包，每月下载量</a> 近100亿次。</p> <p>本文将会讨论目前最为流行的客户端JavaScript框架、类库和工具以及它们之间的基本差异。也许本文无法告诉你哪个是最好的，但是最适合自己项目的，就是最好的。</p> <h2>类库</h2> <p>类库是一个有组织的功能集合。典型的类库包括字符串处理、日期、HTML DOM元素、事件、Cookie、动画、网络请求等功能。你可以自己实现一个函数，以便选择该函数被调用时是否需要返回一个值。</p> <p>类库通常提供一种高级别的抽象方法，能够帮助顺利实现项目的细节部分。例如，Ajax通常依赖于 <a href="/misc/goto?guid=4959750013332202428" rel="nofollow,noindex">XMLHttpRequest API</a> ，只需要几行代码就实现功能，只是浏览器之间存在细微的差异。类库提供了更简单的ajax（）函数，因此开发者可以专注于更高级别的业务逻辑上。</p> <p>类库能够使将开发时间缩短20％，开发者不必担心细节实现。</p> <p>但是也有缺点：</p> <ul> <li>类库中的错误难以定位和修复</li> <li>开发团队不能保证快速发布补丁</li> <li>补丁程序可能会更改API，导致大量代码必须更改</li> </ul> <h2>框架</h2> <p>框架是应用程序的骨架。它要求以特定的方式来进行软件设计，在某些节点上实现自己的逻辑。框架通常提供了事件、存储和数据绑定等功能。</p> <p>框架通常提供了比类库更高层次的抽象，帮助快速构建项目的前80％。</p> <p>框架的缺点：</p> <ul> <li>如果你的应用程序超出了框架的范围，最后20％可能会很难</li> <li>框架更新很困难</li> <li>核心框架代码和概念很少更新</li> </ul> <h2>工具</h2> <p>工具会帮助开发工作，但却不是项目的组成部分。工具包括构建系统、编译器、转译器、代码分割器、图像压缩器、部署机制等。</p> <p>工具帮助实现一个更容易的开发过程。例如，对比于CSS，许多编码者更喜欢 <a href="/misc/goto?guid=4958184196366000958" rel="nofollow,noindex">Sass</a> ，因为它提供了代码分离、嵌套、渲染时变量、循环和函数。浏览器不了解Sass / SCSS语法，因此在测试和部署之前，必须使用适当的工具将代码编译为CSS。</p> <h2>类库、框架和工具的区别</h2> <p>类库、框架和工具之间的区别很小。框架可以包括一个类库，类库可以实现类似框架的方法，项目中任何一种工具都是必不可少的。所以不需要明确的区分类库、框架和工具。</p> <h2>JavaScript框架和类库</h2> <p>以下是按照流行程度进行的排序：</p> <h2><a href="/misc/goto?guid=4958183308549259819" rel="nofollow,noindex">jQuery</a></h2> <h2><img src="https://simg.open-open.com/show/d94309e4400679dc592ff1dff068a2e8.jpg"></h2> <table> <tbody> <tr> <td>jQuery</td> <td> </td> </tr> <tr> <td>类型</td> <td>类库</td> </tr> <tr> <td>网站</td> <td><a href="/misc/goto?guid=4958183308549259819" rel="nofollow,noindex">jquery.com</a></td> </tr> <tr> <td>知识库</td> <td><a href="/misc/goto?guid=4958524645790811766" rel="nofollow,noindex">github.com/jquery/jquery</a></td> </tr> <tr> <td>当前版本</td> <td>3.2.1</td> </tr> <tr> <td>开发人员</td> <td>jQuery团队</td> </tr> <tr> <td>发布日期</td> <td>2006年8月</td> </tr> <tr> <td>大小</td> <td>最小30kb</td> </tr> <tr> <td>用途</td> <td>通用</td> </tr> <tr> <td>使用度</td> <td><a href="/misc/goto?guid=4959750013514020892" rel="nofollow,noindex">72.4％的网站</a></td> </tr> </tbody> </table> <p>随着WordPress、ASP.NET和一些其它框架的发布，jQuery仍然是最常用的JavaScript类库。它通过将CSS选择器引入到DOM节点检索加链来应用事件处理程序、动画和Ajax调用，这彻底改变了客户端的开发。</p> <p>jQuery近年来备受青睐，对于需要少量JavaScript功能的项目来说，仍然是一个好选择。</p> <p>优点：</p> <ul> <li>分布规模小</li> <li>学习曲线平缓，丰富的在线帮助</li> <li>简洁的语法</li> <li>容易拓展</li> </ul> <p>缺点：</p> <ul> <li>增加了原生API的速度开销</li> <li>浏览器兼容性不好，但已得到改善</li> <li>用法扁平</li> <li>一些行业反对使用</li> </ul> <h2><a href="/misc/goto?guid=4958871496205746239" rel="nofollow,noindex">Lodash</a> 和 <a href="/misc/goto?guid=4958528211773305809" rel="nofollow,noindex">Underscore</a></h2> <h2><img src="https://simg.open-open.com/show/b66de6118756bb3ac38b5a9521fc2b24.jpg"></h2> <table> <tbody> <tr> <td>Lodash</td> <td> </td> </tr> <tr> <td>类型</td> <td>类库</td> </tr> <tr> <td>网站</td> <td><a href="/misc/goto?guid=4958871496205746239" rel="nofollow,noindex">lodash.com/</a></td> </tr> <tr> <td>知识库</td> <td><a href="/misc/goto?guid=4958978624299643700" rel="nofollow,noindex">github.com/lodash/lodash/</a></td> </tr> <tr> <td>当前版本</td> <td>4.17.4</td> </tr> <tr> <td>开发人员</td> <td>John-David Dalton</td> </tr> <tr> <td>发布日期</td> <td>2012年4月</td> </tr> <tr> <td>大小</td> <td>最小4kb – 24kb</td> </tr> <tr> <td>用途</td> <td>通用</td> </tr> <tr> <td>使用度</td> <td>低</td> </tr> <tr> <td>Underscore</td> <td> </td> </tr> <tr> <td>类型</td> <td>类库</td> </tr> <tr> <td>网站</td> <td><a href="/misc/goto?guid=4958528211773305809" rel="nofollow,noindex">underscorejs.org/</a></td> </tr> <tr> <td>知识库</td> <td><a href="/misc/goto?guid=4958974669632449893" rel="nofollow,noindex">github.com/jashkenas/underscore</a></td> </tr> <tr> <td>当前版本</td> <td>1.8.3</td> </tr> <tr> <td>开发人员</td> <td>Jeremy Ashkenas</td> </tr> <tr> <td>发布日期</td> <td>2009年10月</td> </tr> <tr> <td>大小</td> <td>最小6kb</td> </tr> <tr> <td>用途</td> <td>通用</td> </tr> <tr> <td>使用度</td> <td>低</td> </tr> </tbody> </table> <p>Lodash和Underscore在本节一起谈论。它们提供了数百个功能性的JavaScript实用程序来补充原生字符串、数字、数组和其它原始对象方法。虽然两个类库之间有一些重叠，但是不太可能在一个项目中同时使用这两个类库。</p> <p>虽然两个类库在客户端使用率很低，但是却可以在服务器端的Node.js应用程序中使用这两个类库。</p> <p>优点：</p> <ul> <li>小而简单</li> <li>良好的文档易于学习</li> <li>与大多数类库和框架兼容</li> <li>不扩展内置对象</li> <li>可以在客户端或服务器上使用</li> </ul> <p>缺点：</p> <ul> <li>有些方法只在ES2015及更高版本的JavaScript中可用。</li> </ul> <h2><a href="/misc/goto?guid=4958834801588021319" rel="nofollow,noindex">AngularJS 1.x</a></h2> <h2><img src="https://simg.open-open.com/show/43d36eb655e1b89fb9669358023e1b46.jpg"></h2> <table> <tbody> <tr> <td>AngularJS</td> <td> </td> </tr> <tr> <td>类型</td> <td>框架</td> </tr> <tr> <td>网站</td> <td><a href="/misc/goto?guid=4958834801588021319" rel="nofollow,noindex">angularjs.org</a></td> </tr> <tr> <td>知识库</td> <td><a href="/misc/goto?guid=4958825667342879893" rel="nofollow,noindex">github.com/angular/angular.js</a></td> </tr> <tr> <td>当前版本</td> <td>1.6.4</td> </tr> <tr> <td>开发人员</td> <td>Google</td> </tr> <tr> <td>发布日期</td> <td>2010年10月</td> </tr> <tr> <td>大小</td> <td>144KB</td> </tr> <tr> <td>用途</td> <td>单页应用程序</td> </tr> <tr> <td>使用度</td> <td>低</td> </tr> </tbody> </table> <p>Angular是框架（或MVC应用程序框架）类列表中的第一个。目前最流行的Angular版本是1.x，它使用双向数据绑定扩展HTML，同时解耦了DOM操作和应用程序逻辑。</p> <p>尽管版本2（现在是版本4！）已经发布了，但是Angular 1.x仍在开发中。</p> <p>优点：</p> <ul> <li>一些大公司正在使用的流行框架</li> <li>开发现代Web应用程序的解决方案</li> <li>是标准MEAN栈（MongoDB，Express.JS，AngularJS，NodeJS）的一部分，有许多文章和教程可用</li> </ul> <p>缺点：</p> <ul> <li>学习曲线陡峭</li> <li>大的代码库</li> <li>无法升级到Angular 2.x</li> </ul> <h2><a href="/misc/goto?guid=4958866372165218034" rel="nofollow,noindex">Angular 2.x</a> （现在是Angular 4.x）</h2> <h2><img src="https://simg.open-open.com/show/712ac2c39a46c512e53a338053f5c27e.jpg"></h2> <table> <tbody> <tr> <td>Angular</td> <td> </td> </tr> <tr> <td>类型</td> <td>框架</td> </tr> <tr> <td>网站</td> <td><a href="/misc/goto?guid=4958866372165218034" rel="nofollow,noindex">angular.io</a></td> </tr> <tr> <td>知识库</td> <td><a href="/misc/goto?guid=4958825667342879893" rel="nofollow,noindex">github.com/angular/angular.js</a></td> </tr> <tr> <td>当前版本</td> <td>4.1</td> </tr> <tr> <td>开发人员</td> <td>Google</td> </tr> <tr> <td>发布日期</td> <td>2016年9月</td> </tr> <tr> <td>大小</td> <td>最小450kb</td> </tr> <tr> <td>用途</td> <td>单页面应用</td> </tr> <tr> <td>使用度</td> <td>低</td> </tr> </tbody> </table> <p>Angular 2.0于2016年9月发布。这是一个完整的重写，它引入了使用TypeScript创建的基于模块化组件的模型。Angular 4.0于2017年3月发布。</p> <p>Angular 2.x与v1版本截然不同，也不与其它版本兼容 – 也许Google应该给项目起一个不同的名字！</p> <p>优点：</p> <ul> <li>开发现代Web应用程序的解决方案</li> <li>是标准MEAN栈的一部分，尽管只有少量的教程可用</li> <li>对于熟悉静态类型语言（如C＃和Java）的开发人员，TypeScript提供了一些优势。</li> </ul> <p>缺点：</p> <ul> <li>学习曲线陡峭</li> <li>大的代码库</li> <li>不能从Angular 1.x升级</li> <li>与1.x相比，Angular 2.x较难理解</li> </ul> <h2><a href="/misc/goto?guid=4958968605084997344" rel="nofollow,noindex">React</a></h2> <p><img src="https://simg.open-open.com/show/5d1776aaaeab2286717003313866354d.jpg"></p> <table> <tbody> <tr> <td>React</td> <td> </td> </tr> <tr> <td>类型</td> <td>框架</td> </tr> <tr> <td>网站</td> <td><a href="/misc/goto?guid=4958968605084997344" rel="nofollow,noindex">非死book.github.io/react/</a></td> </tr> <tr> <td>知识库</td> <td><a href="/misc/goto?guid=4958838693197771340" rel="nofollow,noindex">github.com/非死book/react</a></td> </tr> <tr> <td>当前版本</td> <td>15.5.4</td> </tr> <tr> <td>开发人员</td> <td>非死book和贡献者</td> </tr> <tr> <td>发布日期</td> <td>2013年3月</td> </tr> <tr> <td>大小</td> <td>21kb分钟</td> </tr> <tr> <td>用途</td> <td>单页应用程序</td> </tr> <tr> <td>使用度</td> <td>低</td> </tr> </tbody> </table> <p>React是一个用于构建用户界面的JavaScript类库，也是去年最受关注的类库。它专注于Model-View-Controller（MVC）开发的“View”部分，使用它可以轻松创建保留状态的UI组件。它是实现虚拟DOM的首选类库之一， 它的内存结构能够有效地计算差异，页面更新也更加有效。</p> <p>统计显示React的使用度似乎很低，因为它是在应用程序中使用而不是在网站。</p> <p>优点：</p> <ul> <li>小巧，高效，快捷灵活</li> <li>简单的组件模型</li> <li>良好的文档和在线资源</li> <li>可实现服务器端渲染</li> <li>目前受欢迎，经历了快速增长</li> </ul> <p>缺点：</p> <ul> <li>需要学习新的概念和语法</li> <li>构建工具很重要</li> <li>需要其它类库或框架提供model和Controller部分</li> <li>与修改DOM的代码和其它类库不兼容</li> </ul> <p>了解更多关于 <a href="/misc/goto?guid=4959750013908370368" rel="nofollow,noindex">React the ES6 Way</a></p> <h2><a href="/misc/goto?guid=4959734887704549186" rel="nofollow,noindex">Vue.js</a></h2> <h2><img src="https://simg.open-open.com/show/9d5519bd4cdc737cf4a27dd8f30fdeb2.jpg"></h2> <table> <tbody> <tr> <td>Vue.js</td> <td> </td> </tr> <tr> <td>类型</td> <td>框架</td> </tr> <tr> <td>网站</td> <td><a href="/misc/goto?guid=4959734887704549186" rel="nofollow,noindex">vuejs.org</a></td> </tr> <tr> <td>知识库</td> <td><a href="/misc/goto?guid=4958977564508786080" rel="nofollow,noindex">github.com/vuejs/vue</a></td> </tr> <tr> <td>当前版本</td> <td>2.0</td> </tr> <tr> <td>开发人员</td> <td>Evan You</td> </tr> <tr> <td>发布日期</td> <td>2014年2月</td> </tr> <tr> <td>大小</td> <td>最小19kb</td> </tr> <tr> <td>用途</td> <td>单页面应用</td> </tr> <tr> <td>使用度</td> <td>低</td> </tr> </tbody> </table> <p>Vue.js是一个用于构建用户界面的轻量级渐进框架。它提供了一个类似React的虚拟DOM驱动视图层，可以与其它类库集成，用于构建强大的单页面应用。该框架是由之前在AngularJS工作过的Evan You创建的，他提取了AngularJS中自己喜欢的部分。</p> <p>Vue.js使用HTML模板语法将DOM绑定到实例数据。Model是在数据改变时更新view的纯JavaScript对象。</p> <p>优点：</p> <ul> <li>可以快速使用，并且日益普及</li> <li>很容易提高高水平开发人员的满意度</li> <li>依赖性小，性能好</li> </ul> <p>缺点：</p> <ul> <li>一个较新的项目 – 风险可能会更大</li> <li>部分依赖开发人员进行更新</li> <li>相比于其它框架，资源较少</li> </ul> <h2><a href="/misc/goto?guid=4958521772625141054" rel="nofollow,noindex">Backbone.js</a></h2> <p><img src="https://simg.open-open.com/show/b8752db1532f8ba6741da347e3eebcfd.jpg"></p> <table> <tbody> <tr> <td><a href="/misc/goto?guid=4959750014081499689" rel="nofollow,noindex">Backbone.js</a></td> <td><strong> </strong></td> </tr> <tr> <td>类型</td> <td>框架</td> </tr> <tr> <td>网站</td> <td><a href="/misc/goto?guid=4958521772625141054" rel="nofollow,noindex">backbonejs.org</a></td> </tr> <tr> <td>知识库</td> <td><a href="/misc/goto?guid=4958974669206995377" rel="nofollow,noindex">github.com/jashkenas/backbone/</a></td> </tr> <tr> <td>当前版本</td> <td>1.3.3</td> </tr> <tr> <td>开发人员</td> <td>Jeremy Ashkenas</td> </tr> <tr> <td>发布日期</td> <td>2010年10月</td> </tr> <tr> <td>大小</td> <td>最小8kb</td> </tr> <tr> <td>用途</td> <td>单页面应用</td> </tr> <tr> <td>使用度</td> <td>低</td> </tr> </tbody> </table> <p>Backbone.js是提供服务器端框架中常见的MVC结构的最早客户端选项之一。它唯一的依赖是Underscore.js。</p> <p>Backbone.js声称是一个类库，因为它可以与其它项目集成，但是我觉得大多数开发人员都认为它是一个框架。</p> <p>优点：</p> <ul> <li>体积小，重量轻，复杂度低</li> <li>不添加HTML逻辑</li> <li>文件丰富</li> <li>采用了许多应用，包括Trello、WordPress.com、LinkedIn和Groupon</li> </ul> <p>缺点：</p> <ul> <li>与AngularJS等其它框架相比，抽象度较低</li> <li>需要额外的组件来实现数据绑定等功能</li> <li>最新的框架已经不采用MVC架构了</li> </ul> <h2><a href="/misc/goto?guid=4959750014202385168" rel="nofollow,noindex">Ember.js</a></h2> <h2><img src="https://simg.open-open.com/show/c210681b5d7519bb0d0212fa9b626314.jpg"></h2> <table> <tbody> <tr> <td>Ember.js</td> <td> </td> </tr> <tr> <td>类型</td> <td>框架</td> </tr> <tr> <td>网站</td> <td><a href="/misc/goto?guid=4959750014202385168" rel="nofollow,noindex">emberjs.com</a></td> </tr> <tr> <td>知识库</td> <td><a href="/misc/goto?guid=4958848224592517640" rel="nofollow,noindex">github.com/emberjs/ember.js</a></td> </tr> <tr> <td>当前版本</td> <td>2.15.0</td> </tr> <tr> <td>开发人员</td> <td>Ember team</td> </tr> <tr> <td>发布日期</td> <td>2011年12月</td> </tr> <tr> <td>大小</td> <td>最小95kb</td> </tr> <tr> <td>用途</td> <td>单页面应用</td> </tr> <tr> <td>使用度</td> <td>低</td> </tr> </tbody> </table> <p>Ember.js是基于Model-View-ViewModel（MVVM）模式的框架之一。它在单个包中实现模板化、数据绑定和类库。</p> <p>优点：</p> <ul> <li>为客户端应用程序提供了单一解决方案</li> <li>开发人员可以立刻提高开发效率 – 它使用jQuery</li> <li>良好的向后兼容性和升级选项</li> <li>采用了现代Web开发标准</li> </ul> <p>缺点：</p> <ul> <li>大型分配式</li> <li>与其它正在向较小组件结构发展的框架相比，它十分的庞大</li> <li>学习曲线陡峭</li> </ul> <h2><a href="/misc/goto?guid=4958330844784985666" rel="nofollow,noindex">Knockout.js</a></h2> <p><img src="https://simg.open-open.com/show/652a2e934cc6c252e405f8ff9f1912da.jpg"></p> <table> <tbody> <tr> <td><a href="/misc/goto?guid=4959750014343840311" rel="nofollow,noindex">Knockout.js</a></td> <td><strong> </strong></td> </tr> <tr> <td>类型</td> <td>框架</td> </tr> <tr> <td>网站</td> <td><a href="/misc/goto?guid=4958330844784985666" rel="nofollow,noindex">knockoutjs.com</a></td> </tr> <tr> <td>知识库</td> <td><a href="/misc/goto?guid=4959615950741899942" rel="nofollow,noindex">github.com/knockout/knockout</a></td> </tr> <tr> <td>当前版本</td> <td>3.4.2</td> </tr> <tr> <td>开发人员</td> <td>Steve Sanderson</td> </tr> <tr> <td>发布日期</td> <td>2010年7月</td> </tr> <tr> <td>大小</td> <td>最小59kb</td> </tr> <tr> <td>用途</td> <td>单页面应用</td> </tr> <tr> <td>使用度</td> <td><a href="/misc/goto?guid=4959750014487217065" rel="nofollow,noindex">低</a></td> </tr> </tbody> </table> <p>Knockout.js是最早的MVVM框架之一，它确保了UI与底层数据保持同步，具有模板和依赖关系跟踪。</p> <p>优点：</p> <ul> <li>小而轻便，无依赖</li> <li>优秀的浏览器支持，可以支持到IE6</li> <li>良好的文档资源</li> </ul> <p>缺点：</p> <ul> <li>较大的项目可能变得很复杂</li> <li>发展已经放缓</li> <li>使用情况似乎在减弱</li> </ul> <h2>更多的框架和类库</h2> <p>以下项目虽然不是特别流行，但值得考虑：</p> <ul> <li><a href="/misc/goto?guid=4958864692003478649" rel="nofollow,noindex">Polymer</a> – 可以跨浏览器支持HTML5网页组件的类库</li> <li><a href="/misc/goto?guid=4958834640823188760" rel="nofollow,noindex">Meteor</a> – 一个用于Web应用程序的全栈平台</li> <li><a href="/misc/goto?guid=4958872202423066431" rel="nofollow,noindex">Aurelia</a> – 一种相对较新的，轻量级的跨平台框架</li> <li><a href="/misc/goto?guid=4959736760520144665" rel="nofollow,noindex">Svelte</a> – 一个将框架源代码转换为干净JavaScript的新项目</li> <li><a href="/misc/goto?guid=4958867474385340366" rel="nofollow,noindex">Conditioner.js</a> – 一个基于状态自动加载和卸载模块的类库</li> </ul> <h2>工具：执行通用任务</h2> <p>构建工具自动执行各种Web开发任务，例如预处理、编译、优化图像、缩小代码、代码分析和运行测试等。任务可以在一个可执行包中统一管理。</p> <p>目前最受欢迎的工具如下：</p> <h2><a href="/misc/goto?guid=4958825205695716034" rel="nofollow,noindex">Gulp.js</a></h2> <p><img src="https://simg.open-open.com/show/d2b3da17c518e6f8b92ec52c2d3d4253.jpg"></p> <table> <tbody> <tr> <td>Gulp.js</td> <td> </td> </tr> <tr> <td>网站</td> <td><a href="/misc/goto?guid=4958825205695716034" rel="nofollow,noindex">gulpjs.com</a></td> </tr> <tr> <td>知识库</td> <td><a href="/misc/goto?guid=4958828538346190979" rel="nofollow,noindex">github.com/gulpjs/gulp</a></td> </tr> <tr> <td>当前版本</td> <td>3.9.1</td> </tr> <tr> <td>每月下载</td> <td>300万</td> </tr> </tbody> </table> <p>虽然Gulp不是第一个任务执行工具，它却很快成为了最受欢迎的。Gulp使用易于阅读的JavaScript代码，将源文件加载到流中，并在将数据输出到构建文件夹之前，通过各种插件管理数据。在任何其它选项之前检查Gulp.js是简单、快速和有趣的。</p> <h2><a href="/misc/goto?guid=4958867133348946608" rel="nofollow,noindex">NPM</a></h2> <h2><img src="https://simg.open-open.com/show/b97de3821fd970b797d7d767ba0dfd9f.png"></h2> <table> <tbody> <tr> <td>NPM</td> <td> </td> </tr> <tr> <td>网站</td> <td><a href="/misc/goto?guid=4958867133348946608" rel="nofollow,noindex">npmjs.com</a></td> </tr> <tr> <td>知识库</td> <td><a href="/misc/goto?guid=4959550381422508421" rel="nofollow,noindex">github.com/npm/npm</a></td> </tr> <tr> <td>当前版本</td> <td>4.5.0</td> </tr> <tr> <td>每月下载</td> <td>300万</td> </tr> </tbody> </table> <p>npm是Node.js包管理器，但其脚本工具可用于 <a href="/misc/goto?guid=4959750014840730821" rel="nofollow,noindex">运行通用任务</a> 。对于具有少量依赖关系的简单项目来说，这是一个很好的选择。然而，更复杂的任务可能会变得不太适用。</p> <h2><a href="/misc/goto?guid=4959750014929576975" rel="nofollow,noindex">Grunt</a></h2> <h2><img src="https://simg.open-open.com/show/f7674011e4141b7e7b230932084a886e.jpg"></h2> <table> <tbody> <tr> <td>Grunt</td> <td> </td> </tr> <tr> <td>网站</td> <td><a href="/misc/goto?guid=4959750014929576975" rel="nofollow,noindex">gruntjs.com</a></td> </tr> <tr> <td>知识库</td> <td><a href="/misc/goto?guid=4958875404433769070" rel="nofollow,noindex">github.com/gruntjs/grunt</a></td> </tr> <tr> <td>当前版本</td> <td>1.0.1</td> </tr> <tr> <td>每月下载</td> <td>200万</td> </tr> </tbody> </table> <p>Grunt是第一批被大规模采用的JavaScript任务执行工具之一，但其速度和复杂的JSON配置却导致了Gulp的兴起。现在这些问题已经得到了解决，Grunt仍然是一个受欢迎的选择。</p> <h2>工具：模块绑定</h2> <p>多个JavaScript文件的管理已经成为了一件繁琐的事情。默认情况下，浏览器文件不会被编译，因此其依赖关系必须以适当的顺序进行加载或连接。虽然有像 <a href="/misc/goto?guid=4959750015073802578" rel="nofollow,noindex">ES6模块</a> 和CommonJS这样的选项，但是浏览器支持是有限的，因此模块绑定变得十分重要。</p> <h2><a href="/misc/goto?guid=4958999009084926641" rel="nofollow,noindex">WebPack</a></h2> <p><img src="https://simg.open-open.com/show/30cc43b419a41014bdbaed7a4d78dfbe.jpg"></p> <table> <tbody> <tr> <td>WebPack</td> <td> </td> </tr> <tr> <td>网站</td> <td><a href="/misc/goto?guid=4958999009084926641" rel="nofollow,noindex">webpack.js.org</a></td> </tr> <tr> <td>知识库</td> <td><a href="/misc/goto?guid=4958967409467887542" rel="nofollow,noindex">github.com/webpack/webpack</a></td> </tr> <tr> <td>当前版本</td> <td>2.5.1</td> </tr> <tr> <td>每月下载</td> <td>600万</td> </tr> </tbody> </table> <p>Webpack支持所有流行的模块选项，并已成为React开发的代名词。虽然Webpack声称是一个模块捆绑程序，但是已经可以用作通用任务运行程序了。</p> <h2><a href="/misc/goto?guid=4958830652694960670" rel="nofollow,noindex">Browserify</a></h2> <h2><img src="https://simg.open-open.com/show/06396ce73561af7668f48a0323564866.jpg"></h2> <table> <tbody> <tr> <td>Browserify</td> <td> </td> </tr> <tr> <td>网站</td> <td><a href="/misc/goto?guid=4958830652694960670" rel="nofollow,noindex">browserify.org</a></td> </tr> <tr> <td>知识库</td> <td><a href="/misc/goto?guid=4958836570912107601" rel="nofollow,noindex">github.com/substack/node-browserify</a></td> </tr> <tr> <td>当前版本</td> <td>14.3.0</td> </tr> <tr> <td>每月下载</td> <td>260万</td> </tr> </tbody> </table> <p>Browserify支持Node.js正在使用的CommonJS模块，它将所有模块编译成单个浏览器兼容的文件。</p> <h2><a href="/misc/goto?guid=4958184194212155366" rel="nofollow,noindex">RequireJS</a></h2> <h2><img src="https://simg.open-open.com/show/e6ed29b22c4fbe5eb1d622a07551483f.jpg"></h2> <table> <tbody> <tr> <td>RequireJS</td> <td><strong> </strong></td> </tr> <tr> <td>网站</td> <td><a href="/misc/goto?guid=4958184194212155366" rel="nofollow,noindex">requirejs.org</a></td> </tr> <tr> <td>知识库</td> <td><a href="/misc/goto?guid=4959653574852826056" rel="nofollow,noindex">github.com/jrburke/r.js</a></td> </tr> <tr> <td>当前版本</td> <td>2.3.3</td> </tr> <tr> <td>每月下载</td> <td>百万</td> </tr> </tbody> </table> <p>RequireJS是一种浏览器中的模块加载器，它也可以在Node.js中使用。</p> <h2>工具：代码分析</h2> <p>代码分析工具用于分析代码中潜在错误或偏离语法的标准。一个未闭合括号或未声明的变量一定会被检测出。</p> <h2><a href="/misc/goto?guid=4958870940891400873" rel="nofollow,noindex">ESLint</a></h2> <h2><img src="https://simg.open-open.com/show/83b400721479f69e511a2ab8aa805037.jpg"></h2> <table> <tbody> <tr> <td>ESLint</td> <td> </td> </tr> <tr> <td>网站</td> <td><a href="/misc/goto?guid=4958870940891400873" rel="nofollow,noindex">eslint.org</a></td> </tr> <tr> <td>知识库</td> <td><a href="/misc/goto?guid=4958987271572863311" rel="nofollow,noindex">github.com/eslint/eslint</a></td> </tr> <tr> <td>当前版本</td> <td>3.19.0</td> </tr> <tr> <td>每月下载</td> <td>600万</td> </tr> </tbody> </table> <p>ESLint是一种可插拔的代码分析工具。每个规则都是一个插件，因此可以根据个人喜好进行配置。</p> <h2><a href="/misc/goto?guid=4958848346467399699" rel="nofollow,noindex">JSHint</a></h2> <p><img src="https://simg.open-open.com/show/d436bace8d187ab5215a8e9f1c887694.jpg"></p> <table> <tbody> <tr> <td>JSHint</td> <td> </td> </tr> <tr> <td>网站</td> <td><a href="/misc/goto?guid=4958848346467399699" rel="nofollow,noindex">jshint.com</a></td> </tr> <tr> <td>知识库</td> <td><a href="/misc/goto?guid=4959629544447458423" rel="nofollow,noindex">github.com/jshint/jshint</a></td> </tr> <tr> <td>当前版本</td> <td>2.9.4</td> </tr> <tr> <td>每月下载</td> <td>200万</td> </tr> </tbody> </table> <p>JSHint是一个灵活的JavaScript代码分析工具，它很好的平衡了真正的错误和老旧的语法。</p> <h2><a href="/misc/goto?guid=4959520966534056141" rel="nofollow,noindex">JSLint</a></h2> <p><img src="https://simg.open-open.com/show/775adb89d2910ba0d914129103469299.jpg"></p> <table> <tbody> <tr> <td>JSLint</td> <td> </td> </tr> <tr> <td>网站</td> <td><a href="/misc/goto?guid=4959520966534056141" rel="nofollow,noindex">jslint.com</a></td> </tr> <tr> <td>知识库</td> <td><a href="/misc/goto?guid=4959750015551725755" rel="nofollow,noindex">github.com/reid/node-jslint</a></td> </tr> <tr> <td>当前版本</td> <td>0.10.3</td> </tr> <tr> <td>每月下载</td> <td>50000</td> </tr> </tbody> </table> <p>JSLint是最早的代码分析工具之一，它实现了一套严格的默认规则。</p> <h2>工具：单元测试</h2> <p>测试驱动开发的任务要求需要编写代码来测试自己的代码。目前有许多选择，包括 <a href="/misc/goto?guid=4959750015647613296" rel="nofollow,noindex">Ava</a> , <a href="/misc/goto?guid=4958984395013750561" rel="nofollow,noindex">Tape</a> 和 <a href="/misc/goto?guid=4958834376951638365" rel="nofollow,noindex">Jest</a> ，但目前最流行的三个工具是：</p> <h2><a href="/misc/goto?guid=4958968603421901612" rel="nofollow,noindex">Mocha</a></h2> <h2><img src="https://simg.open-open.com/show/750e29e1787c2eefd6dd2fcd6b100c01.jpg"></h2> <table> <tbody> <tr> <td>Mocha</td> <td> </td> </tr> <tr> <td>网站</td> <td><a href="/misc/goto?guid=4958968603421901612" rel="nofollow,noindex">mochajs.org</a></td> </tr> <tr> <td>知识库</td> <td><a href="/misc/goto?guid=4958875404101300480" rel="nofollow,noindex">github.com/mochajs/mocha</a></td> </tr> <tr> <td>当前版本</td> <td>3.3.0</td> </tr> <tr> <td>每月下载</td> <td>500万</td> </tr> </tbody> </table> <p>Mocha是一个JavaScript测试框架，可以在Node.js或浏览器中运行测试。它支持异步测试，并且经常与 <a href="/misc/goto?guid=4958830654755354669" rel="nofollow,noindex">Chai</a> 配合使用，这样可以使测试代码以可读取的方式表达。</p> <h2><a href="/misc/goto?guid=4959554590782762596" rel="nofollow,noindex">Jasmine</a></h2> <h2><img src="https://simg.open-open.com/show/6082e2ac1b1cc57f113daaabda912907.png"></h2> <table> <tbody> <tr> <td>Jasmine</td> <td> </td> </tr> <tr> <td>网站</td> <td><a href="/misc/goto?guid=4959554590782762596" rel="nofollow,noindex">jasmine.github.io</a></td> </tr> <tr> <td>知识库</td> <td><a href="/misc/goto?guid=4959750015918952891" rel="nofollow,noindex">github.com/jasmine/jasmine-npm</a></td> </tr> <tr> <td>当前版本</td> <td>2.6.0</td> </tr> <tr> <td>每月下载</td> <td>200万</td> </tr> </tbody> </table> <p>Jasmine是一个行为驱动的测试工具，可以在浏览器中自动测试UI和交互。</p> <h2><a href="/misc/goto?guid=4958830654574997040" rel="nofollow,noindex">QUnit</a></h2> <h2><img src="https://simg.open-open.com/show/1d41551fb87b519f75dd2b03b3b9d6d9.png"></h2> <table> <tbody> <tr> <td>QUnit</td> <td> </td> </tr> <tr> <td>网站</td> <td><a href="/misc/goto?guid=4958830654574997040" rel="nofollow,noindex">https://qunitjs.com/</a></td> </tr> <tr> <td>知识库</td> <td><a href="/misc/goto?guid=4959750016059415122" rel="nofollow,noindex">github.com/kof/node-qunit</a></td> </tr> <tr> <td>当前版本</td> <td>1.0.0</td> </tr> <tr> <td>每月下载</td> <td>25000</td> </tr> </tbody> </table> <p>QUnit是一个单元测试框架，可以在输入特定参数时，检查函数结果。它还上报测试结果，确保没有错过特定的代码分支。</p> <h2>总结与建议</h2> <p>目前最为流程的框架是 <a href="/misc/goto?guid=4958968605084997344" rel="nofollow,noindex">React</a> ，同时其它的框架也在向着流行的趋势发展。</p> <p>如果需要一个安全的、通用的Web应用程序，可以考虑使用 <a href="/misc/goto?guid=4959734887704549186" rel="nofollow,noindex">Vue.js</a> 。</p> <p>整体框架已经不再受欢迎了，如果你需要对一个较大型项目进行严格的结构管理， <a href="/misc/goto?guid=4958834801588021319" rel="nofollow,noindex">AngularJS</a> 是一个不错的选择。目前大多数人坚持使用Angular 1.0版本，但是长远来讲，如果你愿意学习TypeScript，Angular 4.x版本是个更好的选择。</p> <p><a href="/misc/goto?guid=4958183308549259819" rel="nofollow,noindex">jQuery</a> 虽然现在并不十分流行，在技术新闻中也很少会被提到，但不可否认它是积极开发的，同时也是网站和应用程序的有力工具。jQuery具有平缓的学习曲线，全球许多开发人员能够很好地理解。</p> <p>如果你想要冒险，可以试试 <a href="/misc/goto?guid=4959736760520144665" rel="nofollow,noindex">Svelte</a> 这是一个有趣的客户端/服务器框架，它可以在构建时预先呈现JavaScript，并且可以改变我们开发的方式。</p> <p>工具的选择因项目而异。虽然目前使用 <a href="/misc/goto?guid=4958825205695716034" rel="nofollow,noindex">Gulp</a> 的开发者占大多数，但 <a href="/misc/goto?guid=4958999009084926641" rel="nofollow,noindex">WebPack</a> 却越来越受欢迎。同时你也不能错过 <a href="/misc/goto?guid=4958870940891400873" rel="nofollow,noindex">ESLint</a> 和 <a href="/misc/goto?guid=4958968603421901612" rel="nofollow,noindex">Mocha</a> 等测试工具。</p> <p>过去的十年，JavaScript经历了革命性的发展。过去只有少量基本的类库可以选择，但是现在可供选择的类库已经铺天盖地。也许无法确定哪个类库、框架和工具是最好的，但是最适合自己项目的，就是最好的。</p> <p> </p> <p>来自：http://web.jobbole.com/91507/</p> <p> </p>