javascript - jquery.fn 被覆盖

Question

在我的网站中，我有一个使用 jQuery.fn 方法创建的 jquery 函数，如下所示:

jQuery.fn.equalHeights = function() {
    var currentTallest = 0;
    jQuery(this).each(function(){
        if (jQuery(this).height() > currentTallest) {
            currentTallest = jQuery(this).height();
        }
    });
    jQuery(this).css('min-height', currentTallest);
};

我使用此函数来均衡网站上侧边栏的大小，因此我在页面加载完成后调用它，以确保在调整大小之前一切都已就位。

jQuery(window).load(function(){
    jQuery('#sidebar-one, #sidebar-two, #content').equalHeights();
});

这工作得很好，除了在我的某些页面上，用户将 jQuery 库的另一个实例添加到其页面的主体区域中(无论出于何种原因)。第二个库导致我的函数停止正常工作。我假设这是因为第二个 jQuery 覆盖了使用 jQuery.fn 方法创建的任何函数。有什么办法可以防止这种情况发生吗？

注释:我的站点运行的是 Drupal 7，因此我无法轻松地将脚本移动到页面底部。 equalHeights 函数不是我写的；我相信我在堆栈上找到了它，所以我对 fn 方法(以及一般的 JS)的了解并不是那么广泛。

---

---

编辑:基于下面所有很棒的建议，这就是我最终让它发挥作用的方式。

首先，我为 jQuery 的“默认”实例提供一个新变量来引用:

var JQ = jQuery.noConflict();

其次，我使用新的 jQuery 变量调用更高效的 equalHeights 函数版本:

JQ.fn.equalHeights = function() {
    var tallest = 0;
    return this.each(function(){
        var h = JQ(this).height();
        tallest = h > tallest ? h : tallest;
    }).css("minHeight", tallest);
};

第三，我使用新的 jQuery 变量调用我的函数:

JQ('#sidebar-one, #sidebar-two, #content').equalHeights();

因此，现在任何时候我需要引用我的原始 jQuery 库时，我都只需使用 JQ，而不必担心另一个库会占用我的任何函数。

我意识到这不是解决这个问题的最佳方法，我将努力消除额外的 jQuery 库，但这至少会同时保持我的侧边栏大小正确。

Answer 1

将您的代码片段包装在模块 IEFE 中，传递“旧”jQuery 引用:

(function($) {
    // $ will always point to the jQuery version with the `equalHeights` method
    $(window).load(function(){
        $('#sidebar-one, #sidebar-two, #content').equalHeights();
    });
}(jQuery));

另请参阅jQuery.noConflict了解更多技巧。