require.js 入门讲解（二）

最新推荐文章于 2025-02-06 07:38:23 发布

转载最新推荐文章于 2025-02-06 07:38:23 发布 · 262 阅读

本文介绍Require.js的基本使用方法，包括AMD模块加载方式、非AMD模块的兼容处理及实际开发中的配置与应用实例。

require.js使用AMD体系，采用异步方式加载模块，即模块的加载不影响，加载代码后面语句的运行，采用回调函数方式在模块加载完毕后执行回调函数，语法如下示意：

require([module], callback);

该语法说明如下：

module代表需要加载的模块，多个模块采用数组方式表示，依次加载，实际加载的代码如下示意：

require(['math','Eng'], function (math) {
　　　　math.add(2, 3);
Eng.say('hello');
　　});

采用require.js语法更适合浏览器的运行环境，因为模块代码来自远端服务器，受网络运行环境影响，代码的下载即加载速度都可能比较缓慢，因此需要AMD方式，异步的进行代码的加载与运行；

node.js的模块加载代码：var math = require('math');采用CommonJS的方式，适合在服务器端环境运行，在浏览器环境中可能导致模块加载的卡顿。因此在浏览器环境中采用var math = require('math')加载模块是错误的方式；

二、采用require.js加载模块

理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合。那么，require.js是否能够加载非规范的模块呢？

回答是可以的。

这样的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。

举例来说，underscore和backbone这两个库，都没有采用AMD规范编写。如果要加载它们的话，必须先定义它们的特征。

非AMD模块加载语法示例：

require.config({
　　　　shim: {
　　　　　　'underscore':{
　　　　　　　　exports: '_'
　　　　　　},
　　　　　　'backbone': {
　　　　　　　　deps: ['underscore', 'jquery'],
　　　　　　　　exports: 'Backbone'
　　　　　　}
　　　　}
　　});

实际开发环境中，require加载示例：

//=====================模块加载配置======================
requirejs.config({
baseUrl: '/Scripts',
paths: {
app: '/Scripts/app',
jquery: '/Scripts/jquery-1.10.2.min',
'jquery.ui': '/Scripts/jquery-ui.min',
'jquery.validate.min': '/Scripts/jquery.validate.min',
'jsGrid': '/Scripts/jsgrid.min'
},
shim: {
'jsGrid': {
deps: ['jquery']
},
'jquery.validate.min': {
deps: ['jquery']
}
}
});
//==========================加载主模块====================
requirejs(['app/main']);

模块定义示例：

//======================定义应用层面的模块=====================
define(["jquery", "jquery.ui", "jsGrid", 'jquery.validate.min'], function ($,ju,jsGrid,jv) {
var formSubmitHandler = $.noop;
var datas = { "name": "test", "password": "test" };
var editItem = { Name: '', Age: '', Address: '', Country: '', Married: '' };
var oprResult = false;
var showDetailsDialog = function (dialogType, client) {
$("#name").val(client.Name);
$("#age").val(client.Age);
$("#address").val(client.Address);
$("#country").val(client.Country);
$("#married").prop("checked", client.Married);
$("#detailsDialog").dialog("option", "classes.ui-dialog", "highlight");
buttons = [{
text: "Ok",
icon: 'ui-icon-mail-open',
type: "submit",
value:"submit",
click: function () {
//$(this).dialog("close");
oprResult = true;
//$("form").validate().form();
if ($("#detailsForm").valid())
{
values = { Name: $("#name").val(), Age: $("#age").val(), Address: $("#address").val(), Country: $("#country").val(), Married: $("#married").prop("checked") };
editItem = $.extend(editItem, values);
submitData(editItem);
}
}
}];
var dl = $("#detailsDialog").dialog("option", "buttons", buttons);
dl.dialog("open");
};
var submitData = function (e) {
var i = $.Deferred();
updateData = { Name: e.Name, Age: e.Age, Country: e.Country, Address: e.Address, Married: e.Married };
$.ajax({
url: '/Grid/UpdateData',
type: 'put',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(updateData)
}
).done(function (e) {
alert('update data successed');
i.resolve(e);
$("#detailsDialog").dialog("close");
}).fail(function (e) {
alert('update failed!');
});
return i.promise();
};
var saveClient = function (client, isNew) {
$.extend(client, {
Name: $("#name").val(),
Age: parseInt($("#age").val(), 10),
Address: $("#address").val(),
Country: parseInt($("#country").val(), 10),
Married: $("#married").is(":checked")
});
$("#jsGrid").jsGrid(isNew ? "insertItem" : "updateItem", client);
$("#detailsDialog").dialog("close");
};
var loadData = function (e) {
var d = $.Deferred();
//=================服务端分页需要将页面索引传递到服务端=======================
pageSize = e.pageSize;
pageIndex = e.pageIndex;
$.ajax({
url: '/Grid/IndexData',
type: 'post',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(datas)
}
).done(function (e) {
alert('load data successed');
//===========================服务端分页的话就没必要取子集了=========================
subdata = e.slice(pageSize * (pageIndex - 1), pageSize * pageIndex);
pagingdata = { data: subdata, itemsCount: e.length };
d.resolve(pagingdata);
}).fail(function (e) {
alert('load failed!');
});
return d.promise();
};
var insertData = function (e) {
var d = $.Deferred();
$.ajax({
url: '/Grid/UpdateData',
type: 'put',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(e)
}
).done(function (data) {
alert('load data successed');
d.resolve(data);
}).fail(function (msg) {
alert('load failed:' + msg + "!");
});
return d.promise();
};
var deleteData = function (e) {
var d = $.Deferred();
$.ajax({
url: '/Grid/DeleteData',
type: 'delete',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(e)
}
).done(function (data) {
alert('delete data successed');
d.resolve(data);
}).fail(function (msg) {
alert('delete failed:' + msg + "!");
});
return d.promise();
}
return {
showDetailsDialog,
saveClient,
loadData,
submitData,
insertData,
deleteData
}
});