ECMAScript6入門

1.JavaScript的歷史

誕生
JavaScript誕生于1995年。起初它的主要目的是處理以前由服務(wù)器端負(fù)責(zé)的一些表單驗(yàn)證。當(dāng)時(shí)走在技術(shù)革新最前沿的Netscape（網(wǎng)景）公司，決定著手開發(fā)一種客戶端語言，用來處理這種裝簡單的驗(yàn)證。當(dāng)時(shí)就職于Netscape公司的布蘭登·艾奇開始著手計(jì)劃將1995年2月發(fā)布的LiveScript同時(shí)在瀏覽器和服務(wù)器中使用。

Javascript于Java的關(guān)系
為了趕在發(fā)布日期前完成LiveScript的開發(fā)，Netscape與Sun公司成立了一個(gè)開發(fā)聯(lián)盟。而此時(shí)，Netscape為了搭上媒體熱炒Java的順風(fēng)車，臨時(shí)把LiveScript改名為JavaScript，所以從本質(zhì)上來說JavaScript和Java沒什么關(guān)系。

Javascript的版本問題
JavaScript 1.0獲得了巨大的成功，Netscape隨后在Netscape Navigator 3（網(wǎng)景瀏覽器）中發(fā)布了JavaScript 1.1。之后作為競(jìng)爭(zhēng)對(duì)手的微軟在自家的IE3中加入了名為JScript（名稱不同是為了避免侵權(quán)）的JavaScript實(shí)現(xiàn)。而此時(shí)市面上意味著有3個(gè)不同的JavaScript版本，IE的JScript、網(wǎng)景的JavaScript和ScriptEase中的CEnvi。當(dāng)時(shí)還沒有標(biāo)準(zhǔn)規(guī)定JavaScript的語法和特性。隨著版本的不同暴露的問題日益加劇，JavaScript的規(guī)范化最終被提上日程。

JavaScript與ECMAScript 的關(guān)系
1997年，以JavaScript1.1為藍(lán)本的建議被提交給了歐洲計(jì)算機(jī)制造商協(xié)會(huì)（ECMA，European Computer Manufactures Association）該協(xié)會(huì)指定39號(hào)技術(shù)委員會(huì)負(fù)責(zé)將其進(jìn)行標(biāo)準(zhǔn)化，TC39來此各大公司以及其他關(guān)注腳本語言發(fā)展的公司的程序員組成，經(jīng)過數(shù)月的努力完成了ECMA-262——定義了一種名為ECMAScript的新腳本語言的標(biāo)準(zhǔn)。第二年，ISO/IEC（國標(biāo)標(biāo)準(zhǔn)化組織和國際電工委員會(huì)）也采用了ECMAScript作為標(biāo)準(zhǔn)（即ISO/IEC-16262）。

ECMAScript是什么？
ECMAScript是Javascript語言的標(biāo)準(zhǔn)
ECMA European Computer Manufactures Association（歐洲計(jì)算機(jī)制造聯(lián)合會(huì)），主要任務(wù)是研究信息和通訊技術(shù)方面的標(biāo)準(zhǔn)并發(fā)布有關(guān)技術(shù)報(bào)告
ECMAScript6：簡稱ES6，是JavaScript語言的下一代標(biāo)準(zhǔn)，也是目前正是發(fā)布的最新JavaScript標(biāo)準(zhǔn)，由于ES6是在2015年發(fā)布，所以ES6也成為ECMAScript2015

2.ECMAScript的發(fā)展歷史

  • 1998年6月，ECMAScript 2.0版發(fā)布。
  • 1999年12月，ECMAScript 3.0版發(fā)布，成為JavaScript的通行標(biāo)準(zhǔn)，得到了廣泛支持。
  • 2007年10月，ECMAScript 4.0版草案發(fā)布，對(duì)3.0版做了大幅升級(jí)，預(yù)計(jì)次年8月發(fā)布正式版本。草案發(fā)布后，由于4.0版的目標(biāo)過于激進(jìn)，各方對(duì)于是否通過這個(gè)標(biāo)準(zhǔn)，發(fā)生了嚴(yán)重分歧。
  • 2008年7月，由于對(duì)于下一個(gè)版本應(yīng)該包括哪些功能，各方分歧太大，爭(zhēng)論過于激進(jìn)，ECMA開會(huì)決定，中止ECMAScript 4.0的開發(fā)，將其中涉及現(xiàn)有功能改善的一小部分，發(fā)布為ECMAScript 3.1，而將其他激進(jìn)的設(shè)想擴(kuò)大范圍，放入以后的版本，由于會(huì)議的氣氛，該版本的項(xiàng)目代號(hào)起名為Harmony（和諧）。會(huì)后不久，ECMAScript 3.1就改名為ECMAScript 5。
  • 2009年12月，ECMAScript 5.0版正式發(fā)布。Harmony項(xiàng)目則一分為二，一些較為可行的設(shè)想定名為JavaScript.next繼續(xù)開發(fā)，后來演變成ECMAScript 6；一些不是很成熟的設(shè)想，則被視為JavaScript.next.next，在更遠(yuǎn)的將來再考慮推出。
  • 2011年6月，ECMAscript 5.1版發(fā)布，并且成為ISO國際標(biāo)準(zhǔn)（ISO/IEC 16262:2011）。
  • 2013年3月，ECMAScript 6草案凍結(jié)，不再添加新功能。新的功能設(shè)想將被放到ECMAScript 7。
  • 2013年12月，ECMAScript 6草案發(fā)布。然后是12個(gè)月的討論期，聽取各方反饋。
  • 2015年6月17日，ECMAScript 6發(fā)布正式版本，即ECMAScript 2015。
    ECMA的第39號(hào)技術(shù)專家委員會(huì)（Technical Committee 39，簡稱TC39）負(fù)責(zé)制訂ECMAScript標(biāo)準(zhǔn)，成員包括Microsoft、Mozilla、Google等大公司。TC39的總體考慮是，ES5與ES3基本保持兼容，較大的語法修正和新功能加入，將由JavaScript.next完成。

運(yùn)行ECMAScript6的途徑

  • 瀏覽器（IE、Firefox、Chrome、Safari、Opera等）
    瀏覽器對(duì)ES6的支持情況http://kangax.github.io/compat-table/es6/
  • 使用Javascript引擎的系統(tǒng)（如Node.js）
    Node.js是一個(gè)Javascript運(yùn)行環(huán)境(runtime)。實(shí)際上它是對(duì)Google V8引擎進(jìn)行了封裝。V8引 擎執(zhí)行Javascript的速度非?？?，性能非常好。Google Chrome瀏覽器就是用的V8引擎
    Node.js 下載地址https://nodejs.org/zh-cn/，目前支持到97%
  • 使用Babel工具將ECMAScript6轉(zhuǎn)換為ECMAScript5
    Babel 是ES2015 語法轉(zhuǎn)化器。這些轉(zhuǎn)化器能讓你現(xiàn)在就使用最新的 JavaScript 語法，而不用等待瀏覽器提供支持。官網(wǎng)地址：http://babeljs.io/

3.ES6使用

3.1.配置WebStrom

在項(xiàng)目中引用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);

這里會(huì)出現(xiàn)語法錯(cuò)誤提示，因?yàn)轫?xiàng)目中不支持es6語法：let

error.png

解決方法是：
Setting——>Languages——>JavaScript——>ESMAScript 6

Es6設(shè)置.png

這樣，就可以進(jìn)行ES6的使用了。

3.2.使用Babel完成ES6到ES5的轉(zhuǎn)換

  • babel全局安裝
npm install -g babel-cli
  • 使用npm創(chuàng)建一個(gè)nodejs工程，步驟如圖：
    創(chuàng)建工程目錄，并執(zhí)行命令：
npm init
創(chuàng)建工程.png
  • 在當(dāng)前項(xiàng)目中安裝轉(zhuǎn)換插件（插件中的js代碼，將用于轉(zhuǎn)換）：
npm install babel-preset-es2015 –save
  • 使用WebStorm打開第一步創(chuàng)建的nodejs工程，在工程中創(chuàng)建一個(gè)js文件，并編寫ES6代碼
/**
 * Created by jarrysong on 2017/5/18.
 */
let a="jarry";
alert(a);
  • 手動(dòng)將ES6轉(zhuǎn)換成ES5
babel es6.js --out-file es5.js --presets es2015

結(jié)果會(huì)在項(xiàng)目中生成一個(gè)es5.js文件，里面就是對(duì)應(yīng)的es5語法：

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

自動(dòng)轉(zhuǎn)換
只要es6文件改動(dòng)并保存了，es5文件會(huì)自動(dòng)修改

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

3.3.在頁面中實(shí)時(shí)轉(zhuǎn)換ES6到ES5

  • 在當(dāng)前項(xiàng)目安裝babel-core插件（在網(wǎng)頁上實(shí)時(shí)轉(zhuǎn)換ES6到ES5）
npm install babel-core@5 –save
  • HTML頁面引入babel-core實(shí)時(shí)轉(zhuǎn)換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>

備注：在性能上考慮的話，一般是在服務(wù)器上轉(zhuǎn)成ES5之后傳給客戶端的性能效率會(huì)比客戶端從服務(wù)器拉取ES6轉(zhuǎn)成ES5要高。

3.4.使用Browsersync實(shí)時(shí)刷新頁面

  • Browsersync能讓瀏覽器實(shí)時(shí)、快速響應(yīng)您的文件更改（html、js、css、sass、less等）并自動(dòng)刷新頁面。
  • 安裝Browsersync
npm install -g browser-sync
  • 在當(dāng)前項(xiàng)目目錄下啟動(dòng)Browsersync，開始監(jiān)聽
browser-sync start --server --files "**"
實(shí)時(shí)更新.png

4.本地安裝和全局安裝的區(qū)別

本地安裝

  • 將安裝包放在 ./node_modules 下（運(yùn)行 npm 命令時(shí)所在的目錄），如果沒有 node_modules 目錄，會(huì)在當(dāng)前執(zhí)行 npm 命令的目錄下生成 node_modules 目錄。
  • 可以通過 require() 來引入本地安裝的包。

全局安裝（-g）

  • 將安裝包放在 /usr/local 下或者你 node 的安裝目錄。
  • 可以直接在命令行里使用。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容