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进一步的技巧。