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

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>
View Code

 

源码

拓展：

（一）http://www.cnblogs.com/KeenLeung/p/6386434.html

（二）http://www.cnblogs.com/KeenLeung/p/6386468.html

（三）http://www.cnblogs.com/KeenLeung/p/6386559.html

============ end

 

posted @ 2017-02-10 15:44  KeenLeung  阅读(402)  评论(0)    收藏  举报