JS学习之JavaScript模块化规范进化论

前言 JavaScript 语言诞生至今,模块规范化之路曲曲折折。

前言

JavaScript 语言诞生至今,模块规范化之路曲曲折折。社区先后出现了各种解决方案,包括 AMD、CMD、CommonJS 等,而后 ECMA 组织在 JavaScript 语言标准层面,增加了模块功能(因为该功能是在 ES2015 版本引入的,所以在下文中将之称为 ES6 module)。
今天我们就来聊聊,为什么会出现这些不同的模块规范,它们在所处的历史节点解决了哪些问题?

何谓模块化?

或根据功能、或根据数据、或根据业务,将一个大程序拆分成互相依赖的小文件,再用简单的方式拼装起来。

全局变量

演示项目

为了更好的理解各个模块规范,先增加一个简单的项目用于演示。

Window

在刀耕火种的前端原始社会,JS 文件之间的通信基本完全依靠window对象(借助 HTML、CSS 或后端等情况除外)。

  • config.js

    var api = 'https://github.com/ronffy';
    var config = {api: api,
    }
    
  • utils.js

    var utils = {request() {console.log(window.config.api);}
    }
    
  • main.js

    window.utils.request();
    
  • HTML

    <!-- index.html -->
    <!DOCTYPE html>
    <html lang="en"><head><meta charset="UTF-8"><meta ><title>【深度全面】JS模块规范进化论</title>
    </head><body><!-- 所有 script 标签必须保证顺序正确,否则会依赖报错 --><script src="./js/config.js"></script><script src="./js/utils.js"></script><script src="./js/main.js"></script>
    </body></html>

IIFE

浏览器环境下,在全局作用域声明的变量都是全局变量。全局变量存在命名冲突、占用内存无法被回收、代码可读性低等诸多问题。

这时,IIFE(匿名立即执行函数)出现了:

用 IIFE 重构 config.js:

(function (root) {var api = 'https://github.com/ronffy';var config = {api: api,};root.config = config;
}(window));

IIFE 的出现,使全局变量的声明数量得到了有效的控制。

命名空间

依靠window对象承载数据的方式是 “不可靠” 的,如window.config.api,如果window.config不存在,则window.config.api就会报错,所以为了避免这样的错误,代码里会大量的充斥var api = window.config && window.config.api;这样的代码。

这时,namespace登场了,简约版本的namespace函数的实现(只为演示,不要用于生产):

function namespace(tpl, value) {return tpl.split('.').reduce((pre, curr, i) => {return (pre[curr] = i === tpl.split('.').length - 1? (value || pre[curr]): (pre[curr] || {}))}, window);
}

namespace设置window.app.a.b的值:

namespace('app.a.b', 3); // window.app.a.b 值为 3

namespace获取window.app.a.b的值:

var b = namespace('app.a.b');  // b 的值为 3
var d = namespace('app.a.c.d'); // d 的值为 undefined 

app.a.c值为undefined,但因为使用了namespace, 所以app.a.c.d不会报错,变量d的值为undefined

AMD

随着前端业务增重,代码越来越复杂,靠全局变量通信的方式开始捉襟见肘,前端急需一种更清晰、更简单的处理代码依赖的方式,将 JS 模块化的实现及规范陆续出现,其中被应用较广的模块规范有 AMD。

面对一种模块化方案,我们首先要了解的是:1. 如何导出接口;2. 如何导入接口。

AMD

异步模块定义规范(AMD)制定了定义模块的规则,这样模块和模块的依赖可以被异步加载。这和浏览器的异步加载模块的环境刚好适应(浏览器同步加载模块会导致性能、可用性、调试和跨域访问等问题)。

本规范只定义了一个函数define,它是全局变量。

/*** @param {string} id 模块名称* @param {string[]} dependencies 模块所依赖模块的数组* @param {function} factory 模块初始化要执行的函数或对象* @return {any} 模块导出的接口*/
function define(id?, dependencies?, factory): any

RequireJS

AMD 是一种异步模块规范,RequireJS 是 AMD 规范的实现。

接下来,我们用 RequireJS 重构上面的项目。

在原项目 js 文件夹下增加 require.js 文件:

  •   define(function() {var api = 'https://github.com/ronffy';var config = {api: api,};return config;});
    
  • utils.js

    define(['./config'], function(config) {var utils = {request() {console.log(config.api);}};return utils;
    });
    
  •   require(['./utils'], function(utils) {utils.request();});
    
  • html

    <!-- index.html  -->
    <!-- ...省略其他 -->
    <body><script data-main="./js/main" src="./js/require.js"></script>
    </body>
    </html>
    

可以看到,使用 RequireJS 后,每个文件都可以作为一个模块来管理,通信方式也是以模块的形式,这样既可以清晰的管理模块依赖,又可以避免声明全局变量。

更多 AMD 介绍,请查看文档。
更多 RequireJS 介绍,请查看文档。

特别说明:
先有 RequireJS,后有 AMD 规范,随着 RequireJS 的推广和普及,AMD 规范才被创建出来。

CommonJS

前面说了, AMD 主要用于浏览器端,随着 node 诞生,服务器端的模块规范 CommonJS 被创建出来。

还是以上面介绍到的 config.js、utils.js、main.js 为例,看看 CommonJS 的写法:

  • config.js

    var api = 'https://github.com/ronffy';
    var config = {api: api,
    };
    module.exports = config;
    
  • utils.js

    var config = require('./config');
    var utils = {request() {console.log(config.api);}
    };
    module.exports = utils;
    
  • main.js

    var utils = require('./utils');
    utils.request();
    console.log(global.api)
    

执行node main.jshttps://github.com/ronffy被打印了出来。
在 main.js 中打印global.api,打印结果是undefined。node 用global管理全局变量,与浏览器的window类似。与浏览器不同的是,浏览器中顶层作用域是全局作用域,在顶层作用域中声明的变量都是全局变量,而 node 中顶层作用域不是全局作用域,所以在顶层作用域中声明的变量非全局变量。

module.exports 和 exports

我们在看 node 代码时,应该会发现,关于接口导出,有的地方使用module.exports,而有的地方使用exports,这两个有什么区别呢?

CommonJS 规范仅定义了exports,但exports存在一些问题(下面会说到),所以module.exports被创造了出来,它被称为 CommonJS2 。
每一个文件都是一个模块,每个模块都有一个module对象,这个module对象的exports属性用来导出接口,外部模块导入当前模块时,使用的也是module对象,这些都是 node 基于 CommonJS2 规范做的处理。

// a.js
var s = 'i am ronffy'
module.exports = s;
console.log(module);

执行node a.js,看看打印的module对象:

{exports: 'i am ronffy',id: '.',                                // 模块idfilename: '/Users/apple/Desktop/a.js',  // 文件路径名称loaded: false,                          // 模块是否加载完成parent: null,                           // 父级模块children: [],                           // 子级模块paths: [ /* ... */ ],                   // 执行 node a.js 后 node 搜索模块的路径
}

其他模块导入该模块时:

// b.js
var a = require('./a.js'); // a --> i am ronffy

当在 a.js 里这样写时:

// a.js
var s = 'i am ronffy'
exports = s;

a.js 模块的module.exports是一个空对象。

// b.js
var a = require('./a.js'); // a --> {}

module.exportsexports放到 “明面” 上来写,可能就更清楚了:

var module = {exports: {}
}
var exports = module.exports;
console.log(module.exports === exports); // truevar s = 'i am ronffy'
exports = s; // module.exports 不受影响
console.log(module.exports === exports); // false

模块初始化时,exportsmodule.exports指向同一块内存,exports被重新赋值后,就切断了跟原内存地址的关系。

所以,exports要这样使用:

// a.js
exports.s = 'i am ronffy';// b.js
var a = require('./a.js');
console.log(a.s); // i am ronffy

CommonJS 和 CommonJS2 经常被混淆概念,一般大家经常提到的 CommonJS 其实是指 CommonJS2,本文也是如此,不过不管怎样,大家知晓它们的区别和如何应用就好。

CommonJS 与 AMD

CommonJS 和 AMD 都是运行时加载,换言之:都是在运行时确定模块之间的依赖关系。

二者有何不同点:

  1. CommonJS 是服务器端模块规范,AMD 是浏览器端模块规范。
  2. CommonJS 加载模块是同步的,即执行var a = require('./a.js');时,在 a.js 文件加载完成后,才执行后面的代码。AMD 加载模块是异步的,所有依赖加载完成后以回调函数的形式执行代码。
  3. [如下代码]fschalk都是模块,不同的是,fs是 node 内置模块,chalk是一个 npm 包。这两种情况在 CommonJS 中才有,AMD 不支持。
var fs = require('fs');
var chalk = require('chalk');

ES6 module

AMD 是在原有 JS 语法的基础上二次封装的一些方法来解决模块化的方案,ES6 module(在很多地方被简写为 ESM)是语言层面的规范,ES6 module 旨在为浏览器和服务器提供通用的模块解决方案。长远来看,未来无论是基于 JS 的 WEB 端,还是基于 node 的服务器端或桌面应用,模块规范都会统一使用 ES6 module。

兼容性

目前,无论是浏览器端还是 node ,都没有完全原生支持 ES6 module,如果使用 ES6 module ,可借助 babel等编译器。本文只讨论 ES6 module 语法,故不对 babel 或 typescript 等可编译 ES6 的方式展开讨论。

导出接口

CommonJS 中顶层作用域不是全局作用域,同样的,ES6 module 中,一个文件就是一个模块,文件的顶层作用域也不是全局作用域。导出接口使用export关键字,导入接口使用import关键字。

export导出接口有以下方式:

  • 方式 1

    export const prefix = 'https://github.com';
    export const api = `${prefix}/ronffy`;
  • 方式 2

    const prefix = 'https://github.com';
    const api = `${prefix}/ronffy`;
    export {prefix,api,
    }

方式 1 和方式 2 只是写法不同,结果是一样的,都是把prefixapi分别导出。

  • 方式 3(默认导出)

    // foo.js
    export default function foo() {}// 等同于:
    function foo() {}
    export {foo as default
    }

export default用来导出模块默认的接口,它等同于导出一个名为default的接口。配合export使用的as关键字用来在导出接口时为接口重命名。

  • 方式 4(先导入再导出简写)

    export { api } from './config.js';
    // 等同于:
    import { api } from './config.js';
    export {api
    }

如果需要在一个模块中先导入一个接口,再导出,可以使用export ... from 'module'这样的简便写法。

导入模块接口

ES6 module 使用import导入模块接口。

导出接口的模块代码 1:

// config.js
const prefix = 'https://github.com';
const api = `${prefix}/ronffy`;
export {prefix,api,
}

接口已经导出,如何导入呢:

  • 方式 1

    import { api } from './config.js';
    // or
    // 配合`import`使用的`as`关键字用来为导入的接口重命名。
    import { api as myApi } from './config.js';
  • 方式 2(整体导入)

    import * as config from './config.js';
    const api = config.api;

将 config.js 模块导出的所有接口都挂载在config对象上。

  • 方式 3(默认导出的导入)

    // foo.js
    export const conut = 0;
    export default function myFoo() {}
    // index.js
    // 默认导入的接口此处刻意命名为cusFoo,旨在说明该命名可完全自定义。
    import cusFoo, { count } from './foo.js';// 等同于:
    import { default as cusFoo, count } from './foo.js';

export default导出的接口,可以使用import name from 'module'导入。这种方式,使导入默认接口很便捷。

  • 方式 4(整体加载)

这样会加载整个 config.js 模块,但未导入该模块的任何接口。

  • 方式 5(动态加载模块)

上面介绍了 ES6 module 各种导入接口的方式,但有一种场景未被涵盖:动态加载模块。比如用户点击某个按钮后才弹出弹窗,弹窗里功能涉及的模块的代码量比较重,所以这些相关模块如果在页面初始化时就加载,实在浪费资源,import()可以解决这个问题,从语言层面实现模块代码的按需加载。

ES6 module 在处理以上几种导入模块接口的方式时都是编译时处理,所以importexport命令只能用在模块的顶层,以下方式都会报错:

// 报错
if (/* ... */) {import { api } from './config.js'; 
}// 报错
function foo() {import { api } from './config.js'; 
}// 报错
const modulePath = './utils' + '/api.js';
import modulePath;

使用import()实现按需加载:

function foo() {import('./config.js').then(({ api }) => {});
}const modulePath = './utils' + '/api.js';
import(modulePath);

CommonJS 和 ES6 module

CommonJS 和 AMD 是运行时加载,在运行时确定模块的依赖关系。
ES6 module 是在编译时(import()是运行时加载)处理模块依赖关系,。

CommonJS

CommonJS 在导入模块时,会加载该模块,所谓 “CommonJS 是运行时加载”,正因代码在运行完成后生成module.exports的缘故。当然,CommonJS 对模块做了缓存处理,某个模块即使被多次多处导入,也只加载一次。

// o.js
let num = 0;
function getNum() {return num;
}
function setNum(n) {num = n;
}
console.log('o init');
module.exports = {num,getNum,setNum,
}
// a.js
const o = require('./o.js');
o.setNum(1);
// b.js
const o = require('./o.js');
// 注意:此处只是演示,项目里不要这样修改模块
o.num = 2;
// main.js
const o = require('./o.js');require('./a.js');
console.log('a o.num:', o.num);require('./b.js');
console.log('b o.num:', o.num);
console.log('b o.getNum:', o.getNum());

命令行执行node main.js,打印结果如下:

  1. o init
    模块即使被其他多个模块导入,也只会加载一次,并且在代码运行完成后将接口赋值到module.exports属性上。
  2. a o.num: 0
    模块在加载完成后,模块内部的变量变化不会反应到模块的module.exports
  3. b o.num: 2
    对导入模块的直接修改会反应到该模块的module.exports
  4. b o.getNum: 1
    模块在加载完成后即形成一个闭包。
ES6 module
// o.js
let num = 0;
function getNum() {return num;
}
function setNum(n) {num = n;
}
console.log('o init');
export {num,getNum,setNum,
}
// main.js
import { num, getNum, setNum } from './o.js';console.log('o.num:', num);
setNum(1);console.log('o.num:', num);
console.log('o.getNum:', getNum());

我们增加一个 index.js 用于在 node 端支持 ES6 module:

// index.js
require("@babel/register")({presets: ["@babel/preset-env"]
});module.exports = require('./main.js')

命令行执行npm install @babel/core @babel/register @babel/preset-env -D安装 ES6 相关 npm 包。

命令行执行node index.js,打印结果如下:

  1. o init
    模块即使被其他多个模块导入,也只会加载一次。
  2. o.num: 0
  3. o.num: 1
    编译时确定模块依赖的 ES6 module,通过import导入的接口只是值的引用,所以num才会有两次不同打印结果。
  4. o.getNum: 1

对于打印结果 3,知晓其结果,在项目中注意这一点就好。这块会涉及到 “Module Records(模块记录)”、“module instance(模快实例)” “linking(链接)” 等诸多概念和原理

ES6 module 是编译时加载(或叫做 “静态加载”),利用这一点,可以对代码做很多之前无法完成的优化:

  1. 在开发阶段就可以做导入和导出模块相关的代码检查。
  2. 结合 Webpack、Babel 等工具可以在打包阶段移除上下文中未引用的代码(dead-code),这种技术被称作 “tree shaking”,可以极大的减小代码体积、缩短程序运行时间、提升程序性能。

后记

大家在日常开发中都在使用 CommonJS 和 ES6 module,但很多人只知其然而不知其所以然,甚至很多人对 AMD、CMD、IIFE 等概览还比较陌生,希望通过本篇文章,大家对 JS 模块化之路能够有清晰完整的认识。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/68895.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024年第十五届蓝桥杯青少组国赛(c++)真题—快速分解质因数

快速分解质因数 完整题目和在线测评可点击下方链接前往&#xff1a; 快速分解质因数_C_少儿编程题库学习中心-嗨信奥https://www.hixinao.com/tiku/cpp/show-3781.htmlhttps://www.hixinao.com/tiku/cpp/show-3781.html 若如其他赛事真题可自行前往题库中心查找&#xff0c;题…

[Computer Vision]实验三:图像拼接

目录 一、实验内容 二、实验过程及结果 2.1 单应性变换 2.2 RANSAC算法 三、实验小结 一、实验内容 理解单应性变换中各种变换的原理&#xff08;自由度&#xff09;&#xff0c;并实现图像平移、旋转、仿射变换等操作&#xff0c;输出对应的单应性矩阵。利用RANSAC算法优…

FPGA自分频产生的时钟如何使用?

对于频率比较小的时钟&#xff0c;使用clocking wizard IP往往不能产生&#xff0c;此时就需要我们使用代码进行自分频&#xff0c;自分频产生的时钟首先应该经过BUFG处理&#xff0c;然后还需要进行时钟约束&#xff0c;处理之后才能使用。

【喜讯】海云安荣获“数字安全产业贡献奖”

近日&#xff0c;国内领先的数字化领域独立第三方调研咨询机构数世咨询主办的“2025数字安全市场年度大会”在北京成功举办。在此次大会上&#xff0c;海云安的高敏捷信创白盒产品凭借其在AI大模型技术方面的卓越贡献和突出的技术创新能力&#xff0c;荣获了“数字安全产业贡献…

ceph基本概念,架构,部署(一)

一、分布式存储概述 1.存储分类 存储分为封闭系统的存储和开放系统的存储&#xff0c;而对于开放系统的存储又被分为内置存储和外挂存储。 外挂存储又被细分为直连式存储(DAS)和网络存储(FAS)&#xff0c;而网络存储又被细分网络接入存储(NAS)和存储区域网络(SAN)等。 DAS(D…

Markdown Viewer 浏览器, vscode

使用VS Code插件打造完美的MarkDown编辑器&#xff08;插件安装、插件配置、markdown语法&#xff09;_vscode markdown-CSDN博客 右键 .md 文件&#xff0c;选择打开 方式 &#xff08;安装一些markdown的插件) vscode如何预览markdown文件 | Fromidea GitCode - 全球开发者…

wx036基于springboot+vue+uniapp的校园快递平台小程序

开发语言&#xff1a;Java框架&#xff1a;springbootuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#…

AIGC的企业级解决方案架构及成本效益分析

AIGC的企业级解决方案架构及成本效益分析 一,企业级解决方案架构 AIGC(人工智能生成内容)的企业级解决方案架构是一个多层次、多维度的复杂系统,旨在帮助企业实现智能化转型和业务创新。以下是总结的企业级AIGC解决方案架构的主要组成部分: 1. 技术架构 企业级AIGC解决方…

LeetCode 热题 100_全排列(55_46_中等_C++)(递归(回溯))

LeetCode 热题 100_两数之和&#xff08;55_46&#xff09; 题目描述&#xff1a;输入输出样例&#xff1a;题解&#xff1a;解题思路&#xff1a;思路一&#xff08;递归&#xff08;回溯&#xff09;&#xff09;&#xff1a; 代码实现代码实现&#xff08;思路一&#xff08…

2025发文新方向:AI+量化 人工智能与金融完美融合!

2025深度学习发论文&模型涨点之——AI量化 人工智能的融入&#xff0c;使量化交易实现了质的突破。借助机器学习、深度学习等先进技术&#xff0c;人工智能可高效处理并剖析海量市场数据&#xff0c;挖掘出数据背后错综复杂的模式与趋势&#xff0c;从而不仅提升了数据分析…

3.CSS的背景

通过CSS背景属性&#xff0c;可以给页面元素添加背景样式。 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。 3.1 背景颜色 background-color属性定义了元素的背景颜色 background-color:颜色值&#xff1b; 一般情况下元素背景颜色默认值…

AIGC视频生成模型:Stability AI的SVD(Stable Video Diffusion)模型

大家好&#xff0c;这里是好评笔记&#xff0c;公主号&#xff1a;Goodnote&#xff0c;专栏文章私信限时Free。本文详细介绍Stability AI的视频生成模型SVD(Stable Video Diffusion)模型&#xff0c;这家公司在图像生成领域富有盛名&#xff0c;开发并维护了知名开源项目SD系列…

【若依】添加数据字典

接下来&#xff0c;在生成代码的页面将“学科”字段改为下拉框&#xff0c;然后选择数据字典 然后&#xff0c;将生成的代码中的index文件复制到vue3的index中&#xff0c;替换掉之前的index文件 修改数据库中的subject的值&#xff0c;这样就可以通过数据字典来查询 以上操作成…

基于quartz,刷新定时器的cron表达式

文章目录 前言基于quartz&#xff0c;刷新定时器的cron表达式1. 先看一下测试效果2. 实现代码 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差&…

MySQL中的关联查询:方式、区别及示例

MySQL中的关联查询&#xff1a;方式、区别及示例 在数据库操作中&#xff0c;我们常常需要从多个相关的表中获取数据&#xff0c;这就用到了关联查询。MySQL提供了多种关联查询方式&#xff0c;每种方式都有其特点和适用场景。下面我们就来详细探讨这些关联查询的使用方式、它…

软件卸载不干净?用“它”一键卸载!

前言&#xff1a; 今天我要向大家推荐一款适用于Windows系统的卸载工具&#xff0c;它是一款完全免费且开源的软件&#xff0c;使用体验极佳&#xff0c;绝对值得大家一试。 Bulk Crap Uninstalle 这款名为Bulk Crap Uninstaller的软件&#xff0c;相较于系统自带的卸载工具…

使用AI生成金融时间序列数据:解决股市场的数据稀缺问题并提升信噪比

“GENERATIVE MODELS FOR FINANCIAL TIME SERIES DATA: ENHANCING SIGNAL-TO-NOISE RATIO AND ADDRESSING DATA SCARCITY IN A-SHARE MARKET” 论文地址&#xff1a;https://arxiv.org/pdf/2501.00063 摘要 金融领域面临的数据稀缺与低信噪比问题&#xff0c;限制了深度学习在…

吴恩达深度学习——如何实现神经网络

来自吴恩达深度学习&#xff0c;仅为本人学习所用。 文章目录 神经网络的表示计算神经网络的输出激活函数tanh选择激活函数为什么需要非激活函数双层神经网络的梯度下降法 随机初始化 神经网络的表示 对于简单的Logistic回归&#xff0c;使用如下的计算图。 如果是多个神经元…

MATLAB 如何避免复杂shp文件对inpolygon的影响

**任务描述&#xff1a;**当我想用inpolygon函数将属于非洲的pixel选出来时&#xff0c;发现因为周边小岛的影响&#xff0c;pixel选取有问题&#xff0c;如下图。 第一种解决办法&#xff1a; 首先将复杂shp文件查分成简单的shp文件&#xff0c;即将不相交的元素分离开 [QGIS…

【机器学习】嘿马机器学习(科学计算库)第11篇:Pandas,学习目标【附代码文档】

本教程的知识点为&#xff1a;机器学习&#xff08;常用科学计算库的使用&#xff09;基础定位 机器学习概述 机器学习概述 1.5 机器学习算法分类 1 监督学习 机器学习概述 1.7 Azure机器学习模型搭建实验 Azure平台简介 Matplotlib 3.2 基础绘图功能 — 以折线图为例 1 完善原…