前端模块化的理解

模块化简而言之就是一个模块执行一定的功能，当我们在代码中需要这部分功能时不需要重复编写模块代码，而是直接将之前写好的功能模块引入即可。前端模块化就是把复杂的代码分成一个个独立的模块，至于怎么划分模块下面我介绍了几种方法，但是这样又会引来模块与模块之间的依赖问题，所以就有了CommonJS，AMD，CMD规范，最后又出现了webpack。下面我来分别介绍一下。

函数封装

这也是我们之前最习惯的一种写法，将执行一定功能的代码封装在一个函数中，我们在其他需要某个功能的时候直接调用该函数即可。

    function add(num1,num2){
       return num1 + num2;
    }
    var sum = add(2,3);
    console.log(sum);

但是这会造成全局污染或者是同名函数变量名冲突的问题，所以我们可以采用下面这一方法。

对象封装

在面向对象编程中我们习惯将变量和函数封装到一个对象中当作属性和方法来实现，这样就减少了全局污染。

     var obj = {
        val1 : 1,
        val2 : 2,
        add : function(){
            return this.val1 + this.val2;
        }
     };
     var sum = obj.add();
     console.log(sum);

但是这种方法也会造成一种问题，就是在外部可以对封装对象的属性及方法进行修改，为了解决这个问题我们可以参考这个方法。

立即执行函数

立即执行函数将变量和函数封装在一个匿名函数中，然后让它自执行来实现，既减少了全局变量的污染也不会在外界被修改，像这样：

     (function(){
       var val1 = 1,val2 = 2;
       function add(){
          return val1 + val2;
       }
       var sum = add();
       console.log(sum);
    })();

js模块化规范

目前通行的js模块化规范有commonJS，AMD，CMD。

commonJS：同步加载模块，允许模块通过require方法来同步加载所要依赖的其他模块，然后通过exports或module.exports来导出需要暴露的接口。

AMD：异步加载模块，基于RequireJS，里面包含两个函数，define（）用来定义模块，require（）在加载依赖的函数的时候是异步加载，这样浏览器不会失去响应。

CMD：通用模块定义是 SeaJS 在推广过程中对模块定义的规范化产出，一个文件一个模块。推崇依赖就近。

AMD VS CMD

AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块 。

CMD推崇就近依赖，只有在用到某个模块的时候再去require 。

webpack

webpack是一种前端资源模块化管理和打包工具，让各个模块进行加载，预处理，打包。通过loader（加载器）和plugins（插件）对资源进行处理的。

优点：

• 支持commonJS，AMD，CMD规范
• 支持模块加载器
• 通过配置打包成多个文件。利用浏览器的缓存功能提升性能
• 使用模块加载器，支持sass/less等处理器