1. 前言
1.最近在找工作,也刷些题查漏补缺,毕竟工作时间长了,容易思维固化,就像
拿着锤子的人看什么都像钉子
- 确实在工作中容易忽略很多东西,正好的个机会,就记录下自己的学习当然也会有些自己面试的题分享
2. 是什么模块化 what
- 模块化方案是一种
组织
和管理代码
的方法,通过将代码划分为独立的模块,可以提高代码的可维护性、复用性和可扩展性。- 模块化方案允许开发者将功能单元封装在模块中,并通过导入(引用)和导出(暴露)的机制实现模块之间的依赖关系和交互
3. 常见的模块化方案
- 按
顺序
书写
- CommonJS
- AMD
- CMD
- ES Module
- IIFE:使用自执行函数来编写模块化
- 特点:在一个单独的函数作用域中执行代码,避免变量冲突
- 这个其实更早了
(function(){
return {
data:[]
}
})()
4. CommonJS
CommonJS
是一种模块化方案,最早是为了解决Node.js
环境中的模块化问题而提出的- 使用
require
函数导入模块,使用module.exports
或exports
导出模块- CommonJS 采用
同步加载
模块的方式,适用于服务器端
环境或编译打包工具
(如Webpack)中
// 导入模块
const moduleA = require('./moduleA');
// 导出模块
module.exports = {
// 模块内容
};
- 注意
不可以exports = xxx,这样写会无效,
因为更改了exports的地址,而 exports 是 module.exports 的引用指向的是同一个内存,模块最后导出的是 module.exports
5. AMD(Asynchronous Module Definition):
1.AMD 是一种
异步
加载模块的方案,主要用于浏览器环境
- 使用
define
函数定义模块,使用require
函数异步加载依赖的模块AMD
方案适合在浏览器环境
中按需加载模块,可以提高页面加载性能
// 定义模块
define(['moduleA', 'moduleB'], function(moduleA, moduleB) {
// 模块内容
});
// 异步加载模块
require(['moduleA'], function(moduleA) {
// 回调函数
});
- 依赖前置
所有的依赖必须写在最初的依赖数组中,速度快,
但是会浪费资源,预先加载了所有依赖不管你是否用到
6. CMD(Common Module Definition)
- CMD 是另一种
异步
加载模块的方案,也主要用于浏览器环境
- 使用
define
函数定义模块,使用require
函数异步加载依赖的模块- CMD 方案更加注重模块的延迟执行,适合在浏览器环境中按需加载模块
// 定义模块
define(function(require, exports, module) {
const moduleA = require('moduleA');
const moduleB = require('moduleB');
// 模块内容
});
// 异步加载模块
require(['moduleA'], function(moduleA) {
// 回调函数
});
- 依赖就近
用到了再引用依赖,方便了开发,缺点是速度和性能较差
7. ES Module(ES6 Module)
- ES Module 是 ECMAScript 6 引入的
官方
模块化方案,现在已成为JavaScript 的标准
- 使用
import
和export
关键字进行模块的导入和导出- ES Module 支持静态分析,使得一些工具可以进行更高效的代码优化和打包。
// 导入模块
import moduleA from './moduleA';
// 导出模块
//export default在同一个文件中只可存在一个(一个模块只能有一个默认输出)
export default {
// 模块内容
};
// 1. 导出:通过export 或 export default 输出模块
// 写法1: 边声明,边导出
export var m = 1;
export function m() {};
export class M {};
// 写法2:导出一个接口 export {},形似导出对象但不是, 本质上是引用集合,最常用的导出方法
export {
attr1,
attr2
}
8. 注意
- 不同的模块化方案在语法和使用方式上有所差异,因此在不同的环境和项目中选择合适的方案很重要
- 很多现代的前端框架和工具已经默认使用 ES Module,比如 Vue.js 和 React