我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

前言

JavaScript自诞生以来直至今日，发展十分迅猛，前景也被当前了解JavaScript的伙伴们所看好，JavaScritp所涉及的领域现在基本可以说是全覆盖，而其中最为基础也是最为重要的一点就是模块化，它每一个JavaScript必须要学会的，下面我们来看一下模块化的优点

1. 代码易复用，其他项目使用某一模块直接拿过去即可
2. 模块之间相对比较独立,多人合作开发项目代码互不影响
3. 单个模块出现问题，并不会影响到其他模块的运行，也方便对单个模块的代码维护及调优

任何一个东西有优点也必然有缺点,我们需要在开发过程中应该尽量避开这些缺点

1. 模块之间应避免相互依赖,相互依赖如某一模块出现问题,依赖该模块的模块将失效

常用的模块化使用方法

当前市面上有很多种模块化规范,例如:CommonJS、AMD、CMD、ES6模块化的规范,下面我给大家看一下常用的CommonJS和ES6的用法,在通过JavaScript手动实现一个模块化

CommonJS方式

//导出
module.exports={ a:1};
//导入
const UTIL=require('文件路径名')

ES6模块化方式

//导出
export let hody='正值初夏';
//导入
import ESUTIL from '文件路径名';

模块化原理

上面只讲了最常用的方法,下面我们通过JavaScript实现一下模块化,了解模块化的原理

我们创建俩个文件,分为A.js和B.js,进行引入同一个html文件进行使用

<script src="../A.js"></script>
 <script src="../B.js"></script>

A.js

var name = "前端";
setTimeout(function () {
   console.log(name);
}, 1000)

B.js

var name = "JavaScript";
console.log(name);

这个使用,我们A文件和B文件都使用到了一个name的变量，但是A文件比B文件延迟了1秒打印，此时答案是什么呢，我们所需要的是A.js打印的是前端，B.js打印的是JavaScript，但是他们都打印成了JavaScript，这是因为B文件比A文件晚执行，把同名变量给覆盖掉了,此时我们该如何去解决

在没有模块化的时代,我们通常是采用闭包的方式,创建一个闭包环境是防止模块之间的变量污染,命名冲突,但是这种方式尽量不要有返回值

<script src="../A.js"></script>
 <script src="../B.js"></script>

A.js

(function () {
var name = "前端";
setTimeout(function () {
   console.log(name);
}, 1000);
})();

B.js

(function () {
var name = "JavaScript";
console.log(name);
})();

此时的打印的name，A.js是前端，B.js是JavaScript，俩个文件互相不干扰了

其实也就是利用了，闭包会记录当前函数执行环境的特点实现的，我们还有很多方法可以实现，但是这种方法是我认为最为通俗易懂的，能够让我们快速了解js模块化的原理!