Bootstrap 5 / jQuery：是否可以强制 Bootstrap 5 立即注入其 jquery 插件，而不是在 DOMContentLoaded 之后？

Question

迁移到 BS 5 后，这个问题就被打破了：

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
<script>
     $('[data-bs-toggle="tooltip"]').tooltip()
</script>

当这正常工作时：

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function (event) {
        (function () {
            $('[data-bs-toggle="tooltip"]').tooltip()
        })();
    });
</script>

这在迁移文档中是不存在的，对我来说看起来很奇怪，所以我问：可能是我做错了什么，仍然可以像 BS4 中那样立即注入插件吗？

Answer 1

您\xe2\x80\x99 是正确的，jQuery 插件一旦\xe2\x80\x99 重新加载就可用。

\n

jQuery 插件是通过扩展 jQuery.prototype 创建的，如Learn jQuery中的示例所示中的示例所示：

\n

$.fn.greenify = function() {\n    this.css( "color", "green" );\n};\n

\n

一旦该函数被分配给 jQuery 原型，它\xe2\x80\x99就可以运行了，因此，只要脚本结束，立即调用新的 jQuery 函数就可以了。

\n

$( "a" ).greenify(); // Makes all the links green.\n

\n

引导程序4

\n

对于 Bootstrap 4，由于其 JavaScript 在加载 jQuery 后立即作为插件加载，因此 Bootstrap jQuery 功能立即可用。

\n

您可以从 Bootstrap 4.6.0 的工具提示模块中看到代码，其中它将工具提示函数分配给 jQuery：

\n

$.fn[NAME] = Tooltip._jQueryInterface\n$.fn[NAME].Constructor = Tooltip\n$.fn[NAME].noConflict = () => {\n        $.fn[NAME] = JQUERY_NO_CONFLICT\n        return Tooltip._jQueryInterface\n    }\n

\n

对于版本 4，需要注意的是 \xe2\x80\x94，Bootstrap 确实建议等待 DOM 加载。

\n

$(function () {\n  $(\'[data-toggle="tooltip"]\').tooltip()\n})\n

\n

立即运行该函数，就像页面底部的 \xe2\x80\x99s 一样。

\n

引导程序5

\n

Bootstrap 5 的工作方式有所不同。它创建一个引导 JavaScript 对象，您可以立即使用该对象（加载脚本文件后立即使用）。将启用工具提示的 BS-5 代码放在 BS-5 代码后面即可：

\n

var tooltipTriggerList = [].slice.call(document.querySelectorAll(\'[data-bs-toggle="tooltip"]\'));\nvar tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {\n    return new bootstrap.Tooltip(tooltipTriggerEl)\n});\n

\n

Bootstrap 定义了工具提示功能后，它调用一个函数将工具提示添加到 jQuery 中：

\n

defineJQueryPlugin(Tooltip)\n

\n

该函数所做的第一件事是检查文档是否仍在加载：

\n

const defineJQueryPlugin = plugin => {\n    onDOMContentLoaded(() => {\n        const $ = getjQuery()\n        if ($) {\n            const name = plugin.NAME\n            const JQUERY_NO_CONFLICT = $.fn[name]\n            $.fn[name] = plugin.jQueryInterface\n            $.fn[name].Constructor = plugin\n            $.fn[name].noConflict = () => {\n                $.fn[name] = JQUERY_NO_CONFLICT\n                return plugin.jQueryInterface\n            }\n        }\n    })\n}\n

\n

检查 DOM 是否加载的函数是：

\n

const onDOMContentLoaded = callback => {\n    if (document.readyState === \'loading\') {\n        document.addEventListener(\'DOMContentLoaded\', callback)\n    } else {\n        callback()\n    }\n}\n

\n

如果 DOM 仍在加载，则会创建 DOMContentLoaded 事件的事件侦听器，并且该侦听器在加载 DOM后运行代码以创建 jQuery 插件。

\n

所以，是的，jQuery 插件在\xe2\x80\x99 重新加载后就可用，但 Bootstrap 会将插件分配延迟到 DOMContentLoaded 事件之后。为什么他们\xe2\x80\x99要这样做，我不\xe2\x80\x99不知道，但\xe2\x80\x99是代码当前的工作方式。

\n