当然,是几个比较优秀的浏览器,既然是优秀的浏览器,大家肯定知道是那几款啦,我就不列举了,我用的是 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 };
运行结果
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。