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

你说得对 jQuery 插件一加载就可用。

A jQuery 插件是通过扩展 jQuery.prototype 创建的，如本例所示 Learn jQuery:

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

一旦将函数分配给jQuery原型，就可以运行，所以，只要脚本在最后，调用新的jQuery功能马上就可以了。

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

Bootstrap 4

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

您可以从 Bootstrap 4.6.0 的工具提示模块中看到代码，其中分配了 tooltip function to jQuery:

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

一个警告 — 对于版本 4，Bootstrap 推荐 waiting for the DOM to be loaded。

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

运行该功能立即可用，因为它位于页面底部。

Bootstrap 5

Bootstrap 5 的工作方式不同。它会创建一个 bootstrap JavaScript 对象，您可以立即使用（一旦加载脚本文件）。将 BS-5 code for enabling tooltips 紧跟在 BS-5 代码之后即可：

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

在Bootstrap定义工具提示功能后，calls a function to add the tooltip to jQuery:

defineJQueryPlugin(Tooltip)

function 做的第一件事是检查文档是否仍在加载：

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

检查DOM是否加载的function是：

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

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

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

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

Bootstrap 5 / jQuery: is it possible to force bootstrap 5 to inject its jquery plugins immediately, not after DOMContentLoaded?

javascript

jquery

jquery-plugins

twitter-bootstrap

bootstrap-5

Bootstrap 4

Bootstrap 5