瀏覽器端已支持 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 };

運行結果

圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/540513.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/540513.shtml
英文地址，請注明出處：http://en.pswp.cn/news/540513.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！