1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
|
---
title: export
slug: Web/JavaScript/Reference/Statements/export
translation_of: Web/JavaScript/Reference/Statements/export
---
<div>{{jsSidebar("Statements")}}</div>
<p>用 <strong>export</strong> 可以指派函式、物件或變數，透過 {{jsxref("Statements/import", "import")}} 宣告給外部檔案引用。</p>
<p>導出的模塊都會處於{{jsxref("Strict_mode","嚴謹模式")}}，無論是否有所宣告。導出宣告無法使用嵌入式腳本（embedded script）。</p>
<h2 id="語法">語法</h2>
<pre class="syntaxbox">export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> };
export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> };
// 用 var, const 也通
export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>;
export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>;
// 底下的 function 用 class, function* 也可以
export default <em>expression</em>;
export default function (…) { … }
export default function name1(…) { … }
export { <var>name1</var> as default, … };
export * from …;
export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> } from …;
export { <var>import1</var> as <var>name1</var>, <var>import2</var> as <var>name2</var>, …, <var>nameN</var> } from …;</pre>
<dl>
<dt><code>nameN</code></dt>
<dd>外部檔案使用 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> 時，用於辨認的名稱。</dd>
</dl>
<h2 id="使用說明">使用說明</h2>
<p>有兩種使用 export 的方式，<strong>named</strong> 與 <strong>default</strong>。每個模組中可以有多個 named exports, 但只能有一個 default export。每種 export 都對應到一個先前說的語法。</p>
<ul>
<li>Named exports:
<pre class="brush: js">// 前面已經宣告的函式可以這樣輸出
export { myFunction };
// 輸出常數
export const foo = Math.sqrt(2); </pre>
</li>
<li>預設 export （一個 js 檔案只能有一個）:
<pre class="brush: js">export default function() {}
// 或是 '<em>export default class {}</em>'
// 結尾不用分號</pre>
</li>
</ul>
<p>Named exports 在輸出多個值的時候很有用，在 import 的時候, 會強制根據使用相同的物件名稱.</p>
<p>但如果是 default export 則可以用任意的名字輸出.</p>
<pre class="syntaxbox">export default k = 12; // 在test.js中這樣子寫
import m from './test' // 注意這邊因為 export default 的關係, 可以用任意名字 import 原先的k出來
console.log(m); // will log 12
</pre>
<p>以下語法並不會導出所有被引入的模塊：</p>
<pre>export * from …;</pre>
<p>你必須額外引入它的預設輸出，再導出之：</p>
<pre>import mod from "mod";
export default mod;</pre>
<h2 id="使用範例">使用範例</h2>
<h3 id="輸出命名過的變數">輸出命名過的變數</h3>
<p>模塊內可以這樣用：</p>
<pre class="brush: js">// module "my-module.js"
function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
var graph = {
options:{
color:'white',
thickness:'2px'
},
draw: function(){
console.log('From graph draw function');
}
}
export { cube, foo, graph };
</pre>
<p>在另一個腳本就會變成這樣：</p>
<pre class="brush: js">//You should use this script in html with the type module ,
//eg ''<script type="module" src="demo.js"></script>",
//open the page in a httpserver,otherwise there will be a CORS policy error.
//script demo.js
import { cube, foo, graph } from 'my-module';
graph.options = {
color:'blue',
thickness:'3px'
};
graph.draw();
console.log(cube(3)); // 27
console.log(foo); // 4.555806215962888</pre>
<h3 id="使用預設輸出">使用預設輸出</h3>
<p>如果我們要輸出單獨的函式、物件、class 或當做 fallback 值來輸出的話，就可以用預設輸出：</p>
<pre class="brush: js">// module "my-module.js"
export default function cube(x) {
return x * x * x;
}
</pre>
<p>外部檔案的 import 用法：</p>
<pre class="brush: js">import cube from 'my-module';
console.log(cube(3)); // 27
</pre>
<p>Note 注意預設輸出不能使用 var, let , const。</p>
<h2 id="規範">規範</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">規範</th>
<th scope="col">狀態</th>
<th scope="col">註解</th>
</tr>
<tr>
<td>{{SpecName('ES2015', '#sec-exports', 'Exports')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>初始定義。</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
<p>{{Compat("javascript.statements.export")}}</p>
<h2 id="參見">參見</h2>
<ul>
<li>{{jsxref("Statements/import", "import")}}</li>
<li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li>
<li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
</ul>
|
