黑马程序员技术交流社区

标题: 【成都校区】--- 模块化 [打印本页]

作者: 小刀葛小伦 时间: 2020-3-20 15:25
标题: 【成都校区】--- 模块化
本帖最后由小刀葛小伦于 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属性指定了这个包在被加载的时候的入口

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2