脚本宝典收集整理的这篇文章主要介绍了

浏览器端已支持 ES6 规范(包括 export & import)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>当然,是几个比较优秀的浏览器,既然是优秀的浏览器,大家肯定知道是那几款啦,我就不列举了,我用的是 chrome。</p> <p>对 script 声明 type 为 module 后就可以享受 <a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a> 规范所带来的模块快感了。</p> <p>基础语法既然是全支持,<a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a>,<a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a>,扩展,解构</p> <p><a href="http://www.js-code.com/tag/import" title="import" target="_blank">import</a> 和 <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> 也可以快乐的使用了,不需要 Babel 成 ES5 哟</p> <p><strong>以下代码皆为浏览器端直接运行</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<!DOCTYPE html><br /> <html lang=&quot;en&quot;><br /> <head><br /> <meta charset=&quot;UTF-8&quot;><br /> <title>ES6</title><br /> </head></p> <div> <em>需浏览器支持 script 标签的 type = module 属性</em><br /> <em>当 script 设为 type = module 会失去跨域特性,必须同源</em> </div> <p><body><br /> <script type=&quot;module&quot;> // 模块导入 import getModuleName, { HttpTool, MathTool } from './modules/Tools.js';</p> <p> console.log(&quot;module name: &quot; + getModuleName());</p> <p> // 解构小实例 注意传入的是数组,模块解构获取参数 HttpTool.get([&quot;//segmentfault.com&quot;, (url) => { console.log(url); }]);</p> <p> // 扩展(反向)小实例 当然 js 本身就是不定参数的 玩玩而已 HttpTool.post(&quot;//segmentfault.com&quot;, &quot;hello&quot;, &quot;segmentfault&quot;);</p> <p> console.log(<a href="http://www.js-code.com/tag/Math" title="Math" target="_blank">Math</a>Tool.add(1, 2), <a href="http://www.js-code.com/tag/Math" title="Math" target="_blank">Math</a>Tool.sub(1, 2)); </script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/char" title="浏览关于“char”的文章" target="_blank" class="tag_link">char</a>set</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>ES6<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">em</span>&gt;</span>需浏览器支持 script 标签的 type = module 属性<span class="hljs-tag">&lt;/<span class="hljs-name">em</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">em</span>&gt;</span>当 script 设为 type = module 会失去跨域特性,必须同源<span class="hljs-tag">&lt;/<span class="hljs-name">em</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"> <span class="hljs-comment">// 模块导入</span> <span class="hljs-keyword">import</span> getModuleName, { HttpTool, <a href="http://www.js-code.com/tag/Math" title="浏览关于“Math”的文章" target="_blank" class="tag_link">Math</a>Tool } <span class="hljs-keyword">from</span> <span class="hljs-string">'./modules/Tools.js'</span>; <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"module <a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a>: "</span> + getModuleName()); <span class="hljs-comment">// 解构小实例 注意传入的是<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="浏览关于“数组”的文章" target="_blank" class="tag_link">数组</a>,模块解构获取参数</span> HttpTool.get([<span class="hljs-string">"//segmentfault.com"</span>, (url) =&gt; { <span class="hljs-built_in">console</span>.log(url); }]); <span class="hljs-comment">// 扩展(反向)小实例 当然 js 本身就是不定参数的 玩玩而已</span> HttpTool.post(<span class="hljs-string">"//segmentfault.com"</span>, <span class="hljs-string">"hello"</span>, <span class="hljs-string">"segmentfault"</span>); <span class="hljs-built_in">console</span>.log(MathTool.add(<span class="hljs-number">1</span>, <span class="hljs-number">2</span>), MathTool.sub(<span class="hljs-number">1</span>, <span class="hljs-number">2</span>)); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="/** * [Tools ES6 module] */ const moduleName = &quot;Helper Tools&quot;; 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,<br /> sub: (a, b) => a - b<br /> }</p> <p>function getModuleName() {<br /> return moduleName;<br /> }</p> <p>export default getModuleName;</p> <p>export { HttpTool, MathTool };" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code><span class="hljs-comment">/** * [Tools ES6 module] */</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> moduleName = <span class="hljs-string">"Helper Tools"</span>; <span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> HttpTool = { <span class="hljs-keyword">get</span>: <span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span> <span class="hljs-params">(handler)</span> </span>{ <span class="hljs-comment">// 解构操作</span> <span class="hljs-keyword">var</span> [url, c<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a>back] = handler; callback(url); }, post: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(url, <span class="hljs-rest_arg">...data</span>)</span> </span>{ console.log(url); <span class="hljs-comment">// ES6 扩展操作符的另类用法</span> <span class="hljs-comment">// 其实其他语言中 <a href="http://www.js-code.com/tag/php" title="浏览关于“php”的文章" target="_blank" class="tag_link">php</a>/<a href="http://www.js-code.com/tag/python" title="浏览关于“python”的文章" target="_blank" class="tag_link">python</a> 有可变参数的概念</span> <span class="hljs-comment">// php function foo(name, age, ...props)</span> <span class="hljs-comment">// python def foo(name, age, ...props)</span> <span class="hljs-comment">// ES6 的扩展操作符其实也可以这样使用</span> <span class="hljs-comment">// HttpTool.post(url, foo, bar, hello, world)</span> <span class="hljs-comment">// 除给定参数位外的参数都会被压入 data 数组中</span> <span class="hljs-comment">// a, b, c, d 会被 ...data 接受并管理</span> <span class="hljs-comment">// data 则为 [a, b, c, d]</span> <span class="hljs-comment">// ...data 就能得到字面量的 a, b, c, d,但不能显示获取</span> <span class="hljs-comment">// 需要使用解构语法</span> <span class="hljs-comment">// var [a, b, c, d] = data 来操作</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a></span> (<span class="hljs-keyword">var</span> i <span class="hljs-keyword"><a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a></span> data) { console.log(data[i]); } } } <span class="hljs-keyword">var</span> MathTool = { add: (a, b) =&gt; a + b, sub: (a, b) =&gt; a - b } <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getModuleName</span><span class="hljs-params">()</span> </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> moduleName; } <a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/default" title="浏览关于“default”的文章" target="_blank" class="tag_link">default</a></span> getModuleName; export { HttpTool, MathTool };</code></pre> <p>运行结果</p> <p><span class="img-wrap"><img data-src="/img/bVWeVV?w=640&amp;h=688" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

浏览器端已支持 ES6 规范(包括 export & import)

全部内容,希望文章能够帮你解决

浏览器端已支持 ES6 规范(包括 export & import)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过