require.js学习笔记

require.js主要解决两个问题：
① 实现javascript异步加载，避免页面假死
② 管理模块之间的依赖性，便于代码编写与维护

1、首先连接require.js文件
为了避免引起阻塞可以放在底部

<script data-main="js/config" src="http://cdn.bootcss.com/require.js/2.2.0/require.js"></script>

data-main有两个作用：
（1）require文件加载完毕之后立即执行data-main的内容
（2）data-main的路径将作为js文件默认目录，可以通过RequireJS config手动设置中baseUrl参数修改

*通过require引入js文件不需要写后缀名，当然也不能写后缀名

2、配置文件-config.js

config.js

require.config({
    baseUrl：'js',
    paths : {
        jquery: ["http://cdn.bootcss.com/jquery/3.1.0/jquery",'jquery'],
        zch : "app/zch"
    }
});

config.js作为配置文件，统一js文件引入的入口，paths参数可以设置一个简短的字段对应相应的需要引入的文件，引入的文件可以以数组的形式，比如上面的jquery，如果外部链接引入失败将会自动引入内部文件

3、define-定义模块
写在单个js文件里面，分为有依赖和没有依赖

a.js

//无依赖
//如果一个模块仅含值对，没有任何依赖，则在define()中直接定义这些值
define({
    add:function (x,y){
        return x+y;
    },
    minus:function(x,y){
        return x-y;
    }
});

b.js

//有依赖
define(["jquery"], function($) {
    var tt=$('.tt').text();
    return {
            add:function (x,y){
                var he=x+y;
                return "和的值为:"+he;
            },
            minus:function(x,y){
                var cha=x-y;
                return "差的值为："+cha;
            },
            display:function(){
                console.log(tt);
            }
    };
});

4、加载模块

require(['jquery','a','zch'],function($,a,z){
    $('.menu ul li:odd').css('background','red');
    a.display();
    var num2=a.add(10,20);
    console.log(num2);
});

require加载模块有两个参数，第一个是数组，就是要加载模块的名称，在配置文件和模板文件里都是这个格式，如果在配置文件里那么数组里面的名字就是paths里面定义好的，如果没有定义好就是相对应的js文件的名称，第二个就是回调函数了，加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块;重复引用的模块只会加载一个

5、shim
require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，这样的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。

//config.js
require.config({
    baseUrl:'js',

    paths : {
        jquery: "http://cdn.bootcss.com/jquery/3.1.0/jquery",
        zch : "app/zch"
    },
    shim:{
        'c':{
            deps:['jquery']
        }
    }
});
require(['c'],function(c){
    /*$('.menu ul li:odd').css('background','red');
    a.display();
    var num2=a.add(10,20);
    console.log(num2);*/
    console.log(c.name);
});

//c.js
define({
    name:'namanma'
})