模块化开发需要注意的一些细节

1: 模块化只是思想

2: 模块化的演变过程

文件名 => 命名空间的方式 => 立即执行函数私有化

3: 模块化规范的出现

1. CommonJs: module.exports 导出, require()引入
2. AMD: Require.js: define(module, fn), 相对比较复杂,频繁引入js
3. CMD
4. ES Modules

4: 模块化标准规范: ES Modules: Browser环境, CommonJS: node环境

5: ES Modules基本特性

1. 自动采用严格模式,忽略”use strict”.
2. 每个SEM模块都是单独的私有作用域.
3. ESM是通过CORS去请求外部js模块的.
4. ESM的script标签会延迟执行脚本,相当于script标签的deffer属性. ```html

show content

6: ES Module导出: export
1. export default foo, import xxx from "xxx"
1. export { name }, import name form "xxx"
1. export { name }, import { name as xxx } from "xxx"
1. export { name as fooname }, import { fooname } from "xxx"
7: 导入导出注意事项:
1. export { name } 并不是导出一个对象, {}是一个种固定写法
```javascript
const user = {
    name: "jrg"
}
export { user }; // 这样才是导出一个对象

1. export 导出的值只是这个值的引用. ```javascript // index.js let name = “jrg”; export { name }; setTimeout(function () { name = “tiny”; }, 1000);

// module.js import { name } from “./index.js”; console.log(name); // 先打印出: jrg setTimeout(function () { console.log(name); // 2s后打印出: tiny }, 2000);

3. import导入的成员是一个只读成员.
8: ES Module导入注意事项
1. 导入的文件必须是完整的文件路径.
1. 如果只是执行, 直接 import "xxx/xxx.js".
1. 导入所有的成员 import * as mod from "xxx/xxx.js".通过mod.来使用.
1. import * as mod from "xxx/xxx.js". 只能放在文件头,不能放在js代码中.如果需要动态导入, 可以import("xxx/xxx.js")返回值是一个promise.
1. 同时导入具名成员和默认成员
```javascript
// 第一种写法
import title, { name, age } from "./module.js";
// 第二种写法
import { name, age, default as title } from "./module.js"
// title就是默认成员,name, age就是具名成员

9: ES Module导出导入成员

// 一般用在index文件中,作为一个出口文件统一导出当前文件夹下的所有模块
// 当导入的是一个默认导出的时候,使用default转换一下,否则下一个导入只能使用默认导入的方式
export { default as name } from "./name.js";
export { age } from "./age.js";

10: ES Modules in Node.js支持情况

1. 将js后缀的文件名改为 index.mjs
2. Node 运行的时候加一个参数: node —experimental-modules index.mjs

11: ES Modules in Node.js 与CommonJs

1. CommonJS模块中不能导入ES Module.
2. ES Module 中可以导入CommonJS模块.
3. CommonJS始终只能导出一个默认成员.

4. 注意import不是解构导出对象

   // commonjs.js
   exports.foo = "comonjs exports value";
   // or
   module.exports = {
   foo: "comonjs exports value"
   }
   // 1: CommonJS模块中不能导入ES Module
   const mod = require("./es-modules.js")
   // 2: ES Module 中可以导入CommonJS模块
   // es-modules.js
   import mod from "./commonjs.js"; // 这样是可以的
   // 这样是不可以的,不能直接提取成员,因为import不是解构导出的对象
   import { foo } from "./commonjs.js";
   export const bar = "es module export value";

5. ES Module中没有CommonJS中的全局成员:

   // eg:
   require
   module
   exports
   __filename
   __dirname