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 插件在加載后立即可用。

jQuery 插件是通過擴展 jQuery.prototype 創建的，如Learn jQuery中的此示例所示：

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

As soon as the function is assigned to the jQuery prototype, it's ready to run, so, as long as the script is at the end, invoking the new jQuery function right away will work.

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

引導程序 4

對於 Bootstrap 4，由於其 JavaScript 在 jQuery 加載后立即作為插件加載，因此 Bootstrap jQuery 功能立即可用。

您可以從 Bootstrap 4.6.0 的工具提示模塊中查看代碼，其中將工具提示 function 分配給 jQuery ：

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

一個警告——對於第 4 版，Bootstrap 確實建議等待 DOM 被加載。

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

立即運行 function，因為它位於頁面底部。

引導程序 5

Bootstrap 5 的工作方式不同。 它會創建一個引導程序 JavaScript object，您可以立即使用它（加載腳本文件后）。 將用於啟用工具提示的 BS-5 代碼放在 BS-5 代碼之后將起作用：

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

Bootstrap 定義了工具提示功能后，它調用 function 將工具提示添加到 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 事件創建一個事件偵聽器，並且該偵聽器運行代碼以在 DOM 加載后創建 jQuery 插件。

所以，是的，jQuery 插件在加載后立即可用，但 Bootstrap 將插件分配延遲到 DOMContentLoaded 事件之后。 他們為什么這樣做，我不知道，但這就是代碼當前的工作方式。