记录对 require.js 的理解

目录

    • 一、使用 `require.js` 主要是为了解决这两个问题
    • 二、`require.js` 的加载
    • 三、`main.js`

一、使用 require.js 主要是为了解决这两个问题

  1. 实现 js 文件的异步加载,避免网页失去响应;
  2. 管理模块之间的依赖性,便于代码的编写和维护。

二、require.js 的加载

我的目录

记录对 require.js 的理解_第1张图片

HTML 代码

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>RequireJstitle>
    head>
    <body style="background-color: #333">
        <h2>RequireJsh2>
        <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的用法

你可能感兴趣的:(javascript,javascript,开发语言)