diff options
Diffstat (limited to 'files/vi/web/javascript/reference/statements/export/index.html')
-rw-r--r-- | files/vi/web/javascript/reference/statements/export/index.html | 186 |
1 files changed, 0 insertions, 186 deletions
diff --git a/files/vi/web/javascript/reference/statements/export/index.html b/files/vi/web/javascript/reference/statements/export/index.html deleted file mode 100644 index 0187b3dbfa..0000000000 --- a/files/vi/web/javascript/reference/statements/export/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -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> |