一文带你了解,前端模块化那些事儿
创始人
2024-05-31 09:08:59
0

文章目录

  • 前端模块化
    • 省流:chatGPT 总结
    • 一、参考资料
    • 二、发展历史
      • 1.无模块化
        • 引出的问题:
        • 横向拓展
      • 2.IIFE
      • 3.Commonjs(cjs)
      • 4.AMD
        • 引出的问题:
      • 5.CMD
      • 6.UMD
      • 7.ESM
    • 往期精彩文章

前端模块化

省流: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 标签的参数 - async & defer 的区别?

async & defer 的区别

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

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

横向拓展

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

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 输出

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

往期精彩文章

  • leetcode-js刷题记录&数据结构
  • docker下YApi部署教程-支持swagger数据导入
  • 带你深入理解什么叫js闭包
  • 使用Object.defineProperty进行数据劫持,实现响应式原理-剖析vue2.0
  • 前端性能优化之rel=“prefetch“预/懒加载功能
  • 前端唤起相机的方法H5+JS

相关内容

热门资讯

安卓se系统怎么启用,确保应用... 你有没有发现,你的安卓手机最近有点儿“懒”呢?运行速度慢,反应迟钝,是不是想给它来个“大变身”呢?别...
微软怎么使用安卓系统,技术融合... 你有没有想过,那个以Windows系统著称的微软,竟然也会和安卓系统玩起“亲密接触”?没错,就是那个...
安卓系统耗电特别快,快速诊断与... 手机电量总是不够用?安卓系统耗电特别快,是不是你也遇到了这样的烦恼?别急,今天就来跟你聊聊这个话题,...
安卓机 桌面 系统菜单,功能解... 你有没有发现,你的安卓手机桌面系统菜单,其实就像一个隐藏的宝藏库呢?里面藏着各种各样的功能,等着你去...
安卓ios系统怎么安装,安卓与... 你有没有想过,你的手机里那些好玩的应用是怎么来的呢?是不是觉得安装个软件就像变魔术一样简单?其实,这...
珍奥助手安卓系统下载,轻松体验 你有没有听说最近有个超级好用的助手软件——珍奥助手?没错,就是那个能让你手机生活变得更加便捷的小帮手...
安卓换ios系统.数据,数据迁... 你有没有想过,手机系统就像是我们生活中的衣服,有时候换一件新衣服,整个人都焕然一新呢?没错,今天咱们...
安卓系统提示怎么关,轻松关闭功... 手机屏幕上突然弹出一个安卓系统的提示,让你不禁皱起了眉头。别急,别慌,今天就来手把手教你如何轻松关闭...
安卓系统如何刷回flyme系统... 你是不是也和我一样,对安卓手机的Flyme系统情有独钟呢?有时候,因为一些原因,我们可能需要将手机刷...
手机订餐系统源码安卓,基于手机... 你有没有想过,每天忙碌的生活中,点外卖已经成为了一种不可或缺的享受?而这一切的背后,离不开那些默默无...
顾问营销系统安卓版,助力企业高... 你有没有想过,在这个信息爆炸的时代,如何让你的产品在众多竞争者中脱颖而出呢?别急,今天我要给你介绍一...
安卓系统连接雅马哈音箱,打造个... 你有没有想过,家里的安卓手机和雅马哈音箱也能来个甜蜜的“牵手”呢?没错,今天就要来给你揭秘,如何让这...
安卓系统文件日志查看,揭秘系统... 手机里的安卓系统文件日志,听起来是不是有点儿高深莫测?别担心,今天我就要带你一探究竟,揭开这些神秘日...
努比亚升级安卓p系统,畅享智能... 你知道吗?最近手机界可是热闹非凡呢!努比亚这个品牌,竟然悄悄地给他们的手机升级了安卓P系统。这可不是...
仿苹果装安卓系统,揭秘仿苹果装... 你有没有想过,如果你的苹果手机突然变成了安卓系统,那会是怎样的场景呢?想象你那熟悉的iOS界面,突然...
安装安卓13子系统,全新功能与... 你听说了吗?安卓13子系统终于来了!这可是安卓系统的一大革新,让我们的手机体验更加丰富多元。今天,就...
安卓系统内核日志保存,深度洞察... 你有没有想过,当你手机里的安卓系统在默默运行时,它其实就像一个勤劳的小蜜蜂,不停地记录着它的“工作日...
安卓系统可以调用dll,安卓系... 你知道吗?安卓系统竟然能调用DLL文件,这可是个让人眼前一亮的小秘密呢!想象你手中的安卓设备,不仅能...
安卓通讯 录系统代码,基于安卓... 你有没有想过,你的手机里那个默默无闻的通讯录系统,其实背后有着一套复杂的代码在支撑呢?今天,就让我带...
安卓系统版本对应关系,安卓系统... 你有没有发现,每次手机更新系统,那感觉就像给手机换了个新衣裳,焕然一新呢!不过,你知道吗?安卓系统的...