个人中心
gpt4 book ai didi

jquery - 使用 jQuery 从 CDN 加载 Dojo

转载 作者：行者123 更新时间：2023-12-01 00:27:55 25 4
gpt4 key购买 nike

这是我从 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？

最佳答案

“找不到节点”错误是由加载器尝试查找加载它的脚本标记引起的。这是 Dojo 从 CDN(如您使用过的 Google CDN)加载时使用的一种技巧，以尝试找到加载模块的 url 路径。

jQuery $.getScript() 函数实际上并不是将脚本标记注入(inject)页面，而是通过 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 中引入它。

注意:我将代码中的 dijit.Dialog 更改为 dijit/Dialog，因为如果您使用点格式，它不会在 1.8 版中加载。

关于jquery - 使用 jQuery 从 CDN 加载 Dojo，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14635490/

25 4 0
文章推荐： Python - 使用具有多个参数的多处理不起作用
文章推荐： jquery - 水平滚动 Jquery 隐藏/显示滚动箭头
文章推荐： javascript - 将键名替换为其值
文章推荐： javascript - django 复选框是或否
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com