【Javascript】【模块化】通过requireJs实现模块化

最新推荐文章于 2023-03-01 11:06:00 发布

ByteFlys

最新推荐文章于 2023-03-01 11:06:00 发布

阅读量495

点赞数

分类专栏： javascript 文章标签： define require requireJs 模块化

本文链接：https://blog.csdn.net/u013718730/article/details/90697778

版权

javascript 专栏收录该内容

107 篇文章 6 订阅

订阅专栏

requireJs是AMD前端模块化规范的实现，requireJs使用define和require关键字实现模块化，用法如下

config.js


//配置模块
//声明哪些文件会被视为模块，声明后才能被define使用
//左侧为模块名称，右侧为文件路径
//模块名称不能为module，否则会异常
require.config({
    paths: {
        jquery: "jquery",
        md: "module"
    }
});

module.js


//定义模块
//第一个参数为依赖模块的名称
//第二个参数为依赖模块的别名
//如果没有依赖模块，可以省略这两个参数
define(["jquery"], function ($) {

    let message = "hello";

    return {
        message: message,
        showMessage: function () {
            alert($);
        }
    };
});

main.js


//引用模块
//第一个参数为引用模块，第二个参数为模块别名
//第一个参数可以使用文件路径，也可以使用模块别名，如果使用别名必须通过require.config事先定义
require(["module.js"], function (module) {
    alert(module.message);
    module.showMessage();
});

main.html


<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Webstorm</title>
    </head>

    <script src="require.js" data-main="config.js"></script>
    <script src="main.js"></script>
</html>

ByteFlys

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Javascript】【模块化】通过requireJs实现模块化

define和require是requireJs实现模块化的关键字，requireJs是AMD前端模块化规范的实现，用法如下config.js//配置模块//声明哪些文件会被视为模块，声明后才能被define使用//左侧为模块名称，右侧为文件路径//模块名称不能为module，否则会异常require.config({ paths: { jquery: "jq...
复制链接

扫一扫

专栏目录