模块化开发

🌸 您好，欢迎您的阅读，等君久矣，愿与君畅谈.
🔭 § 始于颜值 § 陷于才华 § 忠于人品 §
📫 希望我们可以进一步交流，共同学习，共同探索未知的技术世界 稀土掘金 OR GitHub.

前期出现全局污染和依赖管理混乱等问题，可以使用匿名函数自执行方式形成独立块级作用域解决，目前可以使用模块化方案解决此类问题

# Common.js

# 场景
  • Node 使用 Common.js 在服务器端实现模块化
  • Browserify 使用 Common.js 在浏览器实现
  • webpack 打包工具对 Common.js 的支持和转换
# 使用和原理
  • 规范：
    • 每一个 js 文件是单独的模块 (module)
    • 包含 exports、module.exports、require
    • exports 和 module.exports 对模块内容进行导出，require 函数导入其他模块 (自定义模块、系统模块、第三方库模块)
    • module：记录当前模块信息、require：引入模块的方法、exports：当前模块导出的属性
  • 在编译过程中，common.js 对 js 代码进行包装，形成一个包装函数，我们编写的代码作为包装函数的执行上下文，使用的 require、exports、module 本质上是通过形参的方式传递到包装函数中
1
2
3
4
5
6
7
8
9
(function(exports,require,module,__filename,__dirname){
    const sayName = require('./hello.js')
    module.exports = function say(){
        return {
            name:sayName(),
            author:'我不是外星人'
        }
    }
})
  • 在模块加载过程中，通过 runInThisContext(可以理解为eval) 执行 modulefunction
# require 文件加载流程
  • 接收的唯一参数作为一个标识符，Commonjs 下对不同的标识符处理流程不同，但都是找到对应的模块
  • 加载文件原则 (nodejs)
    • fs 、 http 、 path 等标识符，会被作为 nodejs 的 核心模块 ，核心模块的优先级仅次于缓存加载，在 Node 源码编译中，已被编译成二进制代码，所以加载核心模块速度最快
    • ./ 和 ../ 作为相对路径的 文件模块 ， / 作为绝对路径的 文件模块 ， require() 方法会将路径转换成真实路径，并以真实路径作为索引，将编译后的结果缓存起来，第二次加载的时候会更快
    • 非路径形式也非核心模块的模块，将作为 自定义模块 ，查找会遵循原则：首先在当前目录下的 node_modules 目录查找，若没有在父级目录的 node_modules 查找，若没有在父级目录的父级目录的 node_modules 中查找，沿着路径向上递归，直到根目录下的 node_modules 目录，在查找过程中，会找 package.json 中 main 属性指向的文件，若没有 package.json , 在 node 环境下会依次查找 index.js 、 index.json 、 index.node
# require 模块引入与处理
  • CommonJS 模块同步加载并执行模块文件，在执行阶段分析模块依赖，采用 深度优先遍历 ，执行顺序是父 -> 子 -> 父
  • require 加载原理
    • module：在 Node 中每一个 js 文件都是一个 module , module 上保存了 exports 等信息之外，还有一个 loaded 表示该模块是否被加载，值为 false 表示还没有加载，值为 true 表示已经加载
    • Module：如 nodejs，整个系统运行之后，会用 Module 缓存每一个模块加载的信息
    • 源码理解：1. require 会接收一个参数 —— 文件标识符，然后分析查找定位文件，分析过程我们上述已经讲到了，加下来会从 Module 上查找有没有缓存，如果有缓存，那么直接返回缓存的内容。如果没有缓存，会创建一个 module 对象，缓存到 Module 上，然后执行文件，加载完文件，将 loaded 属性设置为 true , 然后返回 module.exports 对象，完成模块加载流程。模块导出就是 return 这个变量的其实跟 a = b 赋值一样， 基本类型导出的是值， 引用类型导出的是引用地址。 exports 和 module.exports 持有相同引用，因为最后导出的是 module.exports , 所以对 exports 进行赋值会导致 exports 操作的不再是 module.exports 的引用。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    // id 为路径标识符
     function require(id) {
     /* 查找  Module 上有没有已经加载的 js  对象*/
         const  cachedModule = Module._cache[id]
     
     /* 如果已经加载了那么直接取走缓存的 exports 对象  */
     if(cachedModule){
         return cachedModule.exports
     }
     
     /* 创建当前模块的 module  */
     const module = { exports: {} ,loaded: false , ...}

     /* 将 module 缓存到  Module 的缓存属性中，路径标识符作为 id */  
     Module._cache[id] = module
     /* 加载文件 */
     runInThisContext(wrapper('module.exports = "123"'))(module.exports, require, module, __filename, __dirname)
     /* 加载完成 *//
     module.loaded = true 
     /* 返回值 */
     return module.exports
     }
  • require 解决重复加载：首先加载之后的文件的 module 会被缓存到 Module 上，比如一个模块已经 require 引入了 a 模块，如果另外一个模块再次引用 a ，那么会直接读取缓存值 module ，所以无需再次执行模块
  • require 动态加载：require 可以在任意的上下文，动态加载模块。require 本质上就是一个函数，那么函数可以在任意上下文中执行，来自由地加载其他模块的属性方法。
# exports 和 module.exports
  • exports 就是传入到当前模块内的一个对象，本质上就是 module.exports
  • 为什么 exports={} 直接赋值一个对象就不可以呢？解释如下所示：假设 wrap 就是 Commonjs 规范下的包装函数，我们的 js 代码就是包装函数内部的内容。当我们把 myExports 对象传进去，但是直接赋值 myExports = { name:‘我不是外星人’} 没有任何作用，相等于内部重新声明一份 myExports 而和外界的 myExports 断绝了关系。所以解释了为什么不能 exports={…} 直接赋值。
1
2
3
4
5
6
7
8
9
10
11
function wrap (myExports){
    myExports={
       name:'我不是外星人'
   }
}

let myExports = {
    name:'alien'
}
wrap(myExports)
console.log(myExports)
  • module.exports：可以单独导出一个对象、函数、类。 exports 和 module.exports 持有相同引用，在一个文件中，我们最好选择 exports 和 module.exports 两者之一，如果两者同时存在，很可能会造成覆盖的情况发生。
  • 如果我们不想在 common.js 中导出对象，而是只导出一个类或者函数或者其他属性的情况，那么 module.exports 就更方便了，如上我们知道 exports 会被初始化成一个对象，也就是我们只能在对象上绑定属性，但是我们可以通过 module.exports 自定义导出对象外的其他类型元素。module.exports 当导出一些函数等非对象属性的时候，也有一些风险，就比如循环引用的情况下。对象会保留相同的内存地址，就算一些属性是后绑定的，也能间接通过异步形式访问到。但是如果 module.exports 为一个非对象其他属性类型，在循环引用的时候，就容易造成属性丢失的情况发生了。

# ES Module

# 导出和导入
  • 所有通过 export 导出的属性，在 import 中可以通过结构的方式，解构出来
  • export 正常导出，import 导入，这种情况下 import {} 内部的变量名称，要与 export {} 完全匹配。
  • 默认导出 export default , 默认导出内容可以是函数、属性方法、对象。对于引入默认导出的模块，import anyName from ‘module’， anyName 可以是自定义名称。
  • 混合导入｜导出
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// a.js   2中导出方式： export default 和 export 
export const name = '《React进阶实践指南》'
export const author = '我不是外星人'
export default  function say (){
    console.log('hello , world')
}
// main.js   导入方式
// 第一种
import theSay , { name, author as  bookAuthor } from './a.js'
console.log(
    theSay,     // ƒ say() {console.log('hello , world') }
    name,       // "《React进阶实践指南》"
    bookAuthor  // "我不是外星人"
)
// 第二种
// 导出的属性被合并到 mes 属性上， export 被导入到对应的属性上，export default 导出内容被绑定到 default 属性上。 theSay 也可以作为被 export default 导出属性。
import theSay, * as mes from './a'
console.log(
    theSay, // ƒ say() { console.log('hello , world') }
    mes // { name:'《React进阶实践指南》' , author: "我不是外星人" ，default:  ƒ say() { console.log('hello , world') } }
)
  • 重命名导入： import { name as bookName , say, author as bookAuthor } from 'module'
  • 重定向导出
1
2
3
4
5
6
// 第一种方式：重定向导出 module 中的所有导出属性， 但是不包括 module 内的 default 属性。
// 第二种方式：从 module 中导入 name ，author ，say 再以相同的属性名，导出。
// 第三种方式：从 module 中导入 name ，重属名为 bookName 导出，从 module 中导入author ，重属名为 bookAuthor 导出，正常导出 say 。
export * from 'module' // 第一种方式
export { name, author, ..., say } from 'module' // 第二种方式
export { name as bookName ,  author as bookAuthor , ..., say } from 'module' //第三种方式
  • 无需导入模块，只运行模块。执行 module 不导出值 多次调用 module 只运行一次。
1
import 'module'
  • 动态导入。import (‘module’) ，动态导入返回一个 Promise。为了支持这种方式，需要在 webpack 中做相应的配置处理。
1
const promise = import('module')
# 特性
  • 静态导入导出的优势，实现了 tree shaking , 可以实现 import() 懒加载的方式实现代码分割。
  • 静态语法。引入和导出是静态的，import 会自动提升到代码的顶层。import、export 不能放在块级作用域或条件语句中。import 的导入名不能为字符串或在判断语句。
  • 执行特性。与 Common.js 不同的是 ，CommonJS 模块同步加载并执行模块文件，ES6 模块提前加载并执行模块文件，ES6 模块在预处理阶段分析模块依赖，在执行阶段执行模块，两个阶段都采用深度优先遍历，执行顺序是子 -> 父。
  • 导出绑定
    • 不能修改 import 导入的属性，若直接修改会报错。
    • 属性绑定。对于 import 属性如下总结
      • 使用 import 被导入的模块运行在严格模式下。
      • 使用 import 被导入的变量是只读的，可以理解默认为 const 装饰，无法被赋值
      • 使用 import 被导入的变量是与原变量绑定 / 引用的，可以理解为 import 导入的变量无论是否为基本类型都是引用传递。
# import () 动态引入
  • import () 返回一个 Promise 对象，返回的 Promise 的 then 成功回调中，可以获取模块的加载成功信息。import () 这种加载效果，可以很轻松的实现代码分割。避免一次性加载大量 js 文件，造成首次加载白屏时间过长的情况。
  • 动态加载。import () 动态加载一些内容，可以放在条件语句或者函数执行上下文中。
  • 懒加载。import () 可以实现懒加载。如路由懒加载等
  • tree shaking 的实现

# Commonjs 与 es module 总结

  • Commonjs 的特性如下：
    • CommonJS 模块由 JS 运行时实现。
    • CommonJs 是单个值导出，本质上导出的就是 exports 属性。
    • CommonJS 是可以动态加载的，对每一个加载都存在缓存，可以有效的解决循环引用问题。
    • CommonJS 模块同步加载并执行模块文件。
  • Es module 的特性如下：
    • ES6 Module 静态的，不能放在块级作用域内，代码发生在编译时。
    • ES6 Module 的值是动态绑定的，可以通过导出方法修改，可以直接访问修改结果。
    • ES6 Module 可以导出多个属性和方法，可以单个导入导出，混合导入导出。
    • ES6 模块提前加载并执行模块文件，
    • ES6 Module 导入模块在严格模式下。
    • ES6 Module 的特性可以很容易实现 Tree Shaking 和 Code Splitting。
模块化
#模块化开发
模块化开发
http://example.com/2023/03/05/12001_模块化/
作者
XGG
发布于
2023年3月5日
更新于
2023年6月10日
许可协议