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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
|
---
title: export
slug: Web/JavaScript/Reference/Statements/export
translation_of: Web/JavaScript/Reference/Statements/export
---
<div>{{jsSidebar("Statements")}}</div>
<p>Lệnh <strong><code>export</code></strong> được sử dụng khi tạo các module JavaScript để export các hàm, đối tượng hoặc giá trị nguyên thủy trong module để chúng có thể được sử dụng bởi các chương trình khác bằng lệnh {{jsxref("Statements/import", "import")}}.</p>
<div class="note">
<p>Tính năng này mới chỉ được triển khai trên Safari vào thời điểm hiện tại. Nó cũng được triển khai ở nhiều trình dịch (transpilers), ví dụ như <a href="https://github.com/google/traceur-compiler">Traceur Compiler</a>, <a href="http://babeljs.io/">Babel</a> hay <a href="https://github.com/rollup/rollup">Rollup</a>.</p>
</div>
<h2 id="Cú_pháp">Cú pháp</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> };
export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // còn có thể là var, function
export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // còn có thể là var, const
export default <em>expression</em>;
export default function (…) { … } // còn có thể là class, function*
export default function name1(…) { … } // còn có thể là class, function*
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>Định danh được export (để có thể được import thông qua lệnh {{jsxref("Statements/import", "import")}} ở trong script khác).</dd>
</dl>
<h2 id="Mô_tả">Mô tả</h2>
<p>Có nhiều kiểu export khác nhau. Mỗi kiểu tương ứng với một trong các cú pháp ở phía trên:</p>
<ul>
<li>Export tên:
<pre class="brush: js">// exports một hàm được định nghĩa phía trước
export { myFunction };
// exports một hằng số
export const foo = Math.sqrt(2);</pre>
</li>
<li>Export giá trị mặc định (hàm):
<pre class="brush: js">export default function() {} </pre>
</li>
<li>Export giá trị mặc định (lớp):
<pre class="brush: js">export default class {} </pre>
</li>
</ul>
<p>Export tên hữu ích khi dùng để export một vài giá trị. Khi import, có thể dùng cùng tên đó để truy xuất đến giá trị tương ứng.</p>
<p>Về export giá trị mặc định, chỉ có duy nhất một giá trị mặc định được export trên một module. Một giá trị được export mặc định có thể là một hàm, một lớp, một đối tượng hay bất cứ thứ gì khác. Giá trị này được coi là giá trị được export "chính" do nó sẽ là giá trị đơn giản nhất được import.</p>
<p>Export các giá trị mặc định: Cú pháp sau đây không export một giá trị được export mặc định từ module được import:</p>
<pre>export * from …;</pre>
<p>Nếu bạn muốn export giá trị mặc định, hãy dùng cú pháp sau:</p>
<pre>import mod from "mod";
export default mod;</pre>
<h2 id="Ví_dụ">Ví dụ</h2>
<h3 id="Sử_dụng_export_tên">Sử dụng export tên</h3>
<p>Trong module, chúng ta có thể dùng code sau:</p>
<pre class="brush: js">// module "my-module.js"
function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };
</pre>
<p>Với cách này, trong script khác (cf. <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code>), chúng ta có:</p>
<pre class="brush: js">import { cube, foo } from 'my-module';
console.log(cube(3)); // 27
console.log(foo); // 4.555806215962888</pre>
<h3 id="Sử_dụng_export_giá_trị_mặc_định">Sử dụng export giá trị mặc định</h3>
<p>Nếu chúng ta muốn export một giá trị duy nhất hay có một giá trị trả về mặc định từ module của mình, chúng ta có thể sử dụng export giá trị mặc định:</p>
<pre class="brush: js">// module "my-module.js"
export default function cube(x) {
return x * x * x;
}
</pre>
<p>Sau đó, trong script khác, có thể import thẳng giá trị được export mặc định:</p>
<pre class="brush: js">import cube from 'my-module';
console.log(cube(3)); // 27
</pre>
<p>Chú ý là không thể dùng <code>var</code>, <code>let</code> hay <code>const</code> với <code>export default</code>.</p>
<h2 id="Đặc_tả">Đặc tả</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Đặc tả</th>
<th scope="col">Trạng thái</th>
<th scope="col">Chú thích</th>
</tr>
<tr>
<td>{{SpecName('ES2015', '#sec-exports', 'Exports')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>Định nghĩa ban đầu.</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Tương_thích_với_trình_duyệt">Tương thích với trình duyệt</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Tính năng</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Hỗ trợ cơ bản</td>
<td>61 (60 w/ flag)</td>
<td>{{CompatNo}} (54 w/ flag)</td>
<td>{{CompatNo}} (15 w/flag)</td>
<td>{{CompatNo}}</td>
<td>10.1</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Tính năng</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Hỗ trợ cơ bản</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>10.3</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Xem_thêm">Xem thêm</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 đăng bởi Jason Orendorff</li>
<li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
</ul>
|
