2

当然,是几个比较优秀的浏览器,既然是优秀的浏览器,大家肯定知道是那几款啦,我就不列举了,我用的是 chrome。

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

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

import 和 export 也可以快乐的使用了,不需要 Babel 成 ES5 哟

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

<!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 };

运行结果

图片描述


big_cat
1.7k 声望130 粉丝

规范至上