模块化开发

99 阅读3分钟

commonJs 规范,nodejs 中提出的标准:

  1. 一个文件就是一个模块
  2. 每个模块都有单独的作用域
  3. 通过module.exports 导出成员
  4. 通过require函数载入模块
  • 在node中没问题:commonjs 以同步的模式加载模块, 启动时加载模块, 执行过程不会加载,只会使用
  • 在浏览器中有问题:每次页面加载,导致大量同步模式请求出现,早期使用amd , 出现对应的库是require.js, sea.js + CMD, 缺点是 使用起来相对复杂,模块js文件请求频繁

AMD:

image.png

image.png

CMD:

image.png

现代化统一规范:

image.png

5. eSModule 特性

目前市面上许多浏览器已经支持esmodule, 只需要通过给页面中的标签script 添加 type="module"这样的属性,就可以直接使用ESmodule 的标准执行js 代码, 几个特征

  1. ESM 自动使用严格模式, 忽略 use script
  2. 每个ES module 都运行在私有作用域中, 两个
  3. ESM中外部js 文件时通过CORS的方式去请求的,这就意味着我们去请求的地址,如果不是同源的,就需要在响应头中提供有效的CORS 标头, 并且cors不支持文件的形式访问,必须用http-server 的方式让文件工作起来
  4. ESM的script 标签会延迟执行脚本 ,相当于defer属性(网页渲染完成再执行脚本)

6、7. ESModule 的导出和导入

import 和 export (as 重命名) 注意事项:

  1. 不是export 对象,import也不是 解构
  2. 对外暴露的时引用,比如 导出a, a 原本等于 3, 一秒后变成5, import a 之后,第一次读取的是3, 一秒后读取的是5, 这点和commonjs 不同
  3. 对外暴露的引用是只读的,也就是说不能在外部文件修改这个值(尝试修改,会报错)

10 ES module 浏览器兼容性 polifill

image.png PS: module 模块,可以在unpkg.com 中获取, 在浏览器中unpkg.com/模块名字/ 这样就可以找到对应的文件所在地址,比如unpkg.com/jquery/ , 后面的斜杆不能省略,省略之后就会进入到jquery默认版本的文件,而不是去到文件夹下,找到所有版本的文件

11 ES module in nodejs

node 版本大于8.5 直接在nodejs 中使用esmodule ,需要做两件事

  1. 修改扩展名.js 为.mjs
  2. 启动node时,需要加上一个参数 --experimental-modules

image.png

12 es module in nodejs 与 commonjs

image.png

ESM 中没有 COMMonJS 中的那些模块全局成员了

image.png

13 es module in node.js 通过 package.json

在package.json 中添加{type: "module"}, 这样项目下的所有文件以es module 形式工作了,不需要把后缀名改为 .mjs 了, 但是,如果需要在项目下使用 commonjs 的文件,就需要将.js后缀改为 .cjs

14 es module in node.js 通过 babel

image.png

image.png 或者使用.babelrc

image.png

preset 其实是一组插件,如果只针对某些不支持的特性,使用单个插件

image.png