前端面经每日一题Day21

requireJS？

requireJS 文件和模块加载器.基于AMD规范，解决浏览器环境中JavaScript模块加载的异步性问题。主要应用于浏览器端JavaScript环境。

• 原理

  基于AMD规范，即将代码划分为一个个模块，并分块加载。通常只需要在页面上引入一个require.js文件，并指定一个入口文件（如main.js）。RequireJS会根据入口文件中的依赖关系，动态地加载所需的模块和依赖。

• 动态加载机制（按需加载）

  RequireJS会根据依赖关系预先将需要的JavaScript文件通过动态创建script的方法引入到DOM中。

• 避免重复加载

  它使用一个数据结构来存储已经加载的模块信息。当某个模块被请求时，RequireJS会首先检查该模块是否已经被加载过。如果已经被加载过，则直接返回该模块的结果，而不会再次加载该模块的JavaScript文件。

• 模块化管理 ****RequireJS支持模块化开发，将代码拆分成多个模块，每个模块负责特定的功能或业务逻辑，提高代码的可读性和可维护性。

• 自动处理依赖关系 ****RequireJS能够自动处理模块间的依赖关系，确保模块按照正确的顺序加载和执行。简化了依赖管理的工作，减少了因依赖关系错误而导致的代码问题。

• 缓存机制

  RequireJS本身并不直接提供缓存机制，但可以通过一些策略来实现缓存效果。如浏览器缓存，手动缓存（localstorage）

CommonJS

CommonJS是一种规范，促进JavaScript模块化的实现，同步加载机制。

它定义了模块的导入和导出机制，使得开发者可以将代码分割成可复用的模块，并在不同的文件中引用和使用这些模块，促进JavaScript模块化的实现,注意模块之间的依赖关系。主要应用于服务器端JavaScript环境

特点：

• 模块化（允许将代码按功能或逻辑分类成独立的模块，每个模块只负责特定的功能，使代码更加可维护和可复用。）
• 隔离命名空间。每个模块都有自己独立的作用域。
• 模块加载和缓存机制。同步加载阻塞代码。

导入导出机制

1. 导出模块：

   1. 使用module.exports或exports对象来导出模块中的变量、函数等。

   2. module.exports可以直接导出任何类型的值，是导出模块的常用方式。

   3. exports实际上是module.exports的引用，不常使用。（node 在执行一个文件时，会给这个文件内生成一个exports和module对象，而module又有一个exports属性，都指向一块{}内存区域）

2. 导入模块：

   1. 使用require函数来导入其他模块。
   2. require函数的参数是模块标识（即模块文件的路径或名称），它可以是相对路径、绝对路径或第三方模块的名称。

3. 具体使用 两者混合使用只会保留module.exports

导出
// math.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
// 使用 exports 导出多个值
exports.add= add()
exports.bar = "bar value";
// 使用 module.exports 导出单个值
module.exports = add()
//或者使用 module.exports 导出多个值（封装在对象中）
module.exports = { add, subtract };

导入
// app.js
const math = require('./math');
const sum = math.add(2, 3);
const diff = math.subtract(5, 3);

模块导入导出

nodejs中模块导入与导出

• 导出module.exports 和 exports

两者差异：都可以导出变量、函数、文件和模块。default.exports和exports共存的时候就是以前者为准。

const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
// 使用 exports 导出多个值
exports.add= add()
exports.bar = "bar value";
// 使用 module.exports 导出单个值
module.exports = add()
//或者使用 module.exports 导出多个值（封装在对象中）
module.exports = { add, subtract };

• 导入 require 参数是模块文件的路径

const math = require('./math');
const sum = math.add(2, 3);
const diff = math.subtract(5, 3);

ES中的模块的 导入导出

• 导出export 和 export default

两者差异：

1. 都可以导出变量、函数、文件和模块。
2. 在一个文件或模块中，export可以有多个，export default仅有一个。
3. 使用export导出的，导入需要加{}。
4. export default导出模块的默认成员，但它后面不能直接跟上let、const或var声明，例如export default ()⇒1 但是export可以export const myVariable = 42

• 导入 import

// 导出函数
export function myFunction() {
  console.log('Hello, world!');
}
// 导出变量
export const myVariable = 42;
// 导出对象
export const myObject = {
  key: 'value'
};
import { myFunction, myVariable, myObject } from './myModule.js';
myFunction(); // 输出: Hello, world!
console.log(myVariable); // 输出: 42
console.log(myObject); // 输出: { key: 'value' }

// 导出函数作为默认导出
export default function defaultFunction() {
  console.log('This is the default function.');
}
import anyNameYouWant from './myModule.js';
anyNameYouWant(); // 输出: This is the default function.