♫【RequireJS】

目前，通行的Javascript模块规范共有两种：CommonJS和AMD

这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态。因此，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）。这就是AMD规范诞生的背景。

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"

test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <img class="lazy" data-original="http://pic002.cnblogs.com/images/2012/382256/2012080118323766.gif" width="300" height="225">
    <script src="js/require.js" data-main="js/main"></script>
</body>
</html>

main.js

require.config({
    baseUrl: "js",
    paths: {
        "jquery": "lib/jquery",
        "underscore": "lib/underscore",
        "backbone": "lib/backbone"
    },
    shim: {
        'underscore': {
            exports: '_'
        },
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'jquery.lazyload': {
            deps: ['jquery'],
            exports: 'jQuery.fn.lazyload'
        }
    }
})

require(['jquery', 'underscore', 'backbone'], function(/*$, _, Backbone*/aa, bb, cc) {
    console.log(aa)
    console.log($)
    console.log(bb)
    console.log(_)
    console.log(cc)
    console.log(Backbone)
})

require(['math'], function(mathaaa) {
    console.log(mathaaa.add(1, 1))
})

require(['jquery.lazyload'], function(lazyload) {
    //console.log(lazyload)
    $('.lazy').lazyload()
})

math.js

define(function() {
    var add = function(x, y) {
        return x + y
    }
    return {
        add: add
    }
})

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script src="require.js"></script>
    <script>
        requirejs.config({
            baseUrl: 'js/lib',
            paths: {
                app: '../app'
            }
        })
        console.log(requirejs === require)
        requirejs(['app'], function(app) {
        })
    </script>
</body>
</html>