export · JS與WEB前端框架技術

[TOC] # 基本概念在創建JavaScript模塊時，`**export**`?語句用于從模塊中導出函數、對象或原始值，以便其他程序可以通過[`import`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import "靜態的import 語句用于導入由另一個模塊導出的綁定。無論是否聲明了?strict mode ，導入的模塊都運行在嚴格模式下。在瀏覽器中，import 語句只能在聲明了 type="module" 的 script 的標簽中使用。")語句使用它們。無論您是否聲明，導出的模塊都處于[`嚴格模式`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode "如果你想改變你的代碼，讓其工作在具有限制性JavaScript環境中，請參閱轉換成嚴格模式。")。 export語句不能用在嵌入式腳本中。 ## 語法 ~~~js // 導出單個特性 export let name1, name2, …, nameN; // also var, const export let name1 = …, name2 = …, …, nameN; // also var, const export function FunctionName(){...} export class ClassName {...} // 導處列表 export { name1, name2, …, nameN }; // 重命名導出 export { variable1 as name1, variable2 as name2, …, nameN }; // 默認導出 export default expression; export default function (…) { … } // also class, function* export default function name1(…) { … } // also class, function* export { name1 as default, … }; // Aggregating modules export * from …; export { name1, name2, …, nameN } from …; export { import1 as name1, import2 as name2, …, nameN } from …; export { default } from …; ~~~ `nameN` 要導出的標識符（以便被其他腳本通過[`import`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import "靜態的import 語句用于導入由另一個模塊導出的綁定。無論是否聲明了?strict mode ，導入的模塊都運行在嚴格模式下。在瀏覽器中，import 語句只能在聲明了 type="module" 的 script 的標簽中使用。")） ## 描述有兩種不同的導出方式，命名導出和默認導出。你能夠在每一個模塊中定義多個命名導出，但是只允許有一個默認導出。每種方式對應于上述的一種語法： * 命名導出： ~~~js // exports a function declared earlier export { myFunction }; // exports a constant export const foo = Math.sqrt(2); ~~~ * 默認導出（函數）： ~~~js export default function() {} ~~~ * 默認導出（類）： ~~~js export default class {} ~~~ 在導出多個值時，命名導出非常有用。在導入期間，必須使用相應對象的相同名稱。但是，可以使用任何名稱導入默認導出，例如： ~~~js let k; export default k = 12; // in file test.js import m from './test' // note that we have the freedom to use import m instead of import k, because k was default export console.log(m); // will log 12 ~~~ ?下面的語法不能從導入的模塊導出默認導出值： ~~~js export * from …; ~~~ 如果需要導出默認值，請使用下列代碼： ~~~js export {default} from 'mod'; ~~~ # 實踐 ## 使用命名導出在模塊中，我們可以使用以下代碼： ~~~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 }; ~~~ 這樣的話，在其它腳本中，我們可以這樣使用它： ~~~js // 在html中應使用帶有module類型的script。 // 示例: // <script type="module" src="./demo.js"></script> // // 在http服務器上訪問，否則將會有一個CORS保護報錯。 // // 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 ~~~ ## 使用默認導出如果我們要導出一個值或模塊中的返回值，就可以使用默認導出： ~~~js // module "my-module.js" export default function cube(x) { return x * x * x; } ~~~ 然后，在另一個腳本中，可以直接導入默認導出： ~~~js // module "my-module.js" import cube from 'my-module'; console.log(cube(3)); // 27????? ~~~ 注意，不能使用`var`、`let`或`const`用于導出默認值`export default`。 ## 模塊重定向如果我們想要在當前模塊中，導出指定導入模塊的默認導出（等于是創建了一個“重定向”）： ~~~js // module "redirect-module.js" export {default} from './other-module'; export * from './other-module'; ~~~