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

一、模块化开发

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.";

6. 模块间相互调用，协同工作，实现某特定功能。

7. AMD规范：Async Module Define 异步模块声明

8. CMD规范：Common Module Define 公共模块声明

9. 模块化的核心价值：模块化最核心的价值在于解决不同文件之间的分工和调用问题，即依赖关系。

10. 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模块无论加载多少次，都只会在第一次加载时运行一次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存。