浅谈前端的模块化开发理解

灰太狼 2023-07-17 14:05 30阅读 0赞

#### 一、模块化开发 ####

1.  **定义**：具有相同属性和行为的事物的集合
2.  在前端中，将一些属性比较类似和行为比较类似的内容放在同一个`js`文件里面，把这个`js`文件称为模块
3.  **目的**：为了每个`js`文件只关注与自身有关的事情，让每个`js`文件各行其职
4.  **模块化**：指的就是遵守`commonjs`规范，解决不同`js`模块之间相互调用问题
5.  **CommonJS**：

*  `A.js`文件中调用另一个`B.js`文件，一定要在`A.js`中引入`B.js`  
    `require("B.js");`
 *  另一个被调用的`js`，也就是`B.js`一定要对外提供接口。  
    `module.exports=B;`

**B.js**

var b = "Hello,I'm module B.";
    module.exports = b;//暴露一个接口，与b对接。这个接口既可以是函数，也可以是对象，甚至是数组。

**A.js**

var _b = require("./B.js");//实际过程中应当是B.js相对于A.js的路径，这比使用绝对路径去获取要规范得多//此时_b获得了B.js的接口，这个接口指向B.js中的变量bconsole.log( _b );//"Hello,I'm module B.";

1.  模块间相互调用，协同工作，实现某特定功能。
2.  **AMD**规范：`Async Module Define` 异步模块声明
3.  **CMD**规范：`Common Module Define` 公共模块声明
4.  模块化的核心价值：**模块化最核心的价值在于解决不同文件之间的分工和调用问题，即依赖关系**。
5.  `requireJS`和`SeaJS`都是在前端实现模块化，相当于一个前端的`js`模块化加载器，和`webpack`不一样，`webpack`是通过`nodejs`将文件打包的。

#### 二 、 ES6模块和 CommonJS 模块有哪些差异？ ####

1.  `CommonJS` 模块是运行时加载，`ES6`模块是编译时输出接口。  
    2.`CommonJS` 模块输出的是一个值的拷贝，`ES6`模块输出的是值的引用。
2.  `ES6`模块自动采用严格模式，无论模块头部是否写了 `"use strict";`
3.  `require`可以做动态加载，`import`语句做不到，`import`语句必须位于顶层作用域中。
4.  `ES6`模块的输入变量是只读的，不能对其进行重新赋值。
5.  当使用`require`命令加载某个模块时，就会运行整个模块的代码。
6.  当使用`require`命令加载同一个模块时，不会再执行该模块，而是取到缓存之中的值。也就是说，`CommonJS`模块无论加载多少次，都只会在第一次加载时运行一次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存。