本帖最后由 小刀葛小伦 于 2020-3-20 15:27 编辑
AMD CMD CommonJS ES6模块化
- AMD
- 异步加载,运行时才能确定模块关系
- CMD
- 异步加载,
- CommonJS
- 同步加载,运行时才能确定模块关系,应用于node,运行在服务端
- ES6模块化
- 静态编译,编译时就能确定模块的依赖关系
exports && module.exports (node是CommonJS模块化的实现)
- 导出模块方式:exports和module.exports
1. module.exports
- module.exports指向的是一个空的对象{}
- 每个模块都有一个module对象,module对象中有一个exports对象
- 把需要导出的成员放在module.exports接口对象上
2. exports
- 指向module.exports的引用
- 方便操作,每个模块又提供了一个exports 等价于 module.exports
3. 注意:
- require返回的是module.exports
- 使用exports导出时,一般不直接给exports={}(对象)来导出,这样会导致exports和module.exports指向的不是同一个对象(而require最终返回的module. exports),导致引入模块得到的一直都是{},当然也可以用module.exports = exports,让其重新指向同一个对象(没有必要这么做)
- 使用module.exports导出时,如果使用module.exports={}(对象)这种方式导出,会导致覆盖前面的exports的值
- 引入模块方式:require
1. 优先从缓存中加载
2. 核心模块(fs/http)
3. 路径形式的模块 (路径形式的模块自己写的模块)
4. 第三方模块 (npm包)
5. 注意:
- 当我们require 的标识符 不包含扩展名node 会按照 .js .json .node 的次序补足扩展名 ,依次尝试。
- 如果在require过程中,没有查找到对应文件,却得到一个目录,此时 node 会将当前目录当作一个包来处理。
- 此时,node 会查找目录下的package.json文件,通过JSON.parse() 解析包描述对象,从中拿到main属性指定的文件名进行定位
- 如果main属性指定错误,或者没有package.json文件,那么node会将index作为默认的文件名,去依次查找index.js , index.json , index.node
- 在目录分析中没有定位到任何模块,那么它会遍历自己的上一级目录进行查找,如果还没找到,抛出查找失败的异常。
export && export default (ES6模块化)
- ES6模块化导出模块方式:export 和 export default
1. export
- 规定模块对外接口
- 两种方式导出
- 直接导出export let age = 10 或者 export function add(){}
- 先定义再导出 let age =10 export {age,..} 必须使用大括号
- 可以有多个
2. export default
- export default是在export的基础上规定模块提供一个默认的对外接口
- 同一个模块中只能有一个
- 并且不具备export导出对象方式,直接就可以导出对象
- import时,如果是export导出,则需要加{} 例如:import {age} from './example'
- 如果是export default 则不需要加{} 例如import age from './example'
- ES6模块化引入模块方式:import
- 找项目根目录中有没有 node_modules的文件夹.
- 在node_modules中根据包名找对应的vue文件夹.
- 在vue文件夹中找一个叫package.json的包配置文件.
- 在package.json文件中 查找一个main属性,main属性指定了这个包在被加载的时候的入口 |
|