requirejs简单应用

Posted 2020-09-30 zhangjinru123

1、首先导入相应的js文件

    <script src="js/require.js"></script>
    <script src="js/mian.js"></script>
    <script src="js/index.js"></script>

require.js是requirejs的库，mian.js是用来写require配置信息的，而index是写自己的逻辑代码
2、编写mian.js配置信息

require.config({
    baseUrl:‘js/‘,//定义跟路径
    paths:{
        ‘jquery‘:‘jquery‘,
        ‘bootstrap‘:‘bootstrap.min‘,
        ‘utils‘:‘utils‘
    },
    //依赖关系,加载boostrap之前加载jQuery
    shim:{
        ‘bootstrap‘:{
            ‘deps‘:[‘jquery‘]
        }
    }
});

3、然后在自己的index.js文件中实现自己的代码

//单纯的引入jQuery库
    require([ ‘jquery‘], function($) {
        $("body").css({
            "background-color" : "red"
        });
    });

通过依赖关系引入js库

//在mian.js中依赖关系,加载boostrap之前加载jQuery
    shim:{
        ‘bootstrap‘:{
            ‘deps‘:[‘jquery‘]
        }
    }

//然后在自己的index.js
//通过依赖在引入boostrap库时先引入jQuery库
    require([ ‘bootstrap‘], function() {
        $("body").css({
            "background-color" : "red"
        });
    });

4、定义自己的utils.js库

define ([‘jquery‘],function($){
    return {
        change:function(){
            $("body").css({
                "background-color" : "red"
            });
        },
        show:function(){
            alert("show");
        }    
    }
});

//在自己的js文件中

//自定义自己的库，然后引入
require([‘utils‘], function(utils) {
utils.show();
utils.change();
});

资源下载地址：http://download.csdn.net/detail/u013865056/9915553