ECMAScript6入门

1.JavaScript的历史

诞生
JavaScript诞生于1995年。起初它的主要目的是处理以前由服务器端负责的一些表单验证。当时走在技术革新最前沿的Netscape(网景)公司,决定着手开发一种客户端语言,用来处理这种装简单的验证。当时就职于Netscape公司的布兰登·艾奇开始着手计划将1995年2月发布的LiveScript同时在浏览器和服务器中使用。

Javascript于Java的关系
为了赶在发布日期前完成LiveScript的开发,Netscape与Sun公司成立了一个开发联盟。而此时,Netscape为了搭上媒体热炒Java的顺风车,临时把LiveScript改名为JavaScript,所以从本质上来说JavaScript和Java没什么关系。

Javascript的版本问题
JavaScript 1.0获得了巨大的成功,Netscape随后在Netscape Navigator 3(网景浏览器)中发布了JavaScript 1.1。之后作为竞争对手的微软在自家的IE3中加入了名为JScript(名称不同是为了避免侵权)的JavaScript实现。而此时市面上意味着有3个不同的JavaScript版本,IE的JScript、网景的JavaScript和ScriptEase中的CEnvi。当时还没有标准规定JavaScript的语法和特性。随着版本的不同暴露的问题日益加剧,JavaScript的规范化最终被提上日程。

JavaScript与ECMAScript 的关系
1997年,以JavaScript1.1为蓝本的建议被提交给了欧洲计算机制造商协会(ECMA,European Computer Manufactures Association)该协会指定39号技术委员会负责将其进行标准化,TC39来此各大公司以及其他关注脚本语言发展的公司的程序员组成,经过数月的努力完成了ECMA-262——定义了一种名为ECMAScript的新脚本语言的标准。第二年,ISO/IEC(国标标准化组织和国际电工委员会)也采用了ECMAScript作为标准(即ISO/IEC-16262)。

ECMAScript是什么?
ECMAScript是Javascript语言的标准
ECMA European Computer Manufactures Association(欧洲计算机制造联合会),主要任务是研究信息和通讯技术方面的标准并发布有关技术报告
ECMAScript6:简称ES6,是JavaScript语言的下一代标准,也是目前正是发布的最新JavaScript标准,由于ES6是在2015年发布,所以ES6也成为ECMAScript2015

2.ECMAScript的发展历史

  • 1998年6月,ECMAScript 2.0版发布。
  • 1999年12月,ECMAScript 3.0版发布,成为JavaScript的通行标准,得到了广泛支持。
  • 2007年10月,ECMAScript 4.0版草案发布,对3.0版做了大幅升级,预计次年8月发布正式版本。草案发布后,由于4.0版的目标过于激进,各方对于是否通过这个标准,发生了严重分歧。
  • 2008年7月,由于对于下一个版本应该包括哪些功能,各方分歧太大,争论过于激进,ECMA开会决定,中止ECMAScript 4.0的开发,将其中涉及现有功能改善的一小部分,发布为ECMAScript 3.1,而将其他激进的设想扩大范围,放入以后的版本,由于会议的气氛,该版本的项目代号起名为Harmony(和谐)。会后不久,ECMAScript 3.1就改名为ECMAScript 5。
  • 2009年12月,ECMAScript 5.0版正式发布。Harmony项目则一分为二,一些较为可行的设想定名为JavaScript.next继续开发,后来演变成ECMAScript 6;一些不是很成熟的设想,则被视为JavaScript.next.next,在更远的将来再考虑推出。
  • 2011年6月,ECMAscript 5.1版发布,并且成为ISO国际标准(ISO/IEC 16262:2011)。
  • 2013年3月,ECMAScript 6草案冻结,不再添加新功能。新的功能设想将被放到ECMAScript 7。
  • 2013年12月,ECMAScript 6草案发布。然后是12个月的讨论期,听取各方反馈。
  • 2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015。
    ECMA的第39号技术专家委员会(Technical Committee 39,简称TC39)负责制订ECMAScript标准,成员包括Microsoft、Mozilla、Google等大公司。TC39的总体考虑是,ES5与ES3基本保持兼容,较大的语法修正和新功能加入,将由JavaScript.next完成。

运行ECMAScript6的途径

  • 浏览器(IE、Firefox、Chrome、Safari、Opera等)
    浏览器对ES6的支持情况http://kangax.github.io/compat-table/es6/
  • 使用Javascript引擎的系统(如Node.js)
    Node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快,性能非常好。Google Chrome浏览器就是用的V8引擎
    Node.js 下载地址https://nodejs.org/zh-cn/,目前支持到97%
  • 使用Babel工具将ECMAScript6转换为ECMAScript5
    Babel 是ES2015 语法转化器。这些转化器能让你现在就使用最新的 JavaScript 语法,而不用等待浏览器提供支持。官网地址:http://babeljs.io/

3.ES6使用

3.1.配置WebStrom

在项目中引用js:
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/es6.js"></script>
</head>
<body>
米好
</body>
</html>

在es6.js中编写es6语法:

/**
 * Created by jarrysong on 2017/5/17.
 */
let a="jarry";
alert(a);

这里会出现语法错误提示,因为项目中不支持es6语法:let

error.png

解决方法是:
Setting——>Languages——>JavaScript——>ESMAScript 6

Es6设置.png

这样,就可以进行ES6的使用了。

3.2.使用Babel完成ES6到ES5的转换

  • babel全局安装
npm install -g babel-cli
  • 使用npm创建一个nodejs工程,步骤如图:
    创建工程目录,并执行命令:
npm init
创建工程.png
  • 当前项目中安装转换插件(插件中的js代码,将用于转换):
npm install babel-preset-es2015 –save
  • 使用WebStorm打开第一步创建的nodejs工程,在工程中创建一个js文件,并编写ES6代码
/**
 * Created by jarrysong on 2017/5/18.
 */
let a="jarry";
alert(a);
  • 手动将ES6转换成ES5
babel es6.js --out-file es5.js --presets es2015

结果会在项目中生成一个es5.js文件,里面就是对应的es5语法:

/**
 * Created by jarrysong on 2017/5/18.
 */
"use strict";
/**
 * Created by jarrysong on 2017/5/18.
 */
var a = "jarry";
alert(a);

自动转换
只要es6文件改动并保存了,es5文件会自动修改

babel es6.js -w --out-file es5.js --presets es2015

3.3.在页面中实时转换ES6到ES5

  • 当前项目安装babel-core插件(在网页上实时转换ES6到ES5)
npm install babel-core@5 –save
  • HTML页面引入babel-core实时转换js代码
/node_modules/babel-core/browser.min.js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="/node_modules/babel-core/browser.min.js"></script>
    <script type="text/babel" src="es6.js"></script>
    <title>Title</title>
</head>
<body>

</body>
</html>

备注:在性能上考虑的话,一般是在服务器上转成ES5之后传给客户端的性能效率会比客户端从服务器拉取ES6转成ES5要高。

3.4.使用Browsersync实时刷新页面

  • Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。
  • 安装Browsersync
npm install -g browser-sync
  • 当前项目目录下启动Browsersync,开始监听
browser-sync start --server --files "**"
实时更新.png

4.本地安装和全局安装的区别

本地安装

  • 将安装包放在 ./node_modules 下(运行 npm 命令时所在的目录),如果没有 node_modules 目录,会在当前执行 npm 命令的目录下生成 node_modules 目录。
  • 可以通过 require() 来引入本地安装的包。

全局安装(-g)

  • 将安装包放在 /usr/local 下或者你 node 的安装目录。
  • 可以直接在命令行里使用。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,219评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,363评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,933评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,020评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,400评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,640评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,896评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,597评论 0 199
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,327评论 1 244
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,581评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,072评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,399评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,054评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,083评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,849评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,672评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,585评论 2 270

推荐阅读更多精彩内容