require.js
1.引入require.js
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script data-main="./resources/main.js" src="./resources/require.js"></script>
</body>
</html>
其中data-main属性的作用是，指定网页程序的主模块，在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载
且由于require.js默认的文件后缀名是js，所以可以把main.js简写成main
2.配置模块路径
main.js中可以配置路径：
require.config({
paths: {
'jquery':'lib/jquery.min'
}
})
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="test()">测试</button>
<script data-main="./resources/main.js" src="./resources/require.js"></script>
<script>
function test() {
require(['jquery'], function ($) {
$('body').css({'backgroundColor': 'dodgerblue'});
})
}
</script>
</body>
</html>
3.配置公共路径
main.js:
require.config({
baseUrl: 'resources/lib',
paths: {
'jquery': 'jquery.min',
'angular': 'angular.min'
}
})
baseUrl为基路径，但是要注意baseUrl要从main.js所在目录开始编写
注意，此时require方法是在test函数中，因此不存在加载先于<script data-main="./resources/main.js" src="./resources/require.js"></script>的问题
4.require立刻执行存在的问题
如果此时的配置是这样的：
<script data-main="./resources/main.js" src="./resources/require.js"></script>
<script>
require(['jquery'], function ($) {
$('body').css({ 'backgroundColor': 'dodgerblue' });
})
</script>
此时require可能相较于main.js中的代码率先执行，发生错误
未解决上述问题，可以将require方法写在main.js内部：
require.config({
baseUrl: 'resources/lib',
paths: {
'jquery': 'jquery.min',
'angular': 'angular.min'
}
})
require(['jquery'], function ($) {
$('body').css({ 'backgroundColor': 'dodgerblue' });
})
或者在index.html中使用下面的方式：
<script src="./resources/require.js"></script>
<script src="./resources/main.js"></script>
<script>
require(['lib/jquery'], function ($) {
$('body').css({ 'backgroundColor': 'dodgerblue' });
})
</script>
5.使用define定制模块
目录结构如下：
util.js:
define([], function () {
return {
show: function () {
alert('show');
},
message: function () {
alert('message');
}
}
})
main.js:
require.config({
baseUrl: 'resources/lib',
paths: {
'jquery': 'jquery.min',
'angular': 'angular.min',
'util': '../app/util'
}
})
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./resources/require.js"></script>
<script src="./resources/main.js"></script>
<script>
require(['util'], function (obj) {
obj.show();
})
</script>
</body>
</html>
其中define第一个参数为依赖数组，如果希望在util.js中使用jquery，可以按照下面的写法：
define(['jquery'], function ($) {
return {
show: function () {
alert('show');
},
message: function () {
alert('message');
},
change: function(){
$('body').css({ 'backgroundColor': 'dodgerblue' });
}
}
})
或者采用下面的方式:
define([], function ($) {
return {
show: function () {
alert('show');
},
message: function () {
alert('message');
},
change: function () {
require(['jquery'], function ($) {
$('body').css({ 'backgroundColor': 'dodgerblue' });
});
}
}
})
6.使用shim设置依赖关系：
如果同时希望引入css依赖，需要下载css.min.js
require.config({
baseUrl: 'resources/lib',
paths: {
'css': 'css.min',
'jquery': 'jquery.min',
'angular': 'angular.min',
'util': '../app/util',
'bootstrap': 'bootstrap.min'
},
shim: {
"bootstrap": {
deps: ['jquery','css!../css/bootstrap.min.css']
}
}
})
7.对于非标准化的js文件的处理：
如想使用test.js，其文件内容如下:
function testDemo(){
alert(1);
}
同样可以利用shim解决：
main.js文件内容：
require.config({
baseUrl: 'resources/lib',
paths: {
'css': 'css.min',
'jquery': 'jquery.min',
'bootstrap': 'bootstrap.min',
'angular': 'angular.min',
'util': '../app/util',
'test': '../app/test'
},
shim: {
"test": {
exports: "testDemo"
},
"bootstrap": {
deps: ['jquery','css!../css/bootstrap.min.css']
}
}
})
require(['test'], function (fn) {
fn();
})
如果文件内有多个方法：
function testDemo(){
alert(1);
}
function success(){
alert(2);
}
main.js:
require.config({
baseUrl: 'resources/lib',
paths: {
'css': 'css.min',
'jquery': 'jquery.min',
'bootstrap': 'bootstrap.min',
'angular': 'angular.min',
'util': '../app/util',
'test': '../app/test'
},
shim: {
"test": {
init: function () {
return {
testDemo: testDemo,
success: success
}
}
},
"bootstrap": {
deps: ['jquery', 'css!../css/bootstrap.min.css']
}
}
})
require(['test'], function (f) {
f.success();
})
本文作者：kanaliya
本文链接：https://www.cnblogs.com/kanaliya/p/15327415.html
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？