俄罗斯贵宾会-俄罗斯贵宾会官网
做最好的网站

2018 年,我们该如何使用 JavaScript?俄罗斯贵宾会

JavaScript 的未来

想要深入了解我们在 JavaScript 的发展方向? 不妨查看我们的最新文章“2018 年 JavaScript 的未来及远方”。

阅读:JavaScript 的未来

1 赞 1 收藏 1 评论

俄罗斯贵宾会 1

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

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

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

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

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

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

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

如果你正在开发一个相当复杂的站点,那么你会发现框架很有用。当前,Angular、React和Ember都是流行且明智的选择。Backbone是一个相对较小的老式框架;它也适合于许多项目。我为本文整理的初学者工具包使用了React,但实际上,没有错误的选择。TodoMVC使用不同的框架实现了同一个清单应用程序,检出它,自己比较一下各种框架。

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

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

Babel:启用还是关闭

弄明白了吗?Babel 听起来像巴比伦(Babylon)。我都快崩溃了。我并没有试图将 Babel 与 Babylon 联系在一起,但有人过我们可能会放弃对转译(transpiling)的依赖。在过去几年里,Babel 一直是个大问题,因为我们想要 ECMAScript 提出的所有美好的特性,但又并不想等待浏览器跟上更新。随着 ECMAScript 转向年度小版本发布,浏览器可能会跟上。剔除一些非常棒的 kangax 兼容性图表的 JavaScript 发布是什么样的呢?

这些图表的截图不是很清晰,因为我想展示它们看起来是多么的绿!更多有关详细信息,请单击图像下方的链接以进一步查看图表。

俄罗斯贵宾会 2

es6 的兼容性

俄罗斯贵宾会 3

2016+ 的兼容性

在第一张图中,左侧的红色块是编译器(例如es-6 shim,Closure等)和较旧的浏览器(例如Kong 4.14和IE 11)。右边的五个红色列是服务器/编译器PJS、JXA、Node 4、DUK 1.8和DUK 2.2。在较低的图上,看起来像一只狗并且乱七八糟的感叹号的糟糕图形的红色区域是仅使用Node 6.5+具有绿色条纹的服务器/运行时。左边红色方块的构成是编译器/polyfils和IE 11。更重要的是,看看那些绿的!在最流行的浏览器中,我们几乎都是绿色的。2017年功能中的唯一红色标记是Firefox 52 ESR for Shared Memory和Atomics。

从一些角度来看,这里是来自维基百科的一些浏览器使用情况。

俄罗斯贵宾会 4

好的,关闭Babel可能会有点麻烦,因为当它落实之时,我们希望其能被尽可能多的用户尽可能地访问Babel。想想下我们可能能够摆脱那个额外的步骤,在我们没有使用转译器之时。

如何使用其他人的代码?

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

在JavaScript中,代码共享和模块的历史有一点复杂。我强烈建议你阅读Preethi Kasireddy的文章“JavaScript模块入门指南”来了解更多信息。

对于我们而言,术语模块和库基本上是等价的:它们代表大量的自包含代码,我们可以在自己的项目中使用及重用。JavaScript模块一般通过node包管理器npm发布。你可以在npm或GitHub上搜索JavaScript模块。

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

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

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

2018 年,我们该如何使用 JavaScript?

2018/03/14 · JavaScript · 1 评论 · Javascript

原文出处: Tara Z. Manicsic   译文出处:开源中国   

俄罗斯贵宾会 5

从命令行工具和 webpack 到 TypeScript,Flow 等其他工具,我们不妨来讨论一下在 2018 年该如何使用 JavaScript。

去年,包括我在内的很多人都在谈论 JavaScript 的乏力。事实上编写 JavaScript 应用程序的方式并没有真正减少,另外有很多命令行工具完成了大量繁重的工作,转译(transpiling)变得不那么重要,并且 TypeScript 能够减少类型错误的发生,这让我们轻松了不少。

注:本博客文章是我们的白皮书“JavaScript 的未来:2018 及远方”的一部分,它提供了有关 JavaScript 的最新分析和预测。

译者注:这里将 transpiling 译作“转译”,transpiling 是一个英文计算机术语。一般认为转译是一种特殊的编译,当将一种源代码语言编译成另外一种源代码语言时,就称为转译。文中提到的 TypeScript 能够编译成 JavaScript。

那么我如何入手呢?

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

它使用:

  • 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版本。然后,安装这个GitHub库的依赖,并开始使用:

npm install
webpack

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

webpack --watch

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

python -m SimpleHTTPServer

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

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

最后
对全局引导类的文章,在我看来还是有一定的帮助,至少让你知道了原来还有这个东西,犹如很多构建工具的依赖包一样,当你需要了,你可以立马学习并使用它。有新东西出来并不可怕,说明前端社区至少还是很活跃,大家选择入前端坑还是没错的。以自己的思考去选择适合自己的也是蛮有学问的事情。

Webpack 配置

配置你的 webpack 构建过程并真正理解你在做什么,可能是 2017 年更令人畏惧的学习曲线之一。幸运的是,他们的核心贡献者之一 Sean Larkin 奔走在世界各地,为我们提供了很棒的演讲非常有趣和有用的教程

现在许多框架不仅为您创建了 webpack 配置文件,甚至将它们填充到您甚至可能不需要看的地步。Vue 的 CLI 工具有一个 webpack 专用的模板,为您提供全功能的 Webpack 设置。为了让您充分了解命令行工具提供的内容,以下是 Vue CLI 模板包含的内容:

  • npm run dev: 首要开发体验
    • 用于 Vue 单文件组件的 Webpack + vue-loader
    • 热更新中的状态保持
    • 编译错误时的状态保持
    • 保存时使用 ESLint 检查
    • 源文件映射(Source Map)
  • npm run build: 为生产环境准备好构建
    • 使用 UglifyJS v3 最小化 JavaScript
    • 使用 html-minifier 最小化 HTML
    • 使用 cssnano 提取所有组件中的 CSS 并最小化
    • 对静态资源计算 Hash 使之在缓存中长期有效,并自动为生产环境生成使用这些静态资源 URL 的 index.html
    • 使用 npm run build –report 构建并生成含有流量分析的报告
  • npm run unit: 使用 Jest  在 JSDOM 中运行单元测试,或者在 PhantomJS 中使用 Karma + Mocha + karma-webpack
    • 测试文件支持 ES2015+
    • 简单打桩
  • npm run e2e: 使用 Nightwatch 进行端到端测试
    • 自动处理 Selenium 和 chromedriver 依赖
    • 自动生成 Selenium 服务器
    • 在多个浏览器中并行地运行测试
    • 使用一个非常好的命令行工具:

preact-cli,从另一个方面支持着 Webpack 的功能。如果你需要自定义 webpack 配置,只需要创建 preact.config.js,它导出一个函数来改变 webpack。大量的工具带来了大量的便捷性,开发人员们也在相互帮助。

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

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

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

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

JavaScript是如何包含到页面中的?那是另一个复杂的问题,但它是以script标签开始的。

JavaScript的执行会阻塞DOM构造。这就是说,执行JavaScript的时间过长会让人觉得页面没响应。为了避免这种情况,客户端JavaScript经常都是大量使用异步。(你可能听说过AJAX,它就代表asynchronous JavaScript and XML。)

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

谈谈 TypeScript

如果我们在谈 JavaScript,那就不得不谈谈 TypeScript。5 年前从微软办公室诞生的 TypeScript 发展到 2017 年,已经非常酷了。几乎没有什么会议在谈论“我们为什么喜欢 TypeScript”,但它为开发带来了新的体验,自然受到人们喜欢。对于 TypeScript,不需要赞美,我们只是谈谈开发者在使用它的时候为什么会感到轻松。

对于想在 JavaScript 中使用类型的人来说,TypeScript 在语法上是 JavaScript 的超集,为其带来了静态类型。如果你喜欢这种东西,就会觉得非常酷。当然,如果你看到了 JavaScript 状态调查的最新结果,你会发现实际上很多人都喜欢。

俄罗斯贵宾会 6

来自 JavaScript 的状态

我们看看 Brian Terlson 是怎么说的:

作为 2014 年为 JavaScript 提议加入类型的人,我不认为类型会在较短时间内实现。从标准的角度来说,这是一个极其复杂的问题。对于TypeScript 用户来说,采用 TypeScript 标准当然无可非议,不过也有其它一些J avaScript 超集支持类型,它们支持着一些相当重要的用法,比如 Closure Compiler 和 FLow。这些工具的行为各不相同,甚至不清楚它们是否存在一个共同的子集(我不认为有直观的表现)。我不确定类型标准更像哪一个,我和其他人会继续进行相关的调查研究,这可能是有意义的工作,但不要希望在短期内完成 – HashNode AMA with Brian Terlson

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

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

“JavaScript”实际上并不是一门单独的语言。每个浏览器供应商都实现了自己的JavaScript引擎,由于浏览器和版本之间的差别,JavaScript饱受碎片化之苦。CanIUse.com记录了部分不一致的情况;你也可以查看Mozilla开发者社群里的文档。

ES6又称 ES2015/Harmony/ECMAScript6/ECMAScript 2015,是JavaScript规范的最新版本。它引入了新的语法和功能。胖箭头、ES6类、本地模块和模板字符串都是这个JavaScript版本的一部分。Treehouse提供了一份不错的ES6入门教程。

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

转译工具不只是将ES6 JavaScript转换成ES5。还有一些工具可以对JavaScript的变体,如ClojureScript、TypeScript和CoffeeScript,做同样的事情。ClojureScript是Clojure的一个版本,可以编译成JavaScript。TypeScript本质上是JavaScript,但有一个类型系统。CoffeeScript同JavaScript非常像,但有更闪亮的语法;由CoffeeScript创建的许多语法糖都已经被ES6采用,这在很大程度上显得CoffeeScript不那么有用了。所有这些都会编译成普通的JavaScript。

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

命令行工具

大多数库和框架都配备有一个命令行工具,通过输入一个命令,可以为我们启动一些框架项目,以快速创建我希望的东西。这通常包括一个启动脚本(有时用自动重新加载器),构建脚本,测试结构等等。当我们创建新项目时,这些工具可以减轻我们大量冗余文件的编写。让我们来看看更多其他的一些命令行工具。

我如何测试代码?

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

同许多其他类型的编程一样,前端JavaScript可以从测试中获益。大多数JavaScript开发人员都表示,他们至少会编写部分测试。

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

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

describe('helloWorld()', function(){
   it('should greet me by name', function(){
        // assertions go here
   }); 
});

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

// Jasmine
expect(helloWorld("Bonnie")).toEqual("Hello, Bonnie");

// Chai
expect(helloWorld("Bonnie")).to.equal("Hello, Bonnie");

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

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

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

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

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

  • Chai也是一个不错的选择。

本文由俄罗斯贵宾会发布于Web前端,转载请注明出处:2018 年,我们该如何使用 JavaScript?俄罗斯贵宾会

您可能还会对下面的文章感兴趣: