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: '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
返回数据：
onloaded({
username: 'leo',
name: 'leo zhang',
email: 'test@126.com',
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: '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);
})
},
