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

andycall 發(fā)布于2019-08-21 16:54 / 2397人閱讀

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

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

基礎(chǔ)語法既然是全支持，const，let，擴(kuò)展，解構(gòu)

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

以下代碼皆為瀏覽器端直接運(yùn)行




    
    ES6


    需瀏覽器支持 script 標(biāo)簽的 type = module 屬性
    當(dāng) script 設(shè)為 type = module 會失去跨域特性，必須同源

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

var HttpTool = {
    get: function (handler) {
        // 解構(gòu)操作
        var [url, callback] = handler;
        callback(url);
    },
    post: function (url, ...data) {
        console.log(url);
        // ES6 擴(kuò)展操作符的另類用法
        // 其實(shí)其他語言中 php/python 有可變參數(shù)的概念
        // php function foo(name, age, ...props)
        // python def foo(name, age, ...props)
        // ES6 的擴(kuò)展操作符其實(shí)也可以這樣使用
        // HttpTool.post(url, foo, bar, hello, world)
        // 除給定參數(shù)位外的參數(shù)都會被壓入 data 數(shù)組中
        // a, b, c, d 會被 ...data 接受并管理
        // data 則為 [a, b, c, d]
        // ...data 就能得到字面量的 a, b, c, d，但不能顯示獲取
        // 需要使用解構(gòu)語法
        // 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 };

運(yùn)行結(jié)果

云服務(wù)器 GPU云服務(wù)器 webrtc支持瀏覽器 webrtc瀏覽器支持 webrtc 瀏覽器支持 webrtc 支持瀏覽器

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/88892.html

相關(guān)文章

深入 CommonJs 與 ES6 Module

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

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

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

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

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

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

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

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

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

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