瀏覽器端已支持 ES6 規范（包括 export & import）

andycall 發布于2019-08-21 16:54 / 2402人閱讀

當然，是幾個比較優秀的瀏覽器，既然是優秀的瀏覽器，大家肯定知道是那幾款啦，我就不列舉了，我用的是 chrome。

對 script 聲明 type 為 module 后就可以享受 es6 規范所帶來的模塊快感了。

基礎語法既然是全支持，const，let，擴展，解構

import 和 export 也可以快樂的使用了，不需要 Babel 成 ES5 喲

以下代碼皆為瀏覽器端直接運行




    
    ES6


    需瀏覽器支持 script 標簽的 type = module 屬性
    當 script 設為 type = module 會失去跨域特性，必須同源

/**
 * [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 };

運行結果

云服務器 GPU云服務器 webrtc支持瀏覽器 webrtc瀏覽器支持 webrtc 瀏覽器支持 webrtc 支持瀏覽器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88892.html

深入 CommonJs 與 ES6 Module

摘要：目前主流的模塊規范模塊通用模塊如果你在文件頭部看到這樣的代碼，那么這個文件使用的就是規范實際上就是全局變量這三種風格的結合這段代碼就是對當前運行環境的判斷，如果是環境就是使用規范，如果不是就判斷是否為環境，最后導出全局變量有了后我們的代碼和目前主流的模塊規范 UMD CommonJs es6 module umd 模塊（通用模塊） (function (global, facto...

sanyang 2019-08-23 14:42 評論0 收藏0
require，import區別

摘要：，區別遵循的模塊化規范不一樣模塊化規范即為提供一種模塊編寫模塊依賴和模塊運行的方案。出現的時間不同相關的規范由于野生性質，在年前后出生。作為的規范，一直沿用至今。這其實要感謝原來項目名叫做，后更名為這個神一般的項目。 require，import區別遵循的模塊化規范不一樣模塊化規范：即為 JavaScript 提供一種模塊編寫、模塊依賴和模塊運行的方案。誰讓最初的 JavaScri...

Rango 2019-08-20 18:30 評論0 收藏0
JS模塊化——CommonJS AMD CMD UMD ES6 Module 比較

摘要：即盡早地執行依賴模塊。阮一峰輸出值的引用模塊是動態關聯模塊中的值，輸出的是值得引用。的加載實現阮一峰運行時加載靜態編譯模塊是運行時加載，模塊是編譯時輸出接口。模塊化開發優點模塊化開發中，通常一個文件就是一個模塊，有自己的作用域，只向外暴露特定的變量和函數，并且可以按需加載。依賴自動加載，按需加載。提高代碼復用率，方便進行代碼的管理，使得代碼管理更加清晰、規范。減少了命名沖...

shadowbook 2019-08-26 13:40 評論0 收藏0
前端20個靈魂拷問徹底搞明白你就是中級前端工程師【中篇】

摘要：前端個靈魂拷問，徹底搞明白你就是中級前端工程師上篇感覺大家比較喜歡看這種類型的文章，以后會多一些。所有依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成之后，這個回調函數才會運行。此規范其實是在推廣過程中產生的。 showImg(https://segmentfault.com/img/bVbwAMU?w=700&h=394); 前端20個靈魂拷問，徹底搞明白你就是中級前端工程師...

MartinDai 2019-08-30 15:44 評論0 收藏0
前端20個靈魂拷問徹底搞明白你就是中級前端工程師【中篇】

摘要：前端個靈魂拷問，徹底搞明白你就是中級前端工程師上篇感覺大家比較喜歡看這種類型的文章，以后會多一些。所有依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成之后，這個回調函數才會運行。此規范其實是在推廣過程中產生的。 showImg(https://segmentfault.com/img/bVbwAMU?w=700&h=394); 前端20個靈魂拷問，徹底搞明白你就是中級前端工程師...

coolpail 2019-08-26 10:56 評論0 收藏0