RequireJS的应用

1.案例1
index.html

<!-- 定义主入口文件 main.js -->
<script data-main="js/main.js" src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>

main.js

console.log("222");

结果如下：

2.案例2

文件目录如下：

index.html

<!-- 定义主入口文件 main.js -->
<script data-main="js/main.js" src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>

test.js

// 定义模块，函数式定义
// 注意：这里引入的require是依赖
define(['require','index'],function(require){
    var init = function(){
        console.log('test init');
    }

    // 这句很重要
    return init;            // 把函数暴露出去
});

index.js

// 定义模块，函数式定义
// 注意：这里引入的require是依赖
define(['require','main'],function(require){
    var index = function(){
        console.log('index');
    }
    return index;
});

main.js

// 定义模块，函数式定义
// 注意：这里引入的require是依赖
define(['require','index'],function(require){
    require(['index','test'],function(index,test){
        console.log(index());
        console.log(test());
    });
});

结果如下：

如果index.js代码修改如下：

// 定义模块，函数式定义
// 注意：这里引入的require是依赖
define(['require','main'],function(require){
    // 注意这样可以导出多个函数
    var index = {};
    index = {
        init:function(){
            console.log('test init');
        }
    };
    return index;
});

main.js修改代码如下：

// 定义模块，函数式定义
// 注意：这里引入的require是依赖
define(['require','index'],function(require){
    require(['index','test'],function(index,test){
        console.log(index.init());
        console.log(test());
    });
});

结果为：