码迷,mamicode.com
首页 > Web开发 > 详细

requirejs简单应用

时间:2017-07-30 19:10:01      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:download   文件中   return   css   detail   csdn   conf   编写   自定义   

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简单应用

标签:download   文件中   return   css   detail   csdn   conf   编写   自定义   

原文地址:http://www.cnblogs.com/zhangjinru123/p/7259838.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!