瀏覽器端已支持 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