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

andycall 发布于2019-08-21 16:54 / 2396人阅读

当然，是几个比较优秀的浏览器，既然是优秀的浏览器，大家肯定知道是那几款啦，我就不列举了，我用的是 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 支持浏览器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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