[JavaScript知识库]JS import and export

1. 模块化出现前
   污染全局命名空间
   依赖管理， 必须从上到下一次加载

2. 后续方案
   OBJECTS
   立即调用的函数表达式

3. export 例子

   export function sum(x, y) {
      return x + y;
   }
   
   export function difference(x, y) {
     return x - y;
   }
   
   import { sum, difference } from "./functions.js";
   

4. HTML中使用

   <script type="module" src="functions.js"></script>
   <script type="module" src="script.js"></script>
   

5. 模块化有点

   模块不会向全局（window）作用域添加任何内容。
   模块始终处于严格模式。
   在同一文件中引用同一模块多次将无效，因为模块只会被执行一次。
   模块需要运行在服务器环境。

6. 多种引入方式

   export function sum() {}
   export function difference() {}
   

   方式一：

   import { sum, difference } from "./functions.js";
   

   方式二：

   import { sum as add, difference as subtract } from "./functions.js";
   add(1, 2); // 3
   

   方式三：

   import * as mathFunctions from "./functions.js";
   mathFunctions.sum(1, 2); // 3
   mathFunctions.difference(10, 3); // 7
   

7. 默认导出
   模块也可以使用关键字 default 包含默认导出。默认导出不是使用大括号导入，而是直接导入到命名标识符中

   export default function sum(x, y) {
    return x + y;
    }
   
    import sum from "./functions.js";
   
    sum(1, 2); // 3
   

   按命名导出和默认导出可以同时使用

   export const length = 10;
   export const width = 5;
   
   export default function perimeter(x, y) {
     return 2 * (x + y);
   }
   

   我们可以使用以下代码导入这些变量和默认函数：

   import calculatePerimeter, { length, width } from "./functions.js";
   
   calculatePerimeter(length, width); // 30