搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 前端之巅 > 一文掌握JavaScript生态圈现状

一文掌握JavaScript生态圈现状

前端之巅 2017-11-30

Bonnie Eisenman,Twitter的软件工程师,骇客空间NYC Resistor成员之一,曾就职于Codecademy、Fog Creek Software和Google。曾著Learning React Native一书,由O'Reilly Media出版。(译者:谢丽)


如果你以前有编程经验,但是一名前端JavaScript开发的初学者,那么一系列的术语和工具容易引起混淆。本文中,我们不会纠缠于细节的讨论,而是会纵览当前的“JavaScript生态圈”。这应该足够你找准方向,开启前端开发之旅。


文中关键术语显示为粗体。如果你想跳到可以工作的样板代码库,那么我已经将我的一些建议(https://github.com/bonniee/react-starter)整理成了一个GitHub库。

>>>> 客户端JavaScript是如何工作的,为什么要使用它


关键术语:DOM(文档对象模型)、JavaScript、async、AJAX


为了编写高效的前端代码,你需要对如何综合运用HTML、CSS和JavaScript创建Web页面有一个基本的了解。


客户端(通常是浏览器)访问HTML页面时,它会下载它,解析它,然后使用它构造DOM(文档对象模型)。JavaScript可以同DOM交互及修改DOM,交互式站点就是这样创建的。这里有一个DOM的基本介绍(https://css-tricks.com/dom/)


JavaScript是如何包含到页面中的?那是另一个复杂的问题,但它是以script标签开始的(https://www.sitepoint.com/a-detailed-breakdown-of-the-script-tag/)


JavaScript的执行会阻塞(https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)DOM构造。这就是说,执行JavaScript的时间过长会让人觉得页面没响应。为了避免这种情况,客户端JavaScript经常都是大量使用异步。(你可能听说过AJAX,它就代表asynchronous JavaScript and XML。)


如果你正在构建一个交互式站点,那么你会需要使用JavaScript,你可能会使用这种或另一种方式处理异步。


>>>> 框架是什么?我需要使用trendy.js吗?


关键术语:React、Angular、Ember、Backbone、jQuery、Underscore、Lodash


“框架”这个词有许多意思。JavaScript框架的目标通常是减少构建交互式Web页面过程中无谓的工作。从根本上说,框架就是脚手架,设计用来解决一个特定种类的问题。


许多当前流行的框架都是设计用来解决这样的问题的,“如何创建一个支持复杂用户交互的单页Web应用,并在前端管理所有的业务逻辑?”单页应用或者SPA是不需要刷新页面的Web应用,产品的大部分都是作为一个单独的“页面”而存在——回想下Facebook首页或者Gmail收件箱。


那么该用哪个框架呢?React? Angular? 还是Ember?甚至说你需要框架吗?选择麻痹症的信号!


所有这些项目都试图帮你编写更好的Web应用程序。对于选择哪个框架,没有正确的答案,如果有,你就应该使用。


如果你是刚刚开始使用JavaScript,那么不使用框架可能会更好一些,尝试使用jQuery构建一个站点,其他的少用或不用。那很快就会变得让人厌烦,但你能做到,这会让你了解到一些重要的、有关JavaScript工作原理的东西。你还可以使用jQuery践行好的软件工程准则(https://www.youtube.com/watch?v=5Vpdyk9Hpng)


如果你正在开发一个相当复杂的站点,那么你会发现框架很有用。当前,以下三个框架都是流行且明智的选择:


  • Angular

    https://angularjs.org

  • React

    https://facebook.github.io/react

  • Ember

    http://emberjs.com


Backbone(http://backbonejs.org/)是一个相对较小的老式框架;它也适合于许多项目。


我为本文整理的初学者工具包(https://github.com/bonniee/react-starter)使用了React,但实际上,没有错误的选择。TodoMVC(http://todomvc.com/)使用不同的框架实现了同一个清单应用程序,检出它,自己比较一下各种框架。


JavaScript还缺少许多其他语言内置的标准库函数,像字符串填充(https://lodash.com/docs#padStart)数组重排(https://lodash.com/docs#shuffle)。为此,我们通常会使用像jQuery(https://jquery.com/)Underscore(http://underscorejs.org/)Lodash(https://lodash.com/)这样的库来弥补这种不足。按照惯例,这些库在导入后要分别使用$、_和_引用,因此,如果你看到一个JavaScript文件中有许多美元符号,几乎可以肯定这是调用了jQuery。


如果你要开始一个新项目,我建议使用React或者Angular以及Lodash。




>>>> 我应该编写JavaScript,还是其他的什么?JavaScript的种类有哪些?


关键术语:ES5、ES6、ES2015、CoffeeScript、TypeScript、ClojureScript、Babel、“转译(transpiling)”、“编译(compiling)”、MDN参考


“JavaScript”实际上并不是一门单独的语言。每个浏览器供应商都实现了自己的JavaScript引擎,由于浏览器和版本之间的差别,JavaScript饱受碎片化之苦。CanIUse.com(http://caniuse.com/#cats=JS%20API)记录了部分不一致的情况;你也可以查看Mozilla开发者社群(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference)里的文档。


ES6又称:ES2015/Harmony/ECMAScript6/ECMAScript 2015,是JavaScript规范的最新版本(编者注:ES7刚刚发布,但改动较小)。它引入了新的语法和功能。胖箭头、ES6类、本地模块和模板字符串都是这个JavaScript版本的一部分。Treehouse提供了一份不错的ES6入门教程(http://blog.teamtreehouse.com/get-started-ecmascript-6)


虽然JavaScript处于一个碎片化的环境,但能够使用新的语言特性也不错。因此,像Babel这样的工具会把你闪亮的标准JavaScript代码转换成一个同旧平台兼容的版本。这个过程称为转译。这同编译没有太大的区别。使用像Babel这样的工具,你不必太过担心特定的浏览器是否支持你使用的JavaScript特性。


转译工具不只是将ES6 JavaScript转换成ES5。还有一些工具可以对JavaScript的变体,如ClojureScript、TypeScript和CoffeeScript,做同样的事情。ClojureScript(http://www.lispcast.com/what-is-clojurescript)是Clojure的一个版本,可以编译成JavaScript。


TypeScript(http://www.typescriptlang.org/)本质上是JavaScript,但有一个类型系统。CoffeeScript(http://coffeescript.org/)同JavaScript非常像,但有更闪亮的语法;由CoffeeScript创建的许多语法糖都已经被ES6采用,这在很大程度上显得CoffeeScript不那么有用了。所有这些都会编译成普通的JavaScript。


那么你应该使用什么呢?如果你是前端开发的初学者,那么你也许应该编写ES6风格的JavaScript。大部分ES6特性都得到了各浏览器供应商的广泛支持。如果你需要支持相对较老的平台,那么像Babel这样的工具可以替你将ES6编译成兼容ES5的JavaScript。现在先不要考虑闪亮的compile-to-JavaScript选项,如ClojureScript,不过,一旦你有了更多的前端开发经验,那么它们当然值得研究。


一文掌握JavaScript生态圈现状


>>>> 如何使用别人的代码?


关键术语:AMD、commonJS模块、ES6模块、npm、Github


在JavaScript中,代码共享和模块的历史有一点复杂。我强烈建议你阅读Preethi Kasireddy的文章《JavaScript模块入门指南(https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.fpl3u5zb0)》来了解更多信息。


对于我们而言,术语模块和库基本上是等价的:它们代表大量的自包含代码,我们可以在自己的项目中使用及重用。JavaScript模块一般通过node包管理器npm发布。你可以在npm(https://www.npmjs.com/)GitHub(https://github.com/search?o=desc&q=language%3aJavaScript&ref=searchresults&s=stars&type=Repositories&utf8=%E2%9C%93)上搜索JavaScript模块。


模块定义(有时称为模块语法)有几种存在竞争关系的方式,主要包括CommonJS、AMD和ES6原生模块。CommonJS采用一种同步的、面向服务器的方法。相反,AMD(异步模块定义)允许你使用异步、非阻塞的方式定义和加载模块。CommonJS和AMD都是在JavaScript没有原生支持任何模块或依赖概念的情况下创建的。


ES6增加了原生JavaScript模块支持,它既支持CommonJS的声明式语法,又支持AMD的异步加载,还有其他一些特性。终于,模块成为现行语言的一部分。


在工作中,你很可能会遇到所有这三种类型的模块。对于新项目,你该应该使用ES6原生模块。构建工具,如webpack(下面会介绍),会帮助你在现有项目中使用各种类型的模块。


>>>> 我需要Node.js吗?


关键术语:Node.js、npm、nvm


Node.js是一款编写服务器端JavaScript的工具。等一下,难道我们谈论的不只是前端JavaScript吗?


由于JavaScript模块通常在打包后通过node包管理器npm分享,所以你需要安装Node.js,即使你不会把它用于服务器端开发。在OS X或基于Linux的系统上,最好的方式是通过Node版本管理器nvm(https://github.com/creationix/nvm),这简化了不同Node.js版本的管理。Windows用户应该看下nvm-windows(https://github.com/coreybutler/nvm-windows)


>>>> 我该用什么构建工具


关键术语:grunt、gulp、bower、browserify、webpack、“热重载(hot reloading)”、sourcemap


一个script标签接一个script标签地请求将每个JavaScript依赖作为页面的一部分会很慢。因此,大多数站点都使用所谓的JavaScript bundles。捆绑过程会获取所有依赖,并把它们“捆绑”在一起,生成一个单独的文件,包含到页面中。根据需要,有些开发人员还会使用一个“最小化(minifying)”步骤,将所有不必要的字符从JavaScript代码中去除,而又不改变代码的功能。这可以减少客户端需要下载的数据量。


有些工具还支持诸如热重载及sourcemaps这样的特性,前者会在你保存一个文件时自动在浏览器中更新你的项目,后者提供了一个从捆绑好的JavaScript到其原始形式的映射,简化了调试工作。


本质上讲,我刚刚描述的是一个构建过程。不管是否大多数JavaScript开发人员都这样描述,你都是将代码编译成一个生产就绪的格式。“前端devops”或者管理构建、部署工具及依赖项的过程成为一项日益复杂的工作。


Grunt、gulp、broccoli、brunch、browserify和webpack都是JavaScript构建工具。比较它们非常困难,因为它们每一个都致力于解决不同的问题。它们中有许多使用了不同的抽象概念来讨论相同的问题,我们实在是还没有一个共用的术语库。


根据我的经验,开发人员往往对这些工具的配置文件不甚了解,因此就在项目之间粘来粘去。下面是我为初学者库整理的webpack配置文件,供参考:


一文掌握JavaScript生态圈现状


如上,该webpack配置文件指示webpack完成以下工作:


  • 启动app.js作为入口点;

  • 处理以.js结尾的所有文件;

  • 使用babel-loader对它们进行转换,尤其是处理ES6转译(所以es2015 query)和JSX(所以react query);

  • 将所有JavaScript文件捆绑成一个文件static/bundle.js。


对于新项目,我推荐webpack。它有很强的适应性,而且能够很好地处理具有复杂依赖图的大型项目。


一文掌握JavaScript生态圈现状


>>>> 我如何测试代码?


关键术语:Mocha、Jasmine、Chai、Tape、Karma、Selenium、phantomjs


同许多其他类型的编程一样,前端JavaScript可以从测试中获益(http://www.onjava.com/pub/a/onjava/2003/04/02/javaxpckbk.html)大多数(https://s3.amazonaws.com/dailyjs/files/2014-survey-summary.pdf)JavaScript开发人员都表示,他们至少会编写部分测试。


JavaScript缺少一种内置的框架用于运行测试,因此,开发人员需要依赖外部库。不同的测试工具致力于问题的不同方面,这点同JavaScript构建系统非常像。


Mocha和Jasmine是两个流行的库,有时候称为测试框架,可以帮助你编写测试。他们的API十分类似;你描述应该出现的行为,然后使用断言测试它。


一文掌握JavaScript生态圈现状


Mocha实际上没有内置断言库,因此,大多数开发人员都会将它同Chai结合使用。它们的断言语法类似:


一文掌握JavaScript生态圈现状


为了运行测试,Mocha提供了一个命令行工具,而Jasmine没有。许多开发人员使用Karma,这是一个测试执行器,既可以运行Jasmine风格的测试,也可以运行Mocha风格的测试。


那很适合单元测试;对于基于JavaScript的集成测试,我们需要更多工具。在前端领域,集成测试通常涉及使用一个浏览器实际地渲染和加载页面,模拟用户交互,并检查结果。


Selenium是一个Web驱动程序,通常可以用于这些测试。你需要为Selenium配备一个浏览器驱动程序,以便它能够启动浏览器。PhantomJS是一个所谓的无头浏览器——它运行时没有图形用户界面——通常用于测试中。由于它们不需要GUI,所以无头浏览器对自动化测试而言非常有用。你可能会发现Sinon有用;它提供了一个模拟服务器,可以用于模拟AJAX请求的响应。


你还可以设置JavaScript测试同持续集成(CI)系统一起运行,如Jenkins或Travis。


JavaScript测试工具有大量堪称完美的选择。对于新项目,我常常选择Karma和Jasmine,并使用PhantomJS作为测试浏览器,但Mocha + Chai也是一个不错的选择。


一文掌握JavaScript生态圈现状


>>>> 我该怎样入手呢?


我整理了一个GitHub库,里面包含一个基本的前端开发配置:https://github.com/bonniee/react-starter


它使用:


  • React

  • Babel转译

  • Webpack构建

  • ES6语法(针对React类和模块导出)

  • Karma + Jasmine + PhantomJS测试


让我们稍微详细地讨论下。React是我们使用的框架,它让我们可以更轻松地创建交互式站点。(你描述UI,React会为你渲染并处理DOM操作。)我们将编写符合ES6规范的JavaScript代码。Webpack会使用Babel将ES6 JavaScript代码转译成兼容ES5的JavaScript代码。Webpack还会管理依赖和模块导入。最后,我们使用Karma和PhantomJS运行测试,并使用Jasmine库编写这些测试。


首先,确保你有一个可用的npm(https://docs.npmjs.com/getting-started/installing-node)版本。然后,安装这个GitHub库的依赖,并开始使用:


一文掌握JavaScript生态圈现状


然后,使用它进行开发,运行:


一文掌握JavaScript生态圈现状


这会指示webpack监视项目,并在JavaScript文件变化时重新编译它。想要查看应用程序,就需要启动一个本地服务器。在OS X或Linux上,使用Python很容易做到:


一文掌握JavaScript生态圈现状


……你已经准备好开始了!编辑app.js或Hello.js增加更多的React组件,并使用npm test来运行测试。


当然,有一个可以工作的初始代码库只是成功的一半。前端JavaScript开发领域很复杂,有大量的工具、术语以及新概念需要学习,同时也有大量的问题需要解决。上述任意一个主题都很容易写满一个博客。希望这篇文章能让你对JavaScript生态圈有一些了解,能在你学习更多有关前端开发的知识时提供一些指导。


欢迎加入社区!


注意:徽标许可


  • React:React-docs许可协议及知识共享归属许可协议

    https://github.com/facebook/react/blob/master/docs/img/logo.svg

    https://github.com/facebook/react/blob/master/LICENSE-docs

  • Babel:MIT许可协议

    https://github.com/babel/babel/blob/master/LICENSE

  • Webpack:MIT许可协议

    https://github.com/webpack/webpack/blob/master/LICENSE

  • Karma:MIT许可协议

    https://github.com/karma-runner/karma/blob/master/LICENSE

  • Jasmine:MIT许可协议

    https://github.com/jasmine/jasmine/blob/master/MIT.LICENSE

  • PhantomJS:BSD许可协议

    https://github.com/ariya/phantomjs/blob/master/LICENSE.BSD


长按二维码关注

        前  端  之  巅

        紧 跟 前 端 发 展
        共 享 一 线 技 术
        不 断 学 习 进 步
        攀 登 前 端 之 巅



版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《一文掌握JavaScript生态圈现状》的版权归原作者「前端之巅」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注前端之巅微信公众号

前端之巅微信公众号:frontshow

前端之巅

手机扫描上方二维码即可关注前端之巅微信公众号

前端之巅最新文章

精品公众号随机推荐