浏览器端已支持 ES6 规范（包括 export import）
生活随笔
收集整理的這篇文章主要介紹了
浏览器端已支持 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 };運行結果
總結
以上是生活随笔為你收集整理的浏览器端已支持 ES6 规范（包括 export import）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《Effective Modern C+
- 下一篇： DevOps平台中的自动化部署框架设计