RequireJS

1 RequireJS初步试用

1.1 基本使用

Define定义模块
定义模块语法如下，3个参数分别为模块名，模块依赖，模块实现function。在function中返回一个对象，如下面例子中返回trim方法

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

Require加载模块
通过如下代码加载模块，参数为模块名的数组，模块的实现function

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

加载文件
RequireJS以一个相对于BaseUrl的地址来加载代码
设置 baseUrl，在app.js中设置baseUrl，这样就定义了模块的base路径

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

加载机制
RequireJS使用head.appendChild()将每一个依赖加载为一个script标签。并且加载即执行。
通过控制台可以看到加载helper时是用的javascript，加载后就执行console.log('helper');

1.2 配置路径

将require.js及jquery.js放到lib目录下
此时helper.js加载的依赖需要改成./lib/jquery，通过控制台可以发现，此时虽然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后面可以跟数组，按顺序尝试加载

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

1.3 定义模块

模块定义可以通过函数模式，如上面helper模块的定义。
也可以通过简单对象的方式

define({
    username: 'leo',
    name: 'leo zhang',
    email: '[email protected]',
    gender: '男'
});

首页添加按钮
修改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
返回数据：

onloaded({
    username: 'leo',
    name: 'leo zhang',
    email: '[email protected]',
    gender: '男'
});

传统JSONP实现
将app.js中获取数据改为api.getUserByJsonp();，定义ajax的jsonp请求，并定义全局的onload方法（jquery中已经定义了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实现
RequireJS需要返回数据为define

define({
    username: 'leo',
    name: 'leo zhang',
    email: '[email protected]',
    gender: '男'
});

请求方式如下

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