diff options
Diffstat (limited to 'files/zh-cn/web/javascript/reference/statements/import')
| -rw-r--r-- | files/zh-cn/web/javascript/reference/statements/import/index.html | 34 |
1 files changed, 17 insertions, 17 deletions
diff --git a/files/zh-cn/web/javascript/reference/statements/import/index.html b/files/zh-cn/web/javascript/reference/statements/import/index.html index eac05517ff..8daa4187e2 100644 --- a/files/zh-cn/web/javascript/reference/statements/import/index.html +++ b/files/zh-cn/web/javascript/reference/statements/import/index.html @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Statements/import <p>语法</p> -<pre class="syntaxbox brush: js notranslate">import <em>defaultExport</em> from "<em>module-name</em>"; +<pre class="syntaxbox brush: js">import <em>defaultExport</em> from "<em>module-name</em>"; import * as <em>name</em> from "<em>module-name</em>"; import { <em>export </em>} from "<em>module-name</em>"; import { <em>export</em> as <em>alias </em>} from "<em>module-name</em>"; @@ -55,37 +55,37 @@ var promise = import("module-name");//这是一个处于第三阶段的提案。 <p>这将<code>myModule</code>插入当前作用域，其中包含来自位于<code>/modules/my-module.js</code>文件中导出的所有接口。</p> -<pre class="brush: js notranslate">import * as myModule from '/modules/my-module.js'; +<pre class="brush: js">import * as myModule from '/modules/my-module.js'; </pre> <p>在这里，访问导出接口意味着使用模块名称（在本例为“myModule”）作为命名空间。例如，如果上面导入的模块包含一个接口<code>doAllTheAmazingThings()</code>，你可以这样调用：</p> -<pre class="brush: js notranslate">myModule.doAllTheAmazingThings();</pre> +<pre class="brush: js">myModule.doAllTheAmazingThings();</pre> <h3 id="导入单个接口">导入单个接口</h3> <p>给定一个名为<code>myExport</code>的对象或值，它已经从模块<code>my-module</code>导出（因为整个模块被导出）或显式地导出（使用{{jsxref("Statements/export", "export")}}语句），将<code>myExport</code>插入当前作用域。</p> -<pre class="brush: js notranslate">import {myExport} from '/modules/my-module.js';</pre> +<pre class="brush: js">import {myExport} from '/modules/my-module.js';</pre> <h3 id="导入多个接口">导入多个接口</h3> <p>这将<code>foo</code>和<code>bar</code>插入当前作用域。</p> -<pre class="brush: js notranslate">import {foo, bar} from '/modules/my-module.js';</pre> +<pre class="brush: js">import {foo, bar} from '/modules/my-module.js';</pre> <h3 id="导入带有别名的接口">导入带有别名的接口</h3> <p>你可以在导入时重命名接口。例如，将<code>shortName</code>插入当前作用域。</p> -<pre class="brush: js notranslate">import {reallyReallyLongModuleExportName as shortName} +<pre class="brush: js">import {reallyReallyLongModuleExportName as shortName} from '/modules/my-module.js';</pre> <h3 id="导入时重命名多个接口">导入时重命名多个接口</h3> <p>使用别名导入模块的多个接口。</p> -<pre class="brush: js notranslate">import { +<pre class="brush: js">import { reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short } from '/modules/my-module.js'; @@ -95,7 +95,7 @@ var promise = import("module-name");//这是一个处于第三阶段的提案。 <p>整个模块仅为副作用（中性词，无贬义含义）而导入，而不导入模块中的任何内容（接口）。 这将运行模块中的全局代码, 但实际上不导入任何值。</p> -<pre class="brush: js notranslate">import '/modules/my-module.js';</pre> +<pre class="brush: js">import '/modules/my-module.js';</pre> <h3 id="导入默认值">导入默认值</h3> @@ -103,22 +103,22 @@ var promise = import("module-name");//这是一个处于第三阶段的提案。 <p>最简单的用法是直接导入默认值：</p> -<pre class="brush: js notranslate">import myDefault from '/modules/my-module.js';</pre> +<pre class="brush: js">import myDefault from '/modules/my-module.js';</pre> <p>也可以同时将<code>default</code>语法与上述用法（命名空间导入或命名导入）一起使用。在这种情况下，<code>default</code>导入必须首先声明。 例如：</p> -<pre class="brush: js notranslate">import myDefault, * as myModule from '/modules/my-module.js'; +<pre class="brush: js">import myDefault, * as myModule from '/modules/my-module.js'; // myModule used as a namespace</pre> <p>或者</p> -<pre class="brush: js notranslate">import myDefault, {foo, bar} from '/modules/my-module.js'; +<pre class="brush: js">import myDefault, {foo, bar} from '/modules/my-module.js'; // specific, named imports </pre> <p>当用{{anch("动态导入")}}的方式导入默认导出时，其工作方式有所不同。你需要从返回的对象中解构并重命名 "default" 键。</p> -<pre class="brush: js notranslate">(async () => { +<pre class="brush: js">(async () => { if (somethingIsTrue) { const { default: myDefault, foo, bar } = await import('/modules/my-module.js'); } @@ -140,7 +140,7 @@ var promise = import("module-name");//这是一个处于第三阶段的提案。 <p>关键字import可以像调用函数一样来动态的导入模块。以这种方式调用，将返回一个 <code>promise</code>。</p> -<pre class="brush: js notranslate">import('/modules/my-module.js') +<pre class="brush: js">import('/modules/my-module.js') .then((module) => { // Do something with the module. }); @@ -148,7 +148,7 @@ var promise = import("module-name");//这是一个处于第三阶段的提案。 <p>这种使用方式也支持 <code>await</code> 关键字。</p> -<pre class="brush: js notranslate">let module = await import('/modules/my-module.js');</pre> +<pre class="brush: js">let module = await import('/modules/my-module.js');</pre> <h2 id="示例">示例</h2> @@ -158,7 +158,7 @@ var promise = import("module-name");//这是一个处于第三阶段的提案。 <h4 id="模块：file.js">模块：file.js</h4> -<pre class="brush: js notranslate">function getJSON(url, callback) { +<pre class="brush: js">function getJSON(url, callback) { let xhr = new XMLHttpRequest(); xhr.onload = function () { callback(this.responseText) @@ -173,7 +173,7 @@ export function getUsefulContents(url, callback) { <h4 id="主程序：main.js">主程序：main.js</h4> -<pre class="brush: js notranslate">import { getUsefulContents } from '/modules/file.js'; +<pre class="brush: js">import { getUsefulContents } from '/modules/file.js'; getUsefulContents('http://www.example.com', data => { doSomethingUseful(data); });</pre> @@ -182,7 +182,7 @@ getUsefulContents('http://www.example.com', <p>此示例展示了如何基于用户操作去加载功能模块到页面上，在例子中通过点击按钮，然后会调用模块内的函数。当然这不是能实现这个功能的唯一方式，<code>import()</code>函数也可以支持<code>await</code>。</p> -<pre class="brush: js notranslate">const main = document.querySelector("main"); +<pre class="brush: js">const main = document.querySelector("main"); for (const link of document.querySelectorAll("nav > a")) { link.addEventListener("click", e => { e.preventDefault(); |