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

一、模块化开发

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

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

   模块无论加载多少次，都只会在第一次加载时运行一次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存。