Module模块

模块化

封装细节，提供使用接口，彼此之间互不影响，每个模块都是实现某一特定的功能。
模块化开发的基础就是函数。
模块化开发使用代码耦合度降低，模块化的意义在于最大化的设计重用，以最少的模块、零部件，更快速的满足更多的个性化需求

内聚度

指模块内部实现，它是信息隐藏和局部化概念的自然扩展，它标志着一个模块内部各成分彼此结合的紧密程度。任务分组后更易阅读。设计时应该尽可能的提高模块内聚度，从而获得较高的模块独立性。

耦合度

指模块之间的关联度的度量。耦合度取决于模块之间接口的复杂性，进入或调用模块的位置等。与内聚度相反，在设计时应尽量追求松散耦合的系统

缺点

留下的局部变量本质仍是全局变量；
JS文件引入顺序人为管理

模块系统

作用：
1）解决模块化不足
2）消除全局变量
3）管理加载顺序

用法

服务器环境搭建
-在vscode中打开文件夹
-文件
-用live serve打开

1.各部分写入不同js文件，各文件/模块加入需要的导入导出语句
2.用script标签加载模块, 加上type=’module’
一个文件就是一个模块

导出和导入

导出的东西可以被导入，并访问到
模块没有导出，也可被导入
模块被导入，其代码会且只会执行一遍（即使多次导入）

export default

一个模块只能有一个export default
导入时可自定义名字
module.js文件导出

const age = 18;
export default age;

主文件导入

<script type="module">
  import a from "/module.js";
  console.log(a);
</script>

export

一个模块可有多个export
导入时不可自定义命名
module.js文件导出
写法一：

const age = 18;
export { age };

写法二：

export const age = 18;

主文件导入

<script type="module">
  import { age } from "/module.js";
  console.log(age);
</script>

多个同时导入/导出

module.js文件导出（函数、对象、原始值都不能为匿名的）

const age = 18;
function fn() {}
class className {}
export { age, fn, className };

主文件导入

<script type="module">
   import { age, fn, className } from "/module.js";
   console.log(age, fn, className);
 </script>

起别名-导入导出时均可

module.js文件导出

function fn() {}
class className {}
export { fn as func, className };

主文件导入

<script type="module">
  import { func, className as Person } from "/module.js";
  console.log(func, Person);
</script>

整体导入

导入所有导出，包括由export default导出的
主文件导入

模块顶层 this指向-undefined

顶层：即不在任何代码块中，类似在全局作用域中
module.js文件导出

console.log(this);// undefined

方法一：主文件导入

<script type="module">
  import "/module.js";
</script>

方法二：
module.js文件导出-加入if语句若未按module方式导出抛出错误

<script src="/module.js" type="module"></script>
console.log(this);//window
if (this != undefined) {
 throw error;
}

import()

可按条件导入
主文件导入-一般导入

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

import命令会提升至模块头部，率先执行

<script type="module">
   console.log("第一");//第一（输出2）
   console.log("第二");//第二（输出3）
   import "/module.js";// undefined（输出1）
</script>

意味着，import&export不能在代码块中执行
无效代码：

<script type="module">
  if (PC) {
    import "pc.js";
  } else if (Mobile) {
    import "/mobile.js";
  }
</script>

有效代码

<script type="module">
   if (PC) {
     import("pc.js").then().catch();
   } else if (Mobile) {
     import("mobile.js").then().catch();
   }
 </script>

复合写法

本模块作为age中转站但不能访问age

export { age } from "/module.js";
console.log(age); //报错

不完全等价于

import { age } from "/module.js";
export { age } from "/module.js";
console.log(age); //18

应用