ECMAScript 7又以JavaScript
2016而被熟知,是正在快速开发的新一代JavaScript编程语言标准。尽管该标准需要等到明年才发布,但是诸多浏览器已经做好了准备。同往常一样,Chrome和Firefox率先做出改变,而今天召开的微软开发者网络会议上,负责HTML5和开源网页标准的主要项目经理David
Catuhe也宣布Edge浏览器开始部署ECMAScript 7功能。

JavaScript由三部分组成:

目录

  • 引言

  • ECMAScript

  • ES5-/-ES6-/-ES7

  • babel

    • babel-cli

    • babel-node

    • 其他

  • 小结

  • 参考

第一个例子

JavaScript自1995年诞生以来已过去了16个年头,如今全世界无数的网页在依靠她完成各种关键任务,JavaScript曾在Tiobe发布的编程语言排行榜中排到了第8名,紧随C#,JavaScript从过去装饰性的一种脚本语言转变为主流的编程语言,人们用它来开发更大更复杂的程序,这就需要Web开发人员更深入的了解JavaScript,了解它的过去、现在和未来。

图片 1

    1. ECMAScript(核心)

            作为核心,它规定了语言的组成部分:语法、类型、语句、关键字、保留字、操作符、对象。

引言

作为一个JavaScript使用者和开发者
想必每天都在和不同的JavaScript版本和工具打交道 例如:

ES5 / ES6 / ES7 / babel ...

那么这些到底是什么意思呢? 本文打算用最简单的描述理清这些关系

Async/Await应该是目前最简单的异步方案了,首先来看个例子。

JavaScript历史简述

据 悉Edge浏览器在装备ECMAScript
7功能之后将会率先增加async/await功能,这是老JavaScript的版本回调和承诺模式(官方在ES6中增加)的革命性升级。微软公司和
JavaScript社区推行该功能已经有段时间,主要是因为在微软的C#编程语言上使用async/await功能已经有数年时间了。在Windows
10 Build 10532及更高版本将会增加对async/await功能的支持。

    2. DOM(文档对象模型)

ECMAScript

ECMAScript是由ECMA国际(前身为
欧洲计算机制造商协会 European Computer Manufacturers
Association)制定的标准化脚本语言

JavaScript是按照ECMAScript标准实现的编程语言

即: ECMAScript是标准 JavaScript是实现 但是日常两种可以互换

这里我们要实现一个暂停功能,输入N毫秒,则停顿N毫秒后才继续往下执行。

  大概在1992年,一家称作Nombas的公司开始开发一种叫做C减减(C-minus-minus,简称Cmm)的嵌入式脚本语言。这个脚本语言捆绑在一个叫做CEnvi的共享软件产品中,当Netscape
Navigator崭露头角时,Nombas开发了一个可以嵌入网页中的CEnvi的版本。这些早期的试验称为Espresso
Page(浓咖啡般的页面),它们代表了第一个在万维网上使用的客户端脚本语言。而Nombas丝毫没有料到它的理念将会成为因特网的一块重要基石。

稿源:cnbeta

    3. BOM (浏览器对象模型)

ES5 / ES6 / ES7

  • ES5 / ES6 是指ECMAScript版本的缩写

ECMAScript标准发布的版本和年份的对应关系如下

年份 版本 缩写
2011 ECMAScript 5.1 ES5
2015 ECMAScript 6.0 ES6/ES2015
  • ES7 是指ECMAScript的最新版本

由于标准还没有正式确定所以分为4个stage

功能 stage 0 > stage 1 > stage 2 > stage 3

图片 2

  当网上冲浪越来越流行时,对于开发客户端脚本的需求也逐渐增大。当时工作于Netscape的Brendan
Eich,开始着手为即将在1995年发行的Netscape Navigator
2.0开发一个称之为LiveScript的脚本语言,当时的目的是同时在浏览器和服务器端使用它。Netscape与Sun公司联手及时完成LiveScript实现。就在Netscape
Navigator
2.0即将正式发布前,Netscape将其更名为JavaScript,目的是为了利用Java这个因特网时髦词汇。Netspace的赌注最终得到回报,JavaScript从此变成了因特网的必备组件。

我们主要了解ECMAScript

    ECMAScript版本:

babel

babel[‘beibəl] 即
巴别塔

从名字不难看出babel的作用: 解决JavaScript不同版本兼容性问题

ES6 / ES7标准也很多有用的特性

例如: async / await就包含在stage 3

但是由于

  • 兼容性 尤其是浏览器的兼容性 + 国内用户各种盗版系统不升级
    所以不得不将ES6 / ES7实现的JavaScript代码转码成ES5执行

浏览器对ES6的兼容性 可以参考ECMAScript 6 compatibility
table

  • 扩展性
    JavaScript的超集TypeScript以及JSX
    也需要转码成JavaScript才能执行

控制台先输出start,稍等3秒后,输出了end。

ECMAScript标准

        第一版(ES1):

            初始版本

babel-cli

Babel提供了babel-cli工具 用于命令行转码 安装命令如下

npm i -g babel-cli
babel -V

关于npm的安装和使用可以参考这里

  • 首先 创建一个使用ES6″箭头函数”语法的script.js文件

var a = [1, 2];
console.log('before: ' + a);

a = a.map(i => i + 1);
console.log('after: ' + a);

关于”箭头函数”的更多介绍
可以参考这里

  • 接着 在script.js文件的同级目录添加babel的配置文件.babelrc

{
  "presets": [
    "es2015"
  ],
}
  • 同时 我们需要添加babel presets “es2015″的依赖 安装命令如下

npm i --save-dev babel-preset-es2015

安装成功后 在同级目录下会生成package.json文件和node_modules文件夹

  • 最后 我们就可以使用babel来将ES6文件转码成ES5文件了 命令如下

babel script.js -o script-compiled.js

转码成功后 可以看到生成的script-compiled.js文件内容如下

'use strict';

var a = [1, 2];
console.log('before: ' + a);

a = a.map(function (i) {
  return i + 1;
});
console.log('after: ' + a);

除了在本机安装babel-cli工具
还可以使用babel在线转码工具

基本规则

  因为JavaScript 1.0如此成功,Netscape在Netscape Navigator
3.0中发布了1.1版。恰巧那个时候,微软决定进军浏览器,发布了IE 3.0
并搭载了一个JavaScript的克隆版,叫做JScript(这样命名是为了避免与Netscape潜在的许可纠纷)。微软步入Web浏览器领域的这重要一步虽然令其声名狼藉,但也成为JavaScript语言发展过程中的重要一步。

相关文章