es 模組的基礎知識，深度瞭解

標籤：https   位置   div   let   name   field   bar   func   height   

// 一模組的基礎知識 /** * export :用於模組輸出的出口 * import :檔案引入的入口 */ // 1,第一種方式使用export方式輸出 var a = ‘a‘; var b = ‘v‘; export { a, b }; // 2，使用export作為預設值輸出 export { a as streamV1, b as streamV2 }; // 3,export 可以處於任何位置，只要頂端就可以, 不能處於塊級範圍 /** * import 檔案模組載入 */ // 1,直接模組載入 import { a, b } from ‘./ass‘; // 2,直接模組輸出 import * as cricle from ‘./ass‘ cricle.a // a /** * export default 預設輸出的命令，import模組載入，不需要{}模組載入 * */ // 1、匿名函數直接使用, import可以直接 模組載入，直接輸出名字 export default function () { console.log(‘foo‘); } import customName from ‘./export-default‘; // 2,直接輸出函數 function add(x, y) { return x * y; }
export { add as default } // 直接相當 export default add;
import { default as foo } from ‘./add‘; import foo from ‘./modules‘ /** * export 與 import 的複合寫法 */ export { foo, bar } from ‘./my_module‘; // 可以簡單理解為 import { foo, bar } from ‘./my_module‘; export { foo, bar }; // 二、匯出列表 export { detectCats, Kittydar }; // no `export` keyword required here function detectCats(canvas, options) { ... } class Kittydar { ... } // 三、重新命名匯出和匯入 import { flip as flipOmelet } from "eggs.js"; import { flip as flipHouse } from "real-estate.js"
function v1() { ... } function v2() { ... }
export { v1 as streamV1, v2 as streamV2, v2 as streamLatestVersion }; // 四、預設的匯入、匯出
import colors from "colors/safe"; export default { field1: value1, field2: value2 };
// 模組對象,像命名空間
import * as cows from "cows";
// 彙總模組，它不會在當前範圍中綁定將要匯出的變數 export { Tea, Cinnamon } from "sri-lanka";
/** * 深入理解 ES6 模組機制 https://zhuanlan.zhihu.com/p/33843378?group_id=947910338939686912 */

es 模組的基礎知識，深度瞭解