美文网首页
二、ES6-浏览器兼容&解构赋值

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

作者: 易冷zzz | 来源:发表于2017-08-06 18:06 被阅读80次
  • 浏览器对于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上运行看看效果吧。

相关文章

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

    浏览器对于ES6的兼容问题 ES6的解构赋值 1.浏览器对于ES6的兼容 由于广大用户使用的浏览器版本在发布的时候...

  • es6-解构赋值

    什么是解构赋值 左右一一对应进行赋值。 解构赋值的分类 数组解构赋值,左右都是数组 对象解构赋值,左右都是对象 字...

  • ES6-解构赋值

    ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 要点: 1、左右两边结构必须一样;2...

  • ES6-解构赋值

    语法 可以将值从数组或属性从对象提取到不同的变量中。 表达式左边定义了要从原变量中取出什么变量。 解构数组 数组解...

  • ES6-解构赋值

    ES6为对象和数组提供了解构功能,允许按照一定模式从对象和数组中提取值,并对变量进行赋值。 对象解构对象解构的语法...

  • 解构赋值

    一. 数组的解构赋值 存在不完整解构赋值。 二. 对象的解构赋值 三. 字符串的解构赋值 四. 函数的解构赋值 上...

  • 变量的解构赋值 - 字符串、数值、布尔值、函数参数

    一、字符串的解构赋值 二、数值和布尔值的解构赋值 三、函数参数的解构赋值 变量的解构赋值 - 数组篇[https:...

  • ES6 2.解构赋值

    解构赋值 解构赋值的分类 数组解构赋值 对象解构赋值 字符串解构赋值 布尔值解构赋值 函数参数解构赋值 数值解构赋...

  • ES6 语法(解构赋值)

    什么是解构赋值及用法 解构赋值分类:数组解构赋值对象解构赋值字符串解构赋值布尔值解构赋值函数参数解构赋值数值解构赋...

  • JS基础:ES6关于基本语法的一些扩展

    目录一. 解构赋值 1. 数组的解构赋值 2. JS对象的解构赋值 3. 解构赋值的应用场景二. 字符串的扩展 1...

网友评论

      本文标题:二、ES6-浏览器兼容&解构赋值

      本文链接:https://www.haomeiwen.com/subject/ooqnlxtx.html