模块化

模块化是一种代码组织方式，是一种思想
代码根据复杂代码功能的不同划分为不同的模块 单独维护

第一阶段：
早期的模块化就是根据不同的功能将状态数据单独存放到不同文件当中
当我们去使用模块的话就是用过script标签引入到模块当中
这就导致了所有引入的模块都在全局范围内工作，污染全局作用域

第二阶段：
每个模块只暴露一个全局的对象，该模块的成员都挂载在该对象下面
实际操作是在每个模块将模块成员包裹成一个全局对象的方式
image.png
可减小命名冲突的可能但是依旧没有私有空间

第三阶段：
使用IIFE（立即执行函数）
具体操作是将模块中的每一个成员都放在一个函数提供的私有作用域当中，对于需要暴露给外部的成员 ，我们可以通过挂载到全局对象的方式来实现
image.png
这使得存在私有作用域

模块化标准 + 模块加载器

NodeJs是依据 CommonJS规范
CommonJS是以同步模式加载模块
简单来说就是启动时加载模块，运行时使用模块
这导致该规范如果是浏览器中运行会产生同步阻塞
image.png
AMD（基于浏览器的异步定义规范）同期出现的Require.js这个库实现了这个规范，这也是一个模块加载器
image.png
该规范约定，每一个模块中的函数需要通过define进行定义
AMD 使用起来相对复杂
模块 JS 文件请求频繁

现今阶段浏览器采用ES Modules规范

  1. // ES6模块
  2. import { stat, exists, readFile } from 'fs';
  4. 整体加载

Node采用 CommonJS 规范

  1. // commonjs模块
  2. let { stat, exists, readfile } = require('fs');

基本特性

要了解学习 ES Modules 可以从以下两个方面入手:

  • 作为一个规范或者说标准，ES Modules 约定了哪些特性和语法
  • 如何通过一些工具去解决一些运行环境当中兼容性所带来的的问题

特性如下:

  1. 通过给 script 添加 type = module 的属性，就可以以 ES Module 的标准执行其中的 JS 代码了
  2. 与普通的没有设置标准的script标签不同的是
  3. ESM 会自动采用严格模式，忽略 ‘use strict’
  4. 严格模式的代表就是不在再全局范围内使用this ，非严格模式下this指向window
  5. 每一个ESM都是运行在单独的私有作用域当中
  6. ESM 是通过 CORS 的方式请求外部 JS 模块的，如果 JS 模块不在同源地址下面的话，那么需要请求的地址响应头当中提供有效的 CORS 标头，否则会出现跨域错误，浏览器也会终止该请求(CORS不支持文件的形式访问，所以必须使用http sever的形式让页面工作起来)
  7. ESM 的 script 标签会延迟执行脚本

核心功能

ESM导出与导入

运行环境兼容性问题

Polyfill兼容方案

使用的是ES Module Loader

ES Modules in Node.js 与 CommmomJS 交互

  • ES modules 中可以导入 CommonJS 模块
  • CommonJS 中不能导入 ES Modules 模块
  • CommonJS 始终只会导出一个默认成员
  • 注意 import 不是结构导出对象