前端面试题之模块化开发

​

如今的前端工作中，模块化开发成为主流，无论是前端还是后端，由于模块化开发为我们带来巨大的收益，因此开发者都在使用它。前端培训模块化开发部分的面试题主要考察应试者对几种模块化开发规范的了解，应试者要明白它们之间的异同点，以及所适用的场合。

1、说说你对前端模块化开发的认识。

相关认识如下。

（1）异步模块定义（AMD）规范是 require. js 推广的、对模块定义的规范。

（2）通用模块定义（CMD）规范是 SeaJS 推广的、对模块定义的规范。

（3）AMD 提前执行，CMD 延迟执行

（4）AMD 推荐的风格是通过 module transport 规范暴露接口，即通过返回一个对象暴露模块接口；CommonJs 的风格是通过对 module.exports 或 exports 的属性赋值来达到暴露模块接口的目的。

2、说说你对 CommonJS 和 AMD 的理解。

CommonJS 是服务器端模抉的规范， Node. js 采用了这个规范。CommonJS 规范同步加载模块，也就是说，只有加载完成，才能执行后面的操作。AMD 规范则非同步加载模块，允许指定回调函数。

AMD 推荐的风格是通过 module transport 规范暴露接口，即通过返回一个对象来暴露模块接口， CommonJS 的风格是通过对 module.exports 或 exports 的属性赋值来达到暴露模块对象的目的。

3、模块化开发的好处是什么？

在 Web 开发中，通常将项目的实现划分成许多模块。模块化开发其实就是将功能相关的代码封装在一起，方便维护和重用。另外，模块之间通过 API 进行通信

4、require.js 解决了什么问题？

解决了以下问题。

（1）实现了 JavaScript 文件的异步加载。

（2）有助于管理模块之间的依赖性。

（3）便于代码的编写和维护。

5、前端模块化解决了哪些问题？

解决了以下问题。

（1）各个模块的命名空间独立，A 模块的变量 x 不会覆盖 B 模块的变量 x。

（2）模块的依赖关系，通过模块管理工具（如 webpack、 require.js 等）进行管理。

6、如何实现前端模块化开发？

require. js、 SeaJS 都是适用于 web 浏览器端的模块加载器，使用它们可以更好地组织 Javascript 代码。

7、模块化的 JavaScript 开发的优势是什么？

优势如下。

（1）将功能分离出来

（2）具有更好的代码组织方式

（3）可以按需加载。

（4）避免了命名冲突。

（5）解决了依赖管理问题

8、你了解 CommonJS 规范吗？

定义模块，即一个单独的文件就是一个模块，文件中的作用域独立，文件中定义的变量是无法被其他文件引用的。如果需要使用这些变量，需要将其定义为全局变量（不建议）。

输出模块指模块只有一个接口对象，即使用 module. exports 对象可以将需要输出的内容放入到该对象中。

加载模块指通过 require 加载，例如 var module= require（'/ moduleFile. js），该 module 的值对应文件内部的 module exports 对象，然后就可以通过 module 名称引用模块中暴露的接口变量或接口函数了。

9、谈谈你对 CMD（ Common module Definition，通用模块定义）规范的理解。

就近依赖，需要时再进行加载，所以执行顺序和书写顺序一致；这一点与 AMD 不同，AMD 是在使用模块之前将依赖模块全部加载完成，但由于网络等其他因素可能导致依赖模块下载的先后顺序不一致，这就造成执行顺序可能与书写顺序不一致。

10、你了解 EMAScript 6 模块规范吗？

相关了解如下。

（1）类似于 Commonjs，语法更简洁

（2）类似于 AMD，直接支持异步加载和配置模块加载

（3）对于结构可以做静态分析、静态检测。

（4）比 CommonJS 更妤地支持循环依赖。

11、为什么要通过模块化方式进行开发？

原因如下。

（1）高内聚低耦合，有利于团队开发。当项目很复杂时，将项目划分为子模块并分给不同的人开发，最后再组合在一起，这样可以降低模块与模块之间的依赖关系，实现

低耦合，模块中又有特定功能体现高内聚特点。

（2）可重用，方便维护。模块的特点就是有特定功能，当两个项目都需要某种功能时，定义一个特定的模块来实现该功能，这样只需要在两个项目中都引入这个模块就能够实现该功能，不需要书写重复性的代码。

另外，当需要变更该功能时，直接修改该模块，这样就能够修改所有项目的功能，维护起来很方便。

12、AMD 与 CMD 的区别是什么？

区别如下

（1）对于依赖的模块，AMD 提前执行，CMD 延迟执行，不过 require.JS 从 2.0 版本开始，也改成可以延迟执行（根据写法不同，处理方式不同）。

（2）CMD 推崇依赖就近，AMD 推崇依赖前置。

13、为什么需要前端模块化？

JavaScript 以前只用于实现网页的特效、表单的验证等简单的功能，只需要少量的代码就可以完成这些功能。但随着技术的发展，需要使用 JavaScript 处理越来越多的事情，以前许多本来由后台处理的内容都转移到前端来处理，这使代码量急剧膨胀。

如果还是像以前一样书写代码，那么对于后期的维护将非常困难。同时在开发中，我们难免会需要一些“轮子”，如果没有模块（ Model）这个概念，我们将很难简便地使用别人制造的“轮子”。

所以，我们需要前端模块化。

14、前端模块化是否等同于 JavaScript 模块化？

前端开发相对其他语言来说比较特殊，因为我们实现一个页面功能总是需要 JavaScript、CSS 和 HTML 三者相互交织。

如果一个功能只有 JavaScript 实现了模块化， CSS 和 Template 还处于原始状态，那么调用这个功能的时候并不能完全通过模块化的方式，这样的模块化方案并不是完整的。

所以我们真正需要的是一种可以将 JavaScript 、CSS 和 HTML 同时都考虑进去的模块化方案，而非只使用 JavaScript 模块化方案。综上所述，前端模块化并不等同于 JavaScript 模块化。

15、JavaScript 模块化是否等同于异步模块化？

主流的 JavaScript 模块化方案都使用“异步模块定义”的方式，这种方式给开发带来了极大的不便，所有的同步代码都需要修改为异步方式。

当在前端开发中使用“ CommonJs”模块化开发规范时，开发者可以使用自然、容易理解的模块定义和调用方式，不需要关注模块是否异步，不需要改变开发者的开发行为。因此 JavaScript 模块化并不等同于异步模块化。

16、require.JS 与 SeaJS 的异同是什么？

相同之处如下。

require.JS 和 SeaiJS 都是模块加载器，倡导的是一种模块化开发理念，核心价值是让 JavaScript 的模块化开发变得更简单自然。

不同之处如下。

（1）定位有差异。require.JS 想成为浏览器端的模块加载器，同时也想成为 rhino/node 等环境的模块加载器。SeaJS 则专注于 Web 浏览器端，同时通过 node 扩展的方式可以很方便地运行在 Node 服务器端

（2）遵循的规范不同。require.JS 遵循的是 AMD 规范， SeaJS 遵循的是 CMD 规范。规范的不同，导致了两者 API 的不同。SeaJS 更简洁优雅，更贴近 CommonJS Modules/1.1 和 Node Modules 规范。

（3） require.JS 尝试让第三方类库修改自身来支持 require.JS。SeaJS 不强推，采用自主封装的方式来“海纳百川”。

17、系统在设计上遵循几个原则？

遵循以下原则

（1）在编译时纳入所有依赖。

（2）去中心化，实现分布式

（3）内置命名和封装。

18、什么是模块化规范？

服务器端规范主要是 CommonJS, Node.js 用的就是 CommonJS 规范客户端规范主要有推崇依赖前置的 AMD 和推崇依赖就近的 CMD。AMD 规范的实现主要有 require.js。

CMD 规范的主要实现有 SeaJS。但是 SeaJS 已经停止维护了，因为在 EMAScript 6 中提供了 EMAScript Module 模块化规范，随着 EMAScript 6 的普及，第三方的模块化规范的实现将会慢慢地被淘汰。

原创作者：web 前端开发

​