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

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

运行结果

图片描述