Javascript : require.js 的使用（例子）-优快云博客

本文介绍了一个使用RequireJS进行模块加载和配置的示例，包括如何设置基本URL、路径映射以及自定义模块实现。通过index.html展示了如何加载jQuery并设置背景颜色，以及调用自定义模块显示消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo 结构：

config.js

require.config({
    baseUrl: 'js/lib',
    paths: {
        'jquery' : 'jquery-1.11.1.min',
        'util' : 'util',
        'bootstrap' : 'bootstrap.min',
        'demo' : '../app/demo'
    },
    shim: {
        'util' : {
            exports : 'util',
            deps : ['bootstrap']
        },
    }
});

View Code

自定义模块 demo.js

// 自定义模块
(function(window) {
    var demo = {};

    demo.message = function(msg, type){
        require(['util'], function(u){
            u.message(msg, '', type);
        });
    }

    if (typeof define === "function" && define.amd) {
        define(function(){
            return demo;
        });
    } else {
        window.demo = demo;
    }
})(window);

View Code

index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/require.js"></script>
    <script type="text/javascript" src="js/app/config.js"></script>
</head>
<body>

    <div id="content">content</div>

    <script>
        require(['jquery'], function($){
            $("#content").css("background", '#996699');
        });

        // require(['util'], function(u){
        //     u.message('信息提示', '', 'info');
        // });

        require(['demo'], function(d){
            d.message('内容', 'info');
        });
    </script>

</body>
</html>