1.什么是模块化

• 1.不使用模块化，多人协作开发，会造成变量污染
• 2.遵守固定的规则，把大文件拆分成独立并相互依赖的小模块

好处：

• 1.提高了代码的复用性
• 2.提高了代码可维护性
• 3.实现按需加载
• 防止变量环境污染

模块化的规范

就是对代码进行模块化的拆分和组合，需要遵守的规则：

• 1.使用什么样的语法格式引入模块 require
• 2.使用什么样的语法格式来向外暴露成员

模块的加载

遵循commonjs规范 require导入 module exports导出

commonJs规范

• 1.每个模块内部，module变量代表当前模块
• 2.modult变量是一个对象，它的exports属性，向外共享成员
• 3.require加载模块

ES6模块

完全可以取代CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案

ES6的模块自动采用严格模式

尤其注意** ES6模块中，顶层的this指向undefined，**即不应该在顶层代码使用this

export命令

auth.js
export const obj = {name:'zs',age:12}
export function fn(){
   console.log(123)
}

App.js
按需导入
import {obj,fn} from './utils/auth'
console.log(obj)

定义别名
import {obj as o,fn} from './utils/auth'
console.log(o)
fn()

加载所有
import * as res from './utils/auth'
console.log(res.obj)
res.fn()

export default 默认导出

一个模块只能有一个默认导出 否则会报错

js现在有两种模块

• 1.ES6模块，简称ESM
• 2.CommonJS模块，简称CJS CommonJS是node.js专用的，于ES6模块互不兼容

语法差异：

• CommonJS模块使用require()导入，使用module.exports导出
• ES6模块使用import导入，使用export导出
• import引入模块的时候默认导出的模块名可以随意写，按需导出是通过export导出，引入的模块名需要和导出的时候保持一致，并且加大括号

module.exports导出和exports导出的区别：

如果他两都指向同一个对象，那么他们就会合并，如果他两分别指向不同的对象，那么就会遵循module.exports