前端模块化

省流：chatGPT总结

该文章主要讲述了前端模块化的发展历史和各个阶段的技术方案，包括无模块化（IIFE）、CommonJS、AMD、CMD、ESModule、UMD。

其中，无模块化时期的文件拆分是最基础的模块化，但也存在函数命名冲突的问题；

IIFE 是现代模块化的基石，利用函数的块级作用域进行隔离，可以控制作用域；

CommonJS 文件即模块，模块加载同步，适用于服务器端 node，浏览器端使用 webpack 或 browserfy。

最后，各种模块化技术方案都是为了更好地满足前端代码管理、组织、通信的需求，模块已经成为了代码管理/编译、业务分离的基本单元。

一、参考资料

• es-module-history
• 网页性能管理详解
• defer和async的区别
• 可能是最详细的UMD模块入门指南
• 在浏览器中使用 ECMAScript Modules

二、发展历史

• js的设计之初就是为了满足简单的页面设计+表单提交，并无模块化 or 命名空间的概念
• 而是实实在在的需求推进了所有技术的演进，模块化也是。
• 站在前端发展的上帝视角来看，随着前端的能力在纵深都得到增强之后，迫切的需要更好的代码管理、组织、通信的模式，各种模块化的技术方案开始出现。
• 现如今模块已经成为了代码管理/编译，业务分离的基本单元。

总的发展历史：

• 无模块化(IIFE) -> CommonJS -> AMD -> CMD -> ESModule、UMD

1.无模块化

需求:

1. 开始需要在页面中加载不同的js：动画、组件、格式化
2. 多种js分布在不同的文件中
3. 不同的文件又被同一个模块中引用

文件拆分是最基础的模块化

<script src='jq.js'></script>
<script src='main.js'></script>
<script src='dep1.js'></script>
// ...

问题：这个时期函数命名可能会冲突，影响到其他人写的代码

引出的问题:

• script标签的参数 - async & defer 的区别？

总结： 主要是对标签下载和执行时机的控制

• 普通标签 - 遇到标签就去下载，下载完毕之后立刻去解析代码并执行，这个时候会阻塞GUI线程渲染
• defer - 遇到标签之后异步下载，下载完成之后等待其他标签解析完成之后开始执行（在主线程解析完成之后才执行，降低脚本的优先级，保持用户体验，使用相对较多）
• async - 遇到标签之后异步下载，下载完成之后立即执行并阻塞渲染，执行完成之后继续渲染（异步下载结束之后立即执行，不保证脚本执行顺序，一般用来给那些不需要任何依赖的脚本使用）
• 拓展
• ESM 默认是通过 defer 的方式加载的，所以是不需要在 script 标签上加 defer 属性的

横向拓展

1. 兼容性如何？ > IE9
2. 引导内容
3. 浏览器渲染原理
4. 同步异步的原理（Promise，任务队列）
5. 模块化加载原理
6. 产生的问题
7. 污染全局作用域 => 不利于大型项目的开发以及多人团队的共建

2.IIFE

IIFE主要是开始对作用域的把控 利用函数的块级作用域进行隔离 可以说IIFE是现代模块化的基石

(function($){
    console.log($)
    return {
       data:[]
    }
})(jQuery) //注入对象

3.Commonjs(cjs)

• 服务器端node，浏览器端webpack|browserfy
• 文件即模块
• 模块加载同步
• 服务器模块加载是运行时同步加载
• 浏览器模块加载是提前编译打包处理
• exports = module.exports
• 注意：不能直接给exports赋值，会导致与module断开引用
• 使用require进行引入
• 缓存
• cjs在引用文件的时候，会将文件执行一遍，然后将结果通过浅拷贝的方式写入全局缓存中
• 后续再次require同一个文件时，直接从缓存中读取，不会重新执行模块文件

// a.js
var name = 'morrain'
var age = 18
exports.name = name
exports.getAge = function(){
    return age
}
// b.js
var a = require('a.js')
console.log(a.name) // 'morrain'
a.name = 'rename'
var b = require('a.js')
console.log(b.name) // 'rename'

• 模块输出的结果是值的拷贝，一但输出，模块内部变化后，无法影响之前的引用，而ESModule是引用拷贝

// a.js
var name = 'morrain'
var age = 18
exports.name = name
exports.age = age
exports.setAge = function(a){
    age = a
}
// b.js
var a = require('a.js')
console.log(a.age) // 18
a.setAge(19)
console.log(a.age) // 18

• cjs在运行时加载，ESM是编译时加载
• 缺点：不支持异步
• cjs更偏向于服务端，因为服务端I/O能力强，所以CMJ是同步的方法
• ESM时机遇编译时的，所以支持异步能力

4.AMD

AMD(Asynchronous module definition)异步的模块定义 解决了Commonjs不支持异步的缺点，可以在浏览器端运行

经典代表：require.js

使用方法：

// define来定义模块
define(id, [depends], callback);
// require进行加载
require([module], callback);

示例：

//提前加载执行顺序
// RequireJS
define('a', function () {
  console.log('a load')
  return {
    run: function () { console.log('a run') }
  }
})

define('b', function () {
  console.log('b load')
  return {
    run: function () { console.log('b run') }
  }
})

require(['a', 'b'], function (a, b) {
  console.log('main run') // 
  a.run()
  b.run()
})

// a load
// b load
// main run
// a run
// b run

缺点：

• 在代码运行时，会先递归的找出所有的依赖，然后将依赖放到前面加载
• 如果依赖过多，项目可能会变慢，引入成本升高

引出的问题：

• 如果现在AMD中兼容CJS的代码怎么办？

define('amdModule', [], require => {
    const dep1 = require('./dep1');
    const dep2 = require('./dep2');
    // 业务逻辑……
})

5.CMD

CMD(Common Module Definition-通用模块定义)推崇依赖后置，也就是按需执行 CMD解决了AMD依赖前置导致的引入成本过高的问题 整合了CJS和AMD的特点，浏览器端运行

经典代表：Sea.js

// 引入require
var fs = require('fs'); //同步
require.async('./module3', function (m3) {}) //异步


// sea.js，按需引入
define('a', function (require, exports, module) {
  console.log('a load')
  exports.run = function () { console.log('a run') }
})

define('b', function (require, exports, module) {
  console.log('b load')
  exports.run = function () { console.log('b run') }
})

define('main', function (require, exports, module) {
  console.log('main run')
  var a = require('a')
  a.run()
  var b = require('b')
  b.run()
})

seajs.use('main')

// main run
// a load
// a run
// b load
// b run

缺点：

• 依赖打包，加载逻辑存在于每个模块中
• 扩大了模块体积，同时功能上依赖编译

6.UMD

UMD (Universal Module Definition)就是一种通用模块定义规范，让你的模块能在所有运行环境中使用，如CommonJS, AMD, CMD

(function(root, factory) {
    if (typeof module === 'object' && typeof module.exports === 'object') {
        console.log('是commonjs模块规范，nodejs环境')
        module.exports = factory();
    } else if (typeof define === 'function' && define.amd) {
        console.log('是AMD模块规范，如require.js')
        define(factory)
    } else if (typeof define === 'function' && define.cmd) {
        console.log('是CMD模块规范，如sea.js')
        define(function(require, exports, module) {
            module.exports = factory()
        })
    } else {
        console.log('没有模块环境，直接挂载在全局对象上')
        root.umdModule = factory();
    }
}(this, function() {
    return {
        name: '我是一个umd模块'
    }
}))

7.ESM

ESModule是伴随着ES6推出的原生模块化解决方案 import输入、export输出

• 支持异步加载
• 编译时加载，支持静态分析
• 更好的支持chunk和tree shaking
• 支持动态导入（按需加载）import().then()
• 支持import.meta获取模块元数据

Tags：前端模块化

微信扫一扫：分享

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。