requireJS简介

1.传统代码的缺陷

传统的用script标签导入的JS文件，有可能会阻塞页面渲染，
而且正常我们开发的时候会导入JS文件，
都会用script标签，很容易造成混乱，不容易维护

什么是模块化

1.随着网页越来越复杂，网页中引入的JS文件也就越来越多，单纯的用script引入js文件，
已经满足不了我们的需求。我们需要要团队协作，模块分离。

2.模块化是指在处理某些问题时,按照一种分类或思想功能进行模块化管理和使用。

3.设计一个模块化需要具备的能力
<li> 具有定义封装的能力 </li>
<li> 具有定义依赖新模块的能力，可以引入其他模块的能力 </li>

模块化的演变

1.平时我们把功能写在普通函数中，缺点：容易造成函数明明冲突

    function fn1(){}
    function fn2(){}

2.为了解决明明冲突的问题，可以用对象来封装函数，缺点：外部可以通过MyModule.count来操作count属性

    var MyModule = new Object({
        count = 0,
        fn1: function (num){
            return count += num;
        },
        fn2: function (num){
            return count -= num;
        }
    })

3.匿名函数闭包（这种方式已经是模块化变成的雏形了，能够实现功能的封装，也能够隐藏私有变量）

    var MyModule = (function(){
        var count = 0;
        var fn1 = function (num) {
            return count += num;
        }
        var fn2 = function (num){
            return count -=num;
        }
        return {
            fn1:fn1,
            fn2:fn2
        }
    })();

模块化变成规范

<li>AMD</li>

AMD是requireJS在推广中对模块化编程规范的产出

特点：对于依赖的模块，AMD是提前执行，异步加载

推崇：AMD推崇依赖前置

define(['a','b'],function(){
    //依赖必须写好才能用
    a.doSomething();
    b.doSomething();
})

CMD是seaJS在推广中对模块化变成规范的产出

特点：CDM是延时加载

推崇：CMD推崇依赖就近

define(function(require,exports,modules){
    //依赖就行书写
    var a = require("a");
    a.doSomething();
    var b = require("b");
    b.daSomething();
});

总结：这些规范目的都是为了更合理的去实现模块化变成，贴别是在浏览器中，大部分都支持模块化编程

requireJS 的基本API

一.requireJS有三个变量：(requirejs，require，define)

其中：requirejs和require是一个意思，我们一般使用require就可以，require是加载模块用的，
而且加载模块后，还可以执行回调函数

define：是定义模块（一个模块就是功能一个js文件）

二.如何使用requireJS

1.使用define定义模块

2.通过require方法来加载模块

require(['js/sayHello'])
注意：sayHello相当于sayHello.js   .js可以不写

//还可以设置回调函数
require(['js/sayHello'],function(){
    alert("加载完毕");
})

//如果该模块有导出内容的话，需要在回调函数中写上形参
require(['js/sayHello',function(say){
    alert("加载完毕！" + say);
}])

3.通过require.config来配置路径，通过require.config不仅能加载本地问价，
还可以加载网络文件

require.config({
    path:{
        jquery:'http//libs.baidu.com/jquery/2.0.0/jquery',
        say:'js/say'
    }
});
require(['jquery','say'],function($){
    $(function(){
        alert("加载完毕！");
    });
});