一、使用 require.js 主要是为了解决这两个问题
- 实现
js文件的异步加载，避免网页失去响应；- 管理模块之间的依赖性，便于代码的编写和维护。
二、require.js 的加载
我的目录
HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RequireJs</title>
</head>
<body style="background-color: #333">
<h2>RequireJs</h2>
<script src="js/require.min.js" defer async="true"></script>
<script src="js/require.min.js" data-main="js/main"></script>
</body>
</html>
三、main.js
// main.js 编写配置
require.config({
charset: "utf-8", // 文件编码
baseUrl: "/js/", //资源基础路径
waitSeconds: 60,
paths: {
// 加载cdn文件, 如果加载失败则加载本地文件(这里没有下载jquery)
jquery: ["https://cdn.staticfile.org/jquery/3.7.0/jquery.min", "js/lib/jquery"],
// 加载文件
math: "/js/lib/math",
},
});
// 使用
define(["jquery", "math"], function ($, math) {
console.log("jquery");
// 调用 math 内计算方法
console.log(math.add(1, 2));
$(function () {
setTimeout(() => {
$("h2").text("Jquery");
}, 3000);
});
});
// math.js
define(function () {
var add = function (x, y) {
return x + y;
};
return {
add: add,
};
});
推荐看大佬的文章 阮一峰的文章 require.js的用法
1185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
