【模块化开发】CommonJS规范 and ESModule规范

💭💭

✨：【模块化开发】CommonJS规范 and ESModule规范
 
💟：东非不开森的主页
 
💜: 少点内耗啦💜💜
 
🌸: 如有错误或不足之处，希望可以指正，非常感谢😉
 

一、模块化开发

⭐⭐⭐
规范核心：模块本身可以导出暴露的属性，模块又可以导入自己需要的属性；

对模块化开发理解

• 模块化开发最终的目的是将程序划分成一个个小的结构(模块)

• 这个结构中编写属于自己的逻辑代码，有自己的作用域，定义变量名词时不会影响到其他的结构

• 可导出变量,函数,对象等给其他模块用

• 也可导入其他模块中的变量,函数,对象

• 按照这种结构划分开发程序的过程，就是模块化开发的过程

• 早期是没有模块化, 带来一些问题

  • 命名冲突 -> 立即执行函数 -> 自定义模块 -> 没有规范
  • 社区中模块化规范: CommonJS/AMD/CMD
  • ES6中推出模块化: ES Module

二、CommonJS规范

2.1.初识CommonJS规范

⭐⭐⭐
CommonJS是一个规范
其核心变量：

• exports
• module.exports
• require
  而模块化的核心则是导出和导入
  即
• export和module.exports是对模块中的内容进行导出
• require函数式导入其它模块的内容（这些模块指自定义模块、系统模块、第三方库模块）

2.2.exports导出

exports的本质

• exports和require指向是同一个对象: 引入赋值

2.3.module.exports导出

module.exports赋值新的对象

• exports就没有什么意义

• module.exports 和exports指向不同的地址
  写法：

module.exports = {
  name,
  age
}

2.4.require函数

require函数可以引入一个模块导出的对象

本质：require本质查找的module.exports的对象
导入格式：require(X)

查找规则：

1. x是一个Node核心模块，如path、http

• 直接返回核心模块，停止查找

2. x是以./ or …/ or / 开头

• 如果有后缀名（如.js），则先按照后缀名的格式查找对应的文件
• 如果没有后缀名，则按照查找顺序
  1. 直接查找文件X
  2. 查找X.js文件
  3. 查找X.json文件
  4. 查找X.node文件
• 如果没有找到对应的文件，那么就会把X当作为一个目录
  • 查找目录下index文件
    1. X/index.js
    2. X/index.json
    3. X/index.node

若没找到，则报错：not found

1. 当一个模块被导入,模块中的代码会被执行一次

var foo = require("./foo.js")
console.log(foo)

2. 当一个模块被多次导入,模块中的代码只会执行一次

var foo1 = require("./foo.js")
var foo2 = require("./foo.js")
var foo3 = require("./foo.js")

三、ESModule规范

3.1.初识ESModule规范

⭐⭐⭐
ESModule规范核心

• export
• import
• 采用编译期的静态分析，并且加入动态引用的方法

导入导出

• export将模块内的内容导出
• import将其它模块导入

3.2.export

导出的方式

• 在语句声明的前面直接加上export关键字

• 将所有需要导出的标识符，放到export后面的 {}中

  • 这里的 {}里面不是ES6的对象字面量的增强写法，{}也不是表示一个对象的；
  • export {name: name}，是错误的写法；

• 导出时给标识符起一个别名

  • 通过as取别名

export关键字导出一个模块的变量、函数、类

1. 前面加上export

export function bar() {
   console.log("bar--")
}

2. 需要导出的标识符,放到export后面{}

function bar() {
   console.log("bar--")
}
export { bar }

3.3.import

导入的方式

• import {标识符列表} from ‘模块’
  • 注意：这里的{}也不是一个对象，里面只是存放导入的标识符列表内容
• 导入时给标识符起别名
  • 通过as关键字起别名
• 通过 * 将模块功能放到一个模块功能对象（a module object）上

导入,必须在顶层,必须加后缀名js

1. import {标识符列表} from “模块”

import { name } from "./foo.js"

3.4.export和import结合

1. 先导入再导出
   方式1：

import { name } from "./foo.js"
export {name}

方式2：

export { name } from "./foo.js"

方式3：
导入所以，导出所有

export * from "./foo.js"

3.5.默认导入导出

定义标识符直接作为默认导出

export default function bar() {
  console.log("bar---")
}

一个模块只能有一个默认导出
在使用该模块的文件里，导入可以不要{},自己可以指定名字

import bar from "./foo.js"