JS-模块化

只爱碎花裙
126 阅读1分钟

什么是模块化

  • 模块化开发的最终目的是将程序划分成一个个小的结构
  • 这个结构中编写属于自己的逻辑代码，有自己的作用域，不会影响到其他的结构
  • 这个结构可以将自己希望暴露的变量，函数，对象等导出给其结构使用
  • 也可以通过某种方式，导入另外结构的变量，函数，对象等
  • 这个结构被称为模块；该过程就是模块化开发

image.png

模块化的历史

image.png

没有模块化带来的问题

image.png

CommonJS规范和Node关系

image.png

export导出

image.png

module.export

image.png

require细节

image.png

image.png

image.png

模块的加载过程

image.png

CommonJS规范缺点

image.png

AMD规范

image.png

require.js使用

image.png

CMD规范

image.png

seaJS使用

ES Module

image.png

案例代码结构组件

image.png

export 关键字

image.png

import 关键字

image.png

export和import结合使用

image.png

default用法

image.png

import函数

  • ES11新增特性：import.meta
  • meta属性本身也是一个对象： {url: '当前模块所在路径}

image.png

import data

ESModule的解析流程

image.png

阶段一：构建阶段

image.png

阶段二和三：实例化阶段-求值阶段

image.png

ESModule和CommonJS相互引用

  • webpack环境下可以

image.png

avatar
文章
阅读
粉丝