一 什么是模块？

我们在日常的开发中，经常使用诸如webpack,requireJS,seaJS 等前端资源模块化管理工具，这些工具让我们在开发的过程中，基于"模块"进行代码的编写。那么到底什么是模块化呢？

模块化: 完成一个特定功能或者包含完成某项任务所包含的所有内容的一种组织形式。维基百科，实际上可以理解为模块化就是一组能够实现某项功能的代码的集合。

随着前端程序越来越复杂，前端模块化编程越来越变成一种迫切的需求。前端模块化的好处有很多，其中我认为最主要的一个优点就是能很好管理作用域。而且使用模块化来组织代码，也让代码的可读性变得很强。下面我们来对模块化的一些基础知识就行一些阐述。

二 创建模块

来看下面一段代码

(function () {
    let name = 'xxx'
    let age = 12 
    function sayHello () {
        console.log(`my name is ${name}`)
    }
})()

我们在上述代码中创建了一个立即执行函数，然后在函数中创建了变量和方法。由于作用域的限制，我们不能在外界访问到该函数内部的变量和方法。而根据作用域的概念，函数内部可以访问到全局的变量。
我们仔细思考可以看出，实际上上面的代码就粗略创建了一个模块。把实现某一功能的方法都放在了模块之中。而且外部也不能更改内部的私有变量和方法。并且我们还能传递变量给这个函数。

2.2 为模块传入变量

(function ($,Vue) {
  //使用vue或者jquery做一些事情
})(Jquery,Vue)

2.3 模块导出

有了传入内容，那么随之而来的肯定也有传出内容，那么怎么要从function中传出内容呢，这个一定非常熟悉，即使用return来传出内容。下面我们来看一个demo

const myModule = (function($){
   var my = {}
   privateVariable = 'xxx'
   function privateFunc () {
    xxxxx
   }
   my.publicVariable = 'ooo'
   my.publicFunc = function () {
     YYYY
   }
 return my
})($)

分析一下上述demo，我们可以看到该模块暴露出了一个变量myModule.publicVariable和一个方法myModule.publicFunc。而private变量和方法是我们外界访问不到的。这样我们就能把想要的传入到模块中来，把需要暴露出的接口暴露出去，不想被外界访问的接口外界也无法访问，这就是一个模块。