上海网站如何制作,北京免费发布企业信息网站,襄阳建设网站首页,网站建设实战教程当然#xff0c;是几个比较优秀的浏览器#xff0c;既然是优秀的浏览器#xff0c;大家肯定知道是那几款啦#xff0c;我就不列举了#xff0c;我用的是 chrome。 对 script 声明 type 为 module 后就可以享受 es6 规范所带来的模块快感了。 基础语法既然是全支持#xf… 当然是几个比较优秀的浏览器既然是优秀的浏览器大家肯定知道是那几款啦我就不列举了我用的是 chrome。 对 script 声明 type 为 module 后就可以享受 es6 规范所带来的模块快感了。 基础语法既然是全支持constlet扩展解构 import 和 export 也可以快乐的使用了不需要 Babel 成 ES5 哟 以下代码皆为浏览器端直接运行 !DOCTYPE html
html langen
headmeta charsetUTF-8titleES6/title
/head
divem需浏览器支持 script 标签的 type module 属性/emem当 script 设为 type module 会失去跨域特性必须同源/em
/div
bodyscript typemodule// 模块导入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 }; 运行结果
