1. 前言

1.最近在找工作,也刷些题查漏补缺,毕竟工作时间长了,容易思维固化,就像拿着锤子的人看什么都像钉子

2. 确实在工作中容易忽略很多东西,正好的个机会,就记录下自己的学习当然也会有些自己面试的题分享

2. 是什么模块化 what

1. 模块化方案是一种组织和管理代码的方法，通过将代码划分为独立的模块，可以提高代码的可维护性、复用性和可扩展性。
2. 模块化方案允许开发者将功能单元封装在模块中，并通过导入（引用）和导出（暴露）的机制实现模块之间的依赖关系和交互

3. 常见的模块化方案

• 按顺序 书写

2. CommonJS
3. AMD
4. CMD
5. ES Module

• IIFE：使用自执行函数来编写模块化

1. 特点：在一个单独的函数作用域中执行代码，避免变量冲突
2. 这个其实更早了

(function(){
  return {
    data:[]
  }
})()

4. CommonJS

1. CommonJS 是一种模块化方案，最早是为了解决 Node.js环境中的模块化问题而提出的
2. 使用require函数导入模块，使用module.exports或 exports导出模块
3. CommonJS 采用同步加载模块的方式，适用于服务器端环境或编译打包工具（如Webpack）中

// 导入模块
const moduleA = require('./moduleA');
// 导出模块
module.exports = {
  // 模块内容
};

• 注意

不可以exports = xxx，这样写会无效，

因为更改了exports的地址，而 exports 是 module.exports 的引用指向的是同一个内存，模块最后导出的是 module.exports

5. AMD（Asynchronous Module Definition）：

1.AMD 是一种异步加载模块的方案，主要用于浏览器环境

2. 使用 define函数定义模块，使用require函数异步加载依赖的模块
3. AMD方案适合在浏览器环境中按需加载模块，可以提高页面加载性能

// 定义模块
define(['moduleA', 'moduleB'], function(moduleA, moduleB) {
  // 模块内容
});
// 异步加载模块
require(['moduleA'], function(moduleA) {
  // 回调函数
});

• 依赖前置

所有的依赖必须写在最初的依赖数组中，速度快，

但是会浪费资源，预先加载了所有依赖不管你是否用到

6. CMD（Common Module Definition）

1. CMD 是另一种异步加载模块的方案，也主要用于浏览器环境
2. 使用 define函数定义模块，使用 require函数异步加载依赖的模块
3. CMD 方案更加注重模块的延迟执行，适合在浏览器环境中按需加载模块

// 定义模块
define(function(require, exports, module) {
  const moduleA = require('moduleA');
  const moduleB = require('moduleB');
  // 模块内容
});
// 异步加载模块
require(['moduleA'], function(moduleA) {
  // 回调函数
});

• 依赖就近

用到了再引用依赖，方便了开发，缺点是速度和性能较差

7. ES Module（ES6 Module）

1. ES Module 是 ECMAScript 6 引入的官方模块化方案，现在已成为 JavaScript 的标准
2. 使用import和 export关键字进行模块的导入和导出
3. 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. 注意

1. 不同的模块化方案在语法和使用方式上有所差异，因此在不同的环境和项目中选择合适的方案很重要
2. 很多现代的前端框架和工具已经默认使用 ES Module，比如 Vue.js 和 React

参考资料

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉