1 RequireJS初步試用

1.1 基本使用

Define定義模塊
定義模塊語法如下，3個參數(shù)分別為模塊名，模塊依賴，模塊實現(xiàn)function。在function中返回一個對象，如下面例子中返回trim方法

define('helper', ['jquery'], function($) {
    console.log('helper');
    return {
        trim: function(str) {
            return $.trim(str);
        }
    };
});

Require加載模塊
通過如下代碼加載模塊，參數(shù)為模塊名的數(shù)組，模塊的實現(xiàn)function

require(['helper'], function(helper) {  
    var str = helper.trim('  amd  ');
    console.log(str);
});

加載文件
RequireJS以一個相對于BaseUrl的地址來加載代碼
設(shè)置 baseUrl，在app.js中設(shè)置baseUrl，這樣就定義了模塊的base路徑

require.config({
    baseUrl: './js'
})
require(['helper'], function(helper) {
    
    var str = helper.trim('  amd  ');
    console.log(str);
});

加載機制
RequireJS使用head.appendChild()將每一個依賴加載為一個script標簽。并且加載即執(zhí)行。
通過控制臺可以看到加載helper時是用的javascript，加載后就執(zhí)行console.log('helper');

1.2 配置路徑

將require.js及jquery.js放到lib目錄下
此時helper.js加載的依賴需要改成./lib/jquery，通過控制臺可以發(fā)現(xiàn)，此時雖然jquery加載成功，但$對象為undefined

define('helper', ['./lib/jquery'], function($) {
    console.log($);
    return {
        trim: function(str) {
            return $.trim(str);
        }
    };
});

這是因為這樣加載jquery對象名為./lib/jquery，而在jquery定義中其定義了對象名為jquery

if ( typeof define === "function" && define.amd ) {
    define( "jquery", [], function() {
        return jQuery;
    });
}

配置模塊路徑如下，模塊名：模塊路徑，然后再helper.js加載時仍然用['jquery']，path中的jquery后面可以跟數(shù)組，按順序嘗試加載

require.config({
    baseUrl: './js',
    paths:{
        'jquery': 'lib/jquery'
    }
})

1.3 定義模塊

模塊定義可以通過函數(shù)模式，如上面helper模塊的定義。
也可以通過簡單對象的方式

define({
    username: 'leo',
    name: 'leo zhang',
    email: 'test@126.com',
    gender: '男'
});

首頁添加按鈕<button class="btn btn-default" id="user">獲取用戶信息并打印</button>
修改app.js，通過jquery獲取user按鈕，綁定click事件，通過api獲取user，并在then中將其打印

require(['jquery'], function($) {
    
    $('#user').click(function () {
        api.getUser().then(function (user) {
            console.log(user);
        })
    })
});

定義app.js，返回user，

define(['jquery'], function($) {
    return {
        getUser: function() {
            var def = $.Deferred();
            require(['./app/user'], function(user) {
                def.resolve(user);
            });
            return def;
        }
    }
});

修改app.js，添加api依賴

require(['jquery','./app/api1'], function($,api) {
    
    $('#user').click(function () {
        api.getUser().then(function (user) {
            console.log(user);
        })
    })
});

2 requirejs配置

2.1 配置不支持AMD

加載不支持AMD的庫，如Modernizr.js
加載不支持AMD的框架，如bootstrap
shim配置方法如下

在app.js中，首先在path中引入，然后再shim中進行配置

    paths:{
        'jquery': 'lib/jquery',
        'bootstrap': 'lib/bootstrap',
        'modernizr': 'lib/modernizr'
    },
    shim: {
        'modernizr': {
            exports: 'Modernizr'
        },
        'bootstrap': ['jquery']
    }

2.2 JSONP

跨域遠程地址：http://www.baidu.com/user?callback=onloaded
返回數(shù)據(jù)：

onloaded({
    username: 'leo',
    name: 'leo zhang',
    email: 'test@126.com',
    gender: '男'
});

傳統(tǒng)JSONP實現(xiàn)
將app.js中獲取數(shù)據(jù)改為api.getUserByJsonp();，定義ajax的jsonp請求，并定義全局的onload方法（jquery中已經(jīng)定義了onloaded方法，通過success可以取到data）

        getUserByJsonp: function() {
            $.ajax({
                url: 'http://localhost:8066/src/main/resources/static/src/js/jsonp/user.js',
                dataType: 'jsonp',
                jsonpCallback: 'onloaded',
                success: function (data) {
                    console.log(data);
                }
            })
        }
...
function onloaded(user) {
    console.log(user);
}

requirejs實現(xiàn)
RequireJS需要返回數(shù)據(jù)為define

define({
    username: 'leo',
    name: 'leo zhang',
    email: 'test@126.com',
    gender: '男'
});

請求方式如下

        getUserByJsonp: function() {
            
            require(['http://localhost:8066/src/main/resources/static/src/js/jsonp/user-amd.js'], function(user) {
                console.log(user);
            })
        },