Question

以下是我从article获取的示例，稍有变化。这个例子完美无缺

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen">
        <script type="text/javascript">
            dojoConfig = {
                parseOnLoad: false,
                async: true
            };
        </script>   
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" type="text/javascript"></script>
        <script type="text/javascript">
            /// Require the registry, parser, Dialog, and wait for domReady
            require(["dijit/registry", "dojo/parser", "dojo/json", "dojo/_base/config", "dijit/Dialog"], function (registry, parser, JSON, config) {
                // Explicitly parse the page
                parser.parse();
                // Find the dialog
                var dialog = registry.byId("dialog");
                // Set the content equal to what dojo.config is
                dialog.set("content", "<b>it works!</b>");
                // Show the dialog
                dialog.show();
            });
        </script>
    </head>
    <body class="claro">
        <div id="dialog" data-dojo-type="dijit.Dialog"></div>
    </body>
</html>

现在我想修改它并使用jQuery动态加载Dojo。以下是我如何执行此操作的示例：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            dojoConfig = {
                parseOnLoad: false,
                async: true
            };

            $.getScript("http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js")
            .done(function (script, textStatus) {
                /// Require the registry, parser, Dialog, and wait for domReady
                require(["dijit/registry", "dojo/parser", "dojo/json", "dojo/_base/config", "dijit/Dialog"], function (registry, parser, JSON, config) {
                    // Explicitly parse the page
                    parser.parse();
                    // Find the dialog
                    var dialog = registry.byId("dialog");
                    // Set the content equal to what dojo.config is
                    dialog.set("content", "<b>it works!</b>");
                    // Show the dialog
                    dialog.show();
                });
            })
            .fail(function (jqxhr, settings, exception) {
                alert('Cannot load Dojo.js');
            });
        });
    </script>
</head>
<body class="claro">
    <div id="dialog" data-dojo-type="dijit.Dialog">
    </div>
</body>
</html>

但看起来我做错了导致它引发下一个错误

NotFoundError: Node was not found
http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js
Line 2

我怀疑Dojo还没有准备好，但也许我错了......是否有可能使用jQuery动态加载Dojo？

Answer 1

“找不到节点”错误是由加载程序尝试找到加载它的脚本标记引起的。这是一个技巧，当Dojo从CDN（如您使用过的Google）加载时，它会尝试找到加载模块的url路径。

jQuery $ .getScript（）函数实际上并没有将脚本标记注入页面，而是通过XHR加载然后评估代码。因此，找不到Dojo正在寻找的标签。这仅在使用CDN时发生。如果您使用自己的Dojo本地副本而不是CDN，则可以使其工作。

我不确定通过jQuery加载Dojo是一种很好的做法。最好分别加载它们或者反过来加载它们（即在Dojo中加载jQuery）。我假设你需要两者的功能，否则你不会尝试这个。

要将jQuery作为Dojo模块加载，您可以按如下方式更改代码：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <link
        rel="stylesheet"
        href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css"
        media="screen"
    />
    <script type="text/javascript">
        var dojoConfig = {
            "parseOnLoad": false,
            "async": true,
                "packages": [{
                    "name": "jquery",
                    "location": "//ajax.googleapis.com/ajax/libs/jquery/1.9.0",
                    "main": "jquery.min"
                }]
        };
    </script>
    <script
        type="text/javascript"
        src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"
    ></script>
    <script type="text/javascript">
        define.amd.jQuery = true;  // jQuery will be loaded as an AMD module

        require([
            "jquery",
        ], function($){
            // NB: $ is only available within the scope it has been loaded
            // as it is loading as an AMD module.  Hence, $ is not globally
            // available and must be required into any scope it is used.

            $(document).ready(function () {
                require([
                    "dijit/registry",
                    "dojo/parser",
                    "dojo/json",
                    "dojo/_base/config",
                    "dijit/Dialog"
                ], function (registry, parser, JSON, config) {
                    // Explicitly parse the page
                    parser.parse();
                    // Find the dialog
                    var dialog = registry.byId("dialog");
                    // Set the content equal to what dojo.config is
                    dialog.set("content", "<b>it works!</b>");
                    // Show the dialog
                    dialog.show();
                });
            });
        })
    </script>
</head>
<body class="claro">
    <div id="dialog" data-dojo-type="dijit/Dialog">
    </div>
</body>
</html>

坚持使用Dojo可能更好，而不是试图同时使用它们。但是，上述内容将允许两者一起使用。 Dojo，它有自己的就绪函数（dojo/ready）可以替换$（document）.ready（）。 jQuery的大多数功能都在Dojo中的某个庄园中复制。

将jQuery作为Dojo模块加载意味着它仅在require回调中可用。因此，$通常不会放在全局范围内。您将需要将其添加到您需要的任何JavaScript中。

NB：我将代码中的dijit.Dialog更改为dijit / Dialog，因为如果使用点阵形式，它将无法在1.8版本中加载。

Answer 2

好的，最后看起来我找到了基于article的可靠解决方案......这是工作示例：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript">
        function loadScript(url, callback) {
            var script = document.createElement("script")
            script.type = "text/javascript";

            if (script.readyState) {  //IE
                script.onreadystatechange = function () {
                    if (script.readyState == "loaded" ||
                    script.readyState == "complete") {
                        script.onreadystatechange = null;
                        callback();
                    }
                };
            } else {  //Others
                script.onload = function () {
                    callback();
                };
            }

            script.src = url;
            document.body.appendChild(script);
        }

        $(document).ready(function () {
            dojoConfig = {
                parseOnLoad: false,
                async: true
            };

            loadScript("http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js", function () {
                /// Require the registry, parser, Dialog, and wait for domReady
                require(["dijit/registry", "dojo/parser", "dojo/json", "dojo/_base/config", "dijit/Dialog"], function (registry, parser, JSON, config) {
                    // Explicitly parse the page
                    parser.parse();
                    // Find the dialog
                    var dialog = registry.byId("dialog");
                    // Set the content equal to what dojo.config is
                    dialog.set("content", "<b>it works!</b>");
                    // Show the dialog
                    dialog.show();
                });
            });
        });
    </script>
</head>
<body class="claro">
    <div id="dialog" data-dojo-type="dijit.Dialog">
    </div>
</body>
</html>

这不是纯粹的jQuery解决方案，但它对我来说更好，然后在页面上包含Dojo脚本......

使用jQuery从CDN加载Dojo

2 个答案: