Javascript : require.js 的使用（例子）

時間 2019-11-06

標籤 javascript require.js require 使用例子欄目 JavaScript 简体版

原文原文鏈接

demo 結構：javascript

config.jscss

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.jshtml

// 自定義模塊
(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.htmljava

<!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>