浏览器端已支持 ES6 规范（包括 export & import）

时间 2019-12-05

原文原文链接

固然，是几个比较优秀的浏览器，既然是优秀的浏览器，你们确定知道是那几款啦，我就不列举了，我用的是 chrome。php

对 script 声明 type 为 module 后就能够享受 es6 规范所带来的模块快感了。html

基础语法既然是全支持，const，let，扩展，解构python

import 和 export 也能够快乐的使用了，不须要 Babel 成 ES5 哟es6

如下代码皆为浏览器端直接运行chrome

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6</title>
</head>
<div>
    <em>需浏览器支持 script 标签的 type = module 属性</em>
    <em>当 script 设为 type = module 会失去跨域特性，必须同源</em>
</div>
<body>
    <script type="module">
        // 模块导入
        import getModuleName, { HttpTool, MathTool } from './modules/Tools.js';
        
        console.log("module name: " + getModuleName());

        // 解构小实例 注意传入的是数组，模块解构获取参数
        HttpTool.get(["//segmentfault.com", (url) => {
            console.log(url);
        }]);

        // 扩展（反向）小实例 固然 js 自己就是不定参数的 玩玩而已
        HttpTool.post("//segmentfault.com", "hello", "segmentfault");

        console.log(MathTool.add(1, 2), MathTool.sub(1, 2));
    </script>
</body>
</html>

/**
 * [Tools ES6 module]
 */
const moduleName = "Helper Tools";

var HttpTool = {
    get: function (handler) {
        // 解构操做
        var [url, callback] = handler;
        callback(url);
    },
    post: function (url, ...data) {
        console.log(url);
        // ES6 扩展操做符的另类用法
        // 其实其余语言中 php/python 有可变参数的概念
        // php function foo(name, age, ...props)
        // python def foo(name, age, ...props)
        // ES6 的扩展操做符其实也能够这样使用
        // HttpTool.post(url, foo, bar, hello, world)
        // 除给定参数位外的参数都会被压入 data 数组中
        // a, b, c, d 会被 ...data 接受并管理
        // data 则为 [a, b, c, d]
        // ...data 就能获得字面量的 a, b, c, d，但不能显示获取
        // 须要使用解构语法
        // var [a, b, c, d] = data 来操做
        for (var i in data) {
            console.log(data[i]);
        }
    }
}

var MathTool = {
    add: (a, b) => a + b,
    sub: (a, b) => a - b
}

function getModuleName() {
    return moduleName;
}

export default getModuleName;

export { HttpTool, MathTool };

运行结果segmentfault