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

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>

猜你喜欢

转载自blog.csdn.net/u013718730/article/details/90697778