面试官：请描述一下前端模块化

科技网编2023-06-04 10:292350

但是由于同步加载更适合服务端,模块化的好处同步加载:其内部定义的变量是属于这个模块的，的核心思想就是通过方法来同步加载所要依赖的其他模块，然后通过或者 mode.来导出需要暴露的接口;模块加载机制;采用同步加载不同模块文件,适用于服务端因为模块文件都存放在服务器的各个硬盘上,等模块异步加载完成后即可调用回调函数// main.js// 使用模块require(["jquery"

模块化的开发方式可以提高代码的服用效率，方便进行代码的管理。模块化主要体现的是一种分而治之的思想。分而治之是复杂系统开发和维护的基石，模块化则是前段最流行的分治阶段。

描述加载中_好友名片加载中..._天猫显示描述加载中

.jpg模块化简介

具有相同属性和行为的事物的集合，在前端中，将一些属性比较类似和行为比较类似的内容放在同一个 JS 文件里面，把这个 JS 文件称为一个模块，为了每个 JS 文件只关注自身有关的事情，让每个 JS 文件各行其职

模块化要有几个特点：独立，完整，依赖关系

在最开始的阶段，JS 并没有模块化机制，各种 JS 到处飞，也就是所谓的野生代码，得不到妥善的管理。后来前端圈开始制定规范，最耳熟能详的是和AMD。**node.js**就是规范的产物。但是由于同步加载更适合服务端，所以迫切需要一个关于客户端的规范，既又出现了很多客户端，耳熟能详的AMD

模块化的实现模块化开发怎么做

立即执行函数,不暴露私有成员

var module1 = (function() {
  var _count = 0
  var m1 = function() {
    //...
  }
  var m2 = function() {
    //...
  }
  return {
    m1: m1,
    m2: m2
  }
})()

模块化的好处同步加载

描述加载中_好友名片加载中..._天猫显示描述加载中

.png

根据规范，每一个文件就是一个模块，其内部定义的变量是属于这个模块的，不会对外暴露，也就是说不会污染全局变量。

该规范最初是用来服务器端的 node，前端的也是对原生支持

的核心思想就是通过方法来同步加载所要依赖的其他模块，然后通过或者 mode.来导出需要暴露的接口

使用

// index.js
var module = require('module.js)
module.aa('hello')

// module.js
module.exports = {
  aa: function (str) {
    console.log(str)
  }
}

特点

命令的基本功能是，读取并执行一个文件，然后返回该模块的对象。如果没有发现指定模块，会报错！

模块加载机制

模块的加载机制是，输入的是被输出的值的拷贝。也就是说，一旦输出一个值，模块的内部变化就影响不到这个值

// module.js
let counter = 3;
function addCounter() {
  counter++;
}
module.exports = {
  counter: counter,
  addCounter: addCounter
};

// index.js
let counter = require("module.js").counter;
let addCounter = require("module.js").addCounter;

console.log(counter); // 3
addCounter();
console.log(counter); // 3

上面的代码说明，当.js中的值被输出之后，模块内部的变化已经就影响不到这个值了。这是因为是一个原始类型值，会被缓存。除非写成一个函数，才能得到内部变动的值

注意: 浏览器不兼容，原因是浏览器缺少、、、四个环境变量。如要使用需要工具转换。

采用同步加载不同模块文件，适用于服务端因为模块文件都存放在服务器的各个硬盘上，读取加载时间快，适合服务端，不适应浏览器

异步加载 AMD

好友名片加载中..._描述加载中_天猫显示描述加载中

.png

为服务器端而生，采用的同步加载方式。因此不适用与浏览器。因为浏览器需要到服务器加载文件，请求时间远大于本机读取时间，倘若文件较多，网络迟缓就会导致页面瘫痪，所以浏览器更希望能够实现异步加载的方式。

AMD 规范是实现异步加载模块，允许指定回调函数，等模块异步加载完成后即可调用回调函数。

AMD 的核心思想就是通过来定义一个模块，然后使用来加载一个模块

使用

// main.js
// 使用模块
require(["jquery", "math", "module"], function($, math) {
  // your code
});

// math.js
// 定义没有依赖的模块
define(function() {
  // your code
  return 模块;
});

// module.js
// 定义有依赖的模块
define(["module"], function() {
  return 模块;
});

AMD 模块定义的方法非常清晰，不污染全局环境，能够清除的显示依赖关系。AMD 模式可以用于浏览器环境，并且允许非同步加载模块，也可以根据需要动态加载模块。

异步加载 CMD

好友名片加载中..._描述加载中_天猫显示描述加载中

.png

CMD 异步加载，跟 AMD 的主要区别在于，AMD 依赖前置，提前加载依赖。而 CMD 就近加载，按需加载。

CMD 的核心思想就是通过来定义一个模块，然后使用来加载一个模块。

使用

// module1.js
// 定义没有依赖的模块
define(function(require, exports, module) {
  exports.xxx = val;
  module.exports = value;
});

// module2.js
// 定义有依赖的模块
define(function(require, exports, module) {
  // 引入依赖模块(同步)
  let module1 = require("./module1.js");
  // 引入依赖模块(异步)
  require.async("./module1.js", function(m1) {
    // your code
  });
  // 暴露模块
  exports.xxx = value;
});

// index.js
define(function(require) {
  let m1 = require("./module1");
  let m2 = require("./module2");
  m1.show();
  m2.show();
});

ES6 模块化

天猫显示描述加载中_好友名片加载中..._描述加载中

.png

ES6 自带模块化，可以使用关键字引入模块，通过关键字导出模块，功能较之前的几个方案更为强大，也是我们所推崇的，但是 ES6 目前无法在浏览器中执行，所以，我们只能通过 babel 将不被支持的编译为当前受到广泛支持的

使用

// index.js
import tool from "tool.js";

// tool.js
export class show {
  // 导出
  constructor() {
    this.age = 18;
  }
  showName() {
    return this.age;
  }
}