记录对 require.js 的理解
目录
- 一、使用 `require.js` 主要是为了解决这两个问题
- 二、`require.js` 的加载
- 三、`main.js`
一、使用 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的用法