♫【RequireJS】

RequireJS

 

Javascript模块化编程(一):模块的写法
Javascript模块化编程(二):AMD规范
Javascript模块化编程(三):require.js的用法

 

目前,通行的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>

 

你可能感兴趣的:(requirejs)