二、ES6-浏览器兼容&解构赋值

  • 浏览器对于ES6的兼容问题
  • ES6的解构赋值
1.浏览器对于ES6的兼容

由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,浏览器若没有更新版本,或者新版本中没有对ES6的特性进行兼容,那么浏览器肯定无法识别我们的ES6代码,好比浏览器根本看不懂我写的let和const是什么东西?只能报错了。这就是浏览器对ES6的兼容性问题。
针对ES6的兼容性问题,很多团队为此开发出了多种语法解析转换工具,把我们写的ES6语法转换成浏览器可识别的ES5语法,相当于在ES6和浏览器之间做了一个翻译官。比较通用的工具方案有babel,jsx,traceur,es6-shim等。

2.检测Chrome浏览器核IE9对Es6的兼容性

新建一个html文档,加上含有ES6新特性的代码,比如:

    <script>  
        const Name = '张三';//使用新增的关键字:const声明常量
        alert(Name);  
    </script>

运行后在chrome浏览器和IE9下的效果如下图所示:


3.下载安装Babel

下面我们开始 用Babel来兼容,首先安装node.js,安装结束后,我们检测是否安装成功:
点击 “开始”-> “运行”-> 输入“cmd”-> 进入命令提示符窗口,输入node --version来检测当前node的版本。接下来在命令行窗口输入npm install babel-core@5,接下来会看到

在你安装目录下的node_modules\babel-core,打开后你会看到:


在这个目录里面我们找到babel的浏览器版本browser.js(未压缩版)和browser.min.js(压缩版)

4.使用Babel兼容

4.1我们把browser.min.js引入(文件位置的路径要确保正确)。
4.2设置第二个script标签的type为”text/babel”。

 <script src="browser.min.js"></script>
    <script type="text/babel">
        const Name = '张三';//使用新增的关键字:const声明常量
        alert(Name);
    </script>

最后在IE9上运行看看效果吧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,,而到了今天...
    杜小黑妞阅读 13,038评论 0 5
  • 你可能已经听说过ECMAScript 6(简称 ES6)了。ES6 是 Javascript 的下一个版本,它有很...
    米塔塔阅读 977评论 0 10
  • 前言 webpack2和vue2已经不是新鲜东西了,满大街的文章在讲解webpack和vue,但是很多内容写的不是...
    技术宅小青年阅读 6,621评论 4 43
  • 你可能已经听说过ECMAScript 6(简称 ES6)了。ES6 是 Javascript 的下一个版本,它有很...
    奋斗的小废鱼阅读 777评论 0 16
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,281评论 7 35