requirejs简单应用

Posted zhangjinru123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了requirejs简单应用相关的知识,希望对你有一定的参考价值。

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









以上是关于requirejs简单应用的主要内容,如果未能解决你的问题,请参考以下文章

RequireJS简单介绍即使用

RequireJS简单实用说明

一个极为简单的requirejs实现

requireJS文件夹

一个极为简单的requirejs实现

angularJS使用ocLazyLoad实现js延迟加载