前端模块化以及AMD和CMD

1.什么是前端模块化？

前端模块化就是将具有完整功能的代码整合起来形成一个单独的功能组件，在需要的地方引入这个组件。

一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。

2.模块化开发的好处？

一个模块一个分支，不会引发代码冲突。

在模块中增加或修改功能，只会影响当前模块，不会影响整个应用。

模块化开发大大提高开发效率。

3.模块化开发的历程

1.函数封装

封装成特定功能的函数模块，直接引用函数名即可。

缺点：会污染全局变量，变量名可能会重复

function m1（）{
    //代码快
}
function m2 () {
    //代码块

}

2.对象方法

为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面.到时直接调用对象属性（module.a2）就好。

缺点：外部可以使用和修改内部变量的值。

var module = function (){
    var count=1;

    a1:function(){

    }
    a2:function(){

    }
}

3.模块化规范

模块化的出现方便了我们使用别人的代码，提高开发效率，但是没有统一的规范。每个人的写法不同将会使代码乱套，所以必须出现规范去统一写法。

4.Common.js

node的出现标志着js模块化编程正式被使用。

4.1 定义模块

var name='bob';

function  youName(){
    console.log(name);

}
function First(){
    var fristName='lily';
    console.log(fristName+"and"+name);

}

module.exports = {        //模块出口
   youName: youName,
    First: First
}

2.模块输出module.exports

3.加载模块require(‘模块名’)；

4.2浏览器环境：

common.js是同步加载模式（阻塞模式），必须从上到下一条一条执行，耗费很长时间，这对于服务端来说不是问题，所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间，但对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态。所以针对浏览器应该采用异步加载模式。

5. AMD (异步模块定义)

AMD是"Asynchronous Module Definition"的缩写（异步模块定义），它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

    1、所有的模块都进行异步加载，模块加载不影响后面语句运行。

    2、所有依赖某些模块的语句均放置在回调函数中，等到加载完成之后，这个回调函数才会执行。

    3、提供全局define 函数（方法）来定义模块，require引入模块，exports导出模块。

AMD也使用require函数引入模块，不同于commom.js,require有两个参数

require([‘模块名’], callback);

6.CMD（通用模块定义）

cmd即“common Module definition”（通用模块定义）

define(function(require,exports,module){...}) ，function是一个函数，提供equire, exports, module三个参数：

    1、require 是一个方法，接受模块标识作为唯一参数，用来获取其他模块提供的接口：require(id)

    2、exports 是一个对象，用来向外提供模块接口

    3、module 是一个对象，上面存储了与当前模块相关联的一些属性和方法

7、AMD和CMD区别

AMD和CMD最大的区别是对依赖模块的执行时机处理不同：

7.1   依赖位置区别 

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

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

7.2 执行顺序

  AMD在加载模块完成后就会执行改模块，所有依赖模块都加载执行完后会进入require的回调函数执行主逻辑，依赖模块的执行顺序和书写顺序不一定一致，主逻辑一定在所有依赖加载完成后才执行。

      CMD加载完某个依赖模块后并不执行，只是下载而已，在所有依赖模块加载完成后进入主逻辑，遇到require语句的时候才执行对应的模块，这样模块的执行顺序和书写顺序是完全一致的。