模块化面试题

[zhh10]

1. 为什么要使用模块化？

模块化解决了命名冲突问题，可以提高代码的复用率，提高代码的可维护性。

• 避免命名冲突（减少命名空间污染）
• 更好地分离，按需加载
• 更高复用性
• 高可维护性

2. 使用模块化的几种方式？

• 函数 最起初，实现模块化的方式使用函数进行封装。将不同功能的代码实现封装到不同的函数中。通常一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。

  function a(){
  // 功能1
  }
  function b(){
  // 功能2
  }

  缺陷：容易发生命名冲突或者数据的不安全性

• 立即执行函数 立即执行函数中的匿名函数中有独立的词法作用域，避免了外界访问此作用域的变量。通过函数作用域解决了命名冲突、污染全局作用域的问题。

  (function(window){
    let name = "hello"
    function a(){console.log(`name:${name}`)}
    window.mymoudle = { a }
  })(window)

  缺陷：不能直接访问到内部的变量

• commonJS规范 commonJS的规范主要用在Node.js中。 导出模块

• module.exports = {}

• exports.xxx = 'xxx' 引入模块

• require('path')

  1. 核心模块：直接跳过路径分析和文件定位。
  2. 路径模块，直接得出相对路径就好了。
  3. 自定义模块，先在当前目录的node_modules里找这个模块，如果没有，它就往上一级目录查找。
  4. 查找上一级的node_modules，依次往上，直到根目录下都没有，就抛出错误。

• ES6模块化 导出方式

  1. 命名导出
  2. 默认导出

     
     const a = 1
     export { a }

export const a = 1; export const b = 2;

const a = 1; export default a; // 等价于 export { a as default }

**导入模块**
1. 命名导入
2. 默认导入

// 默认导入 import { a } from './module'; // 重新命名 import { a as A } from './module'; // 基本导入 import * as module from './module';