1. 程式人生 > >怎麼讓瀏覽器相容你的ES6寫法

怎麼讓瀏覽器相容你的ES6寫法

前面的話:

ES6是JavaScript語言的下一代標準,已經在 2015 年 6 月正式釋出。它的目標,是使得 JavaScript 語言可以用來編寫複雜的大型應用程式,成為企業級開發語言;

為什麼要學習ES6呢?

很多流行的JavaScript開源框架都使用ES6編寫,如Vue.js、video.js、d3.js等等;

ES6可以大大提高開發效率,同時讓語法更加規範化,一定程度上增強了程式碼安全;

更重要的是,ES6是語言級別的升級,而非一個庫或框架。

一:ES6目前(2018.03)在快速推廣使用,但是尚且存在相容性問題

由於使用者使用的瀏覽器版本在釋出的時候也許早於ES6的定稿和釋出,而到了今天,如果使用了ES6的新特性,使用者瀏覽器若沒有更新版本,或者新版本中沒有對ES6的特性進行相容,那麼瀏覽器肯定無法識別我們的ES6程式碼,好比瀏覽器根本看不懂我寫的let和const是什麼東西?只能報錯了。這就是瀏覽器對ES6的相容性問題。


二:常用解決方案

通常的解決思路:把ES6語法轉換成ES5語法。多團隊為此開發出了多種語法解析轉換工具,比較通用的工具方案有babel,jsx,traceur,es6-shim等。

三:大環境

瀏覽器自身也加快速度相容ES6的新特性,其中對ES6新特性最友好的是Chrome和Firefox瀏覽器。即使瀏覽器對ES6新特性開始漸漸支援,但是這還需要很長一段時間;

雖然出現了各種轉換工具,但是到目前為止,還沒有一款工具能百分百將ES6的新特性完美地轉換成ES5,因為在ES6新增的內容中,存在一些無法在ES5中找到與之匹配的語法,所以不建議在生產環境中使用支援度較低的新特性。

四:使用轉換工具babel示例

<script src="browser.min.js"></script>
<script type="text/babel">
   const Name = '張三';//使用新增的關鍵字:const宣告常量
alert(Name); </script>