lookroot的个人空间

简单页面开发可使用RequireJS做模块管理

置顶推荐

lookroot的bilibili频道

lookroot工具箱

最新写一个自己用的工具页面的时候，因为是个简单的需求，不想使用webpack,vite这种重型工具，但是直接在页面中托管js，又不太优雅，所以选择了一个比较经典的RequireJs来管理。

RequireJS 的主要特点包括：

异步加载：RequireJS 支持异步加载模块，这意味着模块可以在需要的时候动态加载，而不需要在页面加载时一次性加载所有的模块。
模块化开发：RequireJS 支持将代码分割成多个模块，每个模块可以独立编写、维护和测试。这种模块化的开发方式使得代码更加可维护、可扩展，同时也提高了开发效率。
依赖管理：RequireJS 可以自动解决模块之间的依赖关系，确保模块在加载时按正确的顺序加载。开发者只需要在模块定义中声明依赖关系，RequireJS 就会自动处理依赖加载的逻辑。
插件扩展：RequireJS 支持插件扩展，开发者可以通过插件机制来扩展 RequireJS 的功能。例如，可以使用插件来加载非 JavaScript 类型的模块，如 CSS、HTML 等。

使用上很简单，cdn引入，然后在data-main属性上挂载自己的js入口文件即可

<!DOCTYPE html>
<html lang="ch">
<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>require demo</title>
    <meta name="description" content="" />
    <script data-main="script/app"
        src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.min.js"></script>
</head>
</html>

这里我载一个app.js

&nbsp;

/**
 * 定义模块的来源 本地或者cdn
 */
requirejs.config({
    baseUrl: 'script',
    paths: {
        util: './util',
        markdownit: 'https://cdn.bootcdn.net/ajax/libs/markdown-it/13.0.1/markdown-it.min',
        highlight: 'https://cdn.bootcdn.net/ajax/libs/highlight.js/11.7.0/highlight.min',
    }
});
// 引入指定的模块
requirejs(['common', 'markdownit',], function (common, markdownit, highlight) {
    var md = markdownit({
        highlight: function (str, lang) {
            if (lang && hljs.getLanguage(lang)) {
                try {
                    return '<pre class="hljs"><code>' +
                        hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
                        '</code></pre>';
                } catch (__) { }
            }
            return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
        }
    });
});

baseUrl代表入口地址，这样可以把我们自己的模块代码放到script目录下；paths定义模块来源，支持cdn和本地资源，在下方的requirejs作用域里面就可以使用这些已经定义好的模块代码

本地定义模块也很简单比如编写一个 util.js

define(function () {
    const hello = function () {
        console.log("hello");
    };
    return {
        hello: hello
    };
});

到此一游

留言