ReuqireJS使用方法讲解

我用小例子，写了一些requirejs使用案例，大家可以根据官网自己对照理解一下，非常easy！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script data-main="js/main" src="js/require.js"></script> //设置入口文件，主要配置项在main.js这个入口文件中，
</head>
<body>
    <button id="btn"> click</button>
    <div id="div1" style="display: block;width: 200px;height: 200px;color: red">123123123</div>
    <div id="div2" style="display: block; width: 200px;height: 200px;border: 1px solid red;position: relative"></div>
</body>
</html>

require.config({
    baseUrl:"",//相对于模块文件夹
    paths: {
        jquery: 'jquery-2.1.4.min'
    }
});

require(["jquery","b","a"],function($,app,a){ //在配置项中引入A模块
    new app(); //实例化方法，来执行函数。 
});

define(['jquery','a'],function($,move){ //在define中，如果不在require.config中配置shim，需要用define，如果配置define，则可以直接使用函数，
   var app=function(){
       var btn= $("#btn");
       var div=$("#div1");
       btn.on("click",function(){
           div.css("color","blue");
           move.move();
       })
   };
   return app; //一定要把函数return回去
});
//在需求中，直接引用a模块（a的名称），并在function($,move)中用形参为模块命名，因为a模块返回的是一个对象，即move为a的对象，用move.move()来触发方法

define(["jquery"],function($){ 
    var a={  //使用面向字面量的方式进行组织，把方法放在一个方法中
        move:function(){
            $("#div2").animate({
                width:"400px",
                left:"700px",
                top:"400px",
                background:"blue"
            },1000,function(){
                $("#div2").html("finished");
            });
        }
    };
    return a;
});

当a模块是用方法定义的时候，返回的也是方法，b模块就要做出相应改变，

define(["jquery"],function($){
    var move=function(){
            $("#div2").animate({
                width:"400px",
                left:"700px",
                top:"400px",
                background:"blue"
            },1000,function(){
                $("#div2").html("finished");
            });
    };
    return move; //return是一个方法
});

对应b模块要改变引用方式

define(['jquery','a'],function($,move){
    var app=function(){
        var btn= $("#btn");
        var div=$("#div1");
        btn.on("click",function(){
            div.css("color","blue");
            move();//return是一个方法 ，move形参直接变成了返回的方法
        })
    };
    return app;
});

如果配置了shim，则可以在模块中引用shim对应的方法，类似于自动引用

require.config({
    paths: {
        jquery: 'jquery-2.1.4.min'
    },
    shim: {
        a: { exports: 'a' }  //自动注册了a模块对应的文件，可以不用声明define来声明文件了
    }
});

require(["jquery","b","a"],function($,app,a){
    new app();
});

同时b模块变成了

define(['jquery'],function($){  //没有引用a模块，自动使用
    var app=function(){
        var btn= $("#btn");
        var div=$("#div1");
        btn.on("click",function(){
            div.css("color","blue");
            move()； //直接使用a模块定义的方法
        })
    };
    return app;
});

RequireJS同样支持按需加载
b模块可以改为

define(function(require){ //传入require来加载按需加载
    var app=function(){
        var btn= $("#btn");
        var div=$("#div1");
        var a=require("a");
        btn.on("click",function(){
            div.css("color","blue");
            var move=require("a");  //按需加载a模块，并且命名
            move.move(); //按需加载a模块，并且命名 ，此时对于的是a模块是字面量的形式
        })
    };
    return app;
});

如果a模块是返回函数，则需要直接调用名称

define(function(require){
    var app=function(){
        var btn= $("#btn");
        var div=$("#div1");
        var a=require("a");
        btn.on("click",function(){
            div.css("color","blue");
            var move=require("a");
            move(); //直接调用命名名称
        })
    };
    return app;
});

如果a模块没有使用define，并且配置shim，则可以直接调用函数名，
在RequireJS 2.0中可以不设置shim，来直接调用函数

define(function(require){
    var app=function(){
        var btn= $("#btn");
        var div=$("#div1");
        var a=require("a");
        btn.on("click",function(){
            div.css("color","blue");      
            move(); //直接调用函数名
        })
    };
    return app;
});