mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-12-19 17:45:42 +08:00
语法高亮，滚动条美化，设置页面调整
This commit is contained in:
fofolee
@@ -5,7 +5,7 @@
|
||||
<p>在 <a href="/zh-CN/docs/Web/HTML/Element/script">script</a> 标签中使用 <code>nomodule</code> 属性，可以确保向后兼容。</p>
|
||||
<p>在您希望按照一定的条件或者按需加载模块的时候，动态<code>import()</code> 是非常有用的。而静态型的 <code>import</code> 是初始化加载依赖项的最优选择，使用静态 <code>import</code> 更容易从代码静态分析工具和 <a href="/zh-CN/docs/Glossary/Tree_shaking">tree shaking</a> 中受益。</p>
|
||||
<p>语法</p>
|
||||
<pre class="syntaxbox">import <em>defaultExport</em> from "<em>module-name</em>";
|
||||
<pre><code class="language-javascript">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>";
|
||||
@@ -16,7 +16,7 @@ import <em>defaultExport</em>, { <em>export</em> [ , <em>[...]</em> ] } from "<e
|
||||
import <em>defaultExport</em>, * as <em>name</em> from "<em>module-name</em>";
|
||||
import "<em>module-name</em>";
|
||||
var promise = import("module-name");//这是一个处于第三阶段的提案。
|
||||
</pre>
|
||||
</code></pre>
|
||||
<dl>
|
||||
<dt><code>defaultExport</code></dt>
|
||||
<dd>导入模块的默认导出接口的引用名。</dd>
|
||||
@@ -33,41 +33,41 @@ var promise = import("module-name");//这是一个处于第三阶段的提案。
|
||||
<p><code>name</code>参数是“导入模块对象”的名称，它将用一种名称空间来引用导入模块的接口。export参数指定单个的命名导出，而<code>import * as name</code>语法导入所有导出接口，即导入模块整体。以下示例阐明该语法。</p>
|
||||
<h3 id="导入整个模块的内容">导入整个模块的内容</h3>
|
||||
<p>这将<code>myModule</code>插入当前作用域，其中包含来自位于<code>/modules/my-module.js</code>文件中导出的所有接口。</p>
|
||||
<pre class="brush: js">import * as myModule from '/modules/my-module.js';
|
||||
</pre>
|
||||
<pre><code class="language-javascript">import * as myModule from '/modules/my-module.js';
|
||||
</code></pre>
|
||||
<p>在这里，访问导出接口意味着使用模块名称（在本例为“myModule”）作为命名空间。例如，如果上面导入的模块包含一个接口<code>doAllTheAmazingThings()</code>，你可以这样调用：</p>
|
||||
<pre class="brush: js">myModule.doAllTheAmazingThings();</pre>
|
||||
<pre><code class="language-javascript">myModule.doAllTheAmazingThings();</code></pre>
|
||||
<h3 id="导入单个接口">导入单个接口</h3>
|
||||
<p>给定一个名为<code>myExport</code>的对象或值，它已经从模块<code>my-module</code>导出（因为整个模块被导出）或显式地导出（使用<a href="Reference/Statements/export" title="在创建JavaScript模块时，export 语句用于从模块中导出函数、对象或原始值，以便其他程序可以通过 import 语句使用它们。"><code>export</code></a>语句），将<code>myExport</code>插入当前作用域。</p>
|
||||
<pre class="brush: js">import {myExport} from '/modules/my-module.js';</pre>
|
||||
<pre><code class="language-javascript">import {myExport} from '/modules/my-module.js';</code></pre>
|
||||
<h3 id="导入多个接口">导入多个接口</h3>
|
||||
<p>这将<code>foo</code>和<code>bar</code>插入当前作用域。</p>
|
||||
<pre class="brush: js">import {foo, bar} from '/modules/my-module.js';</pre>
|
||||
<pre><code class="language-javascript">import {foo, bar} from '/modules/my-module.js';</code></pre>
|
||||
<h3 id="导入带有别名的接口">导入带有别名的接口</h3>
|
||||
<p>你可以在导入时重命名接口。例如，将<code>shortName</code>插入当前作用域。</p>
|
||||
<pre class="brush: js">import {reallyReallyLongModuleExportName as shortName}
|
||||
from '/modules/my-module.js';</pre>
|
||||
<pre><code class="language-javascript">import {reallyReallyLongModuleExportName as shortName}
|
||||
from '/modules/my-module.js';</code></pre>
|
||||
<h3 id="导入时重命名多个接口">导入时重命名多个接口</h3>
|
||||
<p>使用别名导入模块的多个接口。</p>
|
||||
<pre class="brush: js">import {
|
||||
<pre><code class="language-javascript">import {
|
||||
reallyReallyLongModuleMemberName as shortName,
|
||||
anotherLongModuleName as short
|
||||
} from '/modules/my-module.js';
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="仅为副作用而导入一个模块">仅为副作用而导入一个模块</h3>
|
||||
<p>整个模块仅为副作用（中性词，无贬义含义）而导入，而不导入模块中的任何内容（接口）。 这将运行模块中的全局代码, 但实际上不导入任何值。</p>
|
||||
<pre><code>import '/modules/my-module.js';</code></pre>
|
||||
<pre><code>import '/modules/my-module.js';</code></code></pre>
|
||||
<h3 id="导入默认值">导入默认值</h3>
|
||||
<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">引入模块可能有一个</span></font>default</code><a href="Reference/Statements/export" title="在创建JavaScript模块时，export 语句用于从模块中导出函数、对象或原始值，以便其他程序可以通过 import 语句使用它们。"><code>export</code></a>（无论它是对象，函数，类等）可用。然后可以使用<code>import</code>语句来导入这样的默认接口。</p>
|
||||
<p>最简单的用法是直接导入默认值：</p>
|
||||
<pre class="brush: js">import myDefault from '/modules/my-module.js';</pre>
|
||||
<pre><code class="language-javascript">import myDefault from '/modules/my-module.js';</code></pre>
|
||||
<p>也可以同时将<code>default</code>语法与上述用法（命名空间导入或命名导入）一起使用。在这种情况下，<code>default</code>导入必须首先声明。 例如：</p>
|
||||
<pre class="brush: js">import myDefault, * as myModule from '/modules/my-module.js';
|
||||
// myModule used as a namespace</pre>
|
||||
<pre><code class="language-javascript">import myDefault, * as myModule from '/modules/my-module.js';
|
||||
// myModule used as a namespace</code></pre>
|
||||
<p>或者</p>
|
||||
<pre class="brush: js">import myDefault, {foo, bar} from '/modules/my-module.js';
|
||||
<pre><code class="language-javascript">import myDefault, {foo, bar} from '/modules/my-module.js';
|
||||
// specific, named imports
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="动态import">动态import</h3>
|
||||
<p>关键字import可以像调用函数一样来动态的导入模块。以这种方式调用，将返回一个 <code>promise</code>。</p>
|
||||
<p> </p>
|
||||
@@ -75,16 +75,16 @@ var promise = import("module-name");//这是一个处于第三阶段的提案。
|
||||
.then((module) => {
|
||||
// Do something with the module.
|
||||
});</code>
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>这种使用方式也支持 <code>await</code> 关键字。</p>
|
||||
<pre><code>let module = await import('/modules/my-module.js');</code></pre>
|
||||
<pre><code>let module = await import('/modules/my-module.js');</code></code></pre>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<h2 id="示例">示例</h2>
|
||||
<h3 id="标准导入">标准导入</h3>
|
||||
<p>下面的代码将会演示如何从辅助模块导入以协助处理AJAX JSON请求。</p>
|
||||
<h4 id="模块：file.js">模块：file.js</h4>
|
||||
<pre class="brush: js">function getJSON(url, callback) {
|
||||
<pre><code class="language-javascript">function getJSON(url, callback) {
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.onload = function () {
|
||||
callback(this.responseText)
|
||||
@@ -95,15 +95,15 @@ var promise = import("module-name");//这是一个处于第三阶段的提案。
|
||||
|
||||
export function getUsefulContents(url, callback) {
|
||||
getJSON(url, data => callback(JSON.parse(data)));
|
||||
}</pre>
|
||||
}</code></pre>
|
||||
<h4 id="主程序：main.js">主程序：main.js</h4>
|
||||
<pre class="brush: js">import { getUsefulContents } from '/modules/file.js';
|
||||
<pre><code class="language-javascript">import { getUsefulContents } from '/modules/file.js';
|
||||
|
||||
getUsefulContents('http://www.example.com',
|
||||
data => { doSomethingUseful(data); });</pre>
|
||||
data => { doSomethingUseful(data); });</code></pre>
|
||||
<h3 id="动态导入">动态导入</h3>
|
||||
<p>此示例展示了如何基于用户操作去加载功能模块到页面上，在例子中通过点击按钮，然后会调用模块内的函数。当然这不是能实现这个功能的唯一方式，<code>import()</code>函数也可以支持<code>await</code>。</p>
|
||||
<pre class="brush: js">const main = document.querySelector("main");
|
||||
<pre><code class="language-javascript">const main = document.querySelector("main");
|
||||
for (const link of document.querySelectorAll("nav > a")) {
|
||||
link.addEventListener("click", e => {
|
||||
e.preventDefault();
|
||||
@@ -116,7 +116,7 @@ for (const link of document.querySelectorAll("nav > a")) {
|
||||
main.textContent = err.message;
|
||||
});
|
||||
});
|
||||
}</pre>
|
||||
}</code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
Reference in New Issue
Block a user