加载Dojo组件脚本失败求助：使用require添加Digit表单按钮报错

嘿，我一眼就揪出了几个导致报错的关键问题，这就帮你梳理清楚：

1. 组件库名称拼写错误 #

你把Dojo的UI组件库名称写错了——是**dijit**不是digit！Dojo官方的UI组件包叫dijit，digit是完全不存在的路径，浏览器自然找不到对应的资源文件。

2. 路径里的非法冗余字符 #

报错里的URL出现了FORM].js，这说明你在require的模块路径里不小心多写了一个]，导致请求的资源路径彻底混乱，加载失败是必然的。

3. 错误的组件路径 #

如果要添加按钮，你需要引入的是dijit/form/Button组件，而不是你写的错误路径。

修正后的代码示例 #

下面是调整后的完整可运行代码片段，你可以直接参考：

<html>
<head>
    <title> Intro to Dojo, part 1 </title>
    <style>
        .highlight {
            background: yellow;
            font-weight: bold;
            font-size: 1.5em;
        }
    </style>
    <!-- 正确引入Dojo库，开启异步加载配置 -->
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js" data-dojo-config="async: true"></script>
</head>
<body>
    <ul id="nav">
        <li> <a href="/">Home</a> </li>
        <!-- 按钮的容器 -->
        <div id="btnContainer"></div>
    </ul>

    <script>
        // 正确使用require加载Button组件
        require(["dijit/form/Button", "dojo/domReady!"], function(Button) {
            // 创建按钮实例并挂载到页面
            const myButton = new Button({
                label: "测试按钮",
                onClick: function() {
                    alert("按钮正常工作啦！");
                }
            }, "btnContainer");
            myButton.startup();
        });
    </script>
</body>
</html>

额外小提示 #

如果你想用声明式写法（直接在HTML里定义按钮），可以这么做：

<!-- 直接在HTML里写按钮 -->
<button data-dojo-type="dijit/form/Button" data-dojo-props="onClick:function(){alert('点击成功！')}">
    声明式按钮
</button>

同时在require里加上解析器模块：

require(["dojo/parser", "dijit/form/Button", "dojo/domReady!"]);

内容的提问来源于stack exchange，提问作者Nitin More