jquery - $.functionName 和 $.fn.FunctionName 之间的区别

Question

在 jQuery 中，我见过以下两种定义 jQuery 函数的方法:

$.fn.CustomAlert = function() {
  alert('boo!');
};

$.CustomAlert = function() {
  alert('boo!');
};

我知道它们附加到 jQuery 对象(或 $)，但是两者有什么区别？我什么时候应该使用其中之一？

谢谢。

Answer 1

我确信这个问题之前已经被问过好几次了，但我找不到链接。

$.fn指向jQuery.prototype 。您添加到其中的任何方法或属性都可供 jQuery 包装对象的所有实例使用。

$.something向 jQuery 对象本身添加属性或函数。

使用第一种形式$.fn.something当您处理页面上的 DOM 元素时，您的插件会对这些元素执行某些操作。当插件与 DOM 元素无关时，使用其他形式 $.something 。

例如，如果您有一个记录器函数，那么将其与 DOM 元素一起使用就没有多大意义，如下所示:

$("p > span").log();

对于这种情况，您只需将 log 方法添加到 jQuery 对象本身:

jQuery.log = function(message) {
    // log somewhere
};

$.log("much better");

但是，在处理元素时，您可能需要使用其他形式。例如，如果您有一个绘图插件 (plotGraph)，它从 <table> 获取数据。并生成一个图表 - 您将使用 $.fn.*表格。

$.fn.plotGraph = function() {
    // read the table data and generate a graph
};

$("#someTable").plotGraph();

相关说明，假设您有一个可以与元素一起使用或独立使用的插件，并且您希望以 $.myPlugin 的形式访问它。或$("<selector>").myPlugin() ，您可以为两者重用相同的函数。

假设我们想要一个自定义警报，其中日期被添加到每条警报消息的前面。当用作独立函数时，我们将消息作为参数传递给它，当与元素一起使用时，它使用 text作为消息的元素:

(function($) {
    function myAlert(message) {
        alert(new Date().toUTCString() + " - " + message);
    }

    $.myAlert = myAlert;

    $.fn.myAlert = function() {
        return this.each(function() {
            myAlert($(this).text());
        });
    };
})(jQuery);

它被包装在一个自执行函数中，因此 myAlert 不会溢出到全局范围。这是两个插件表单之间重用功能的示例。

正如 theIV 提到的，返回 jQuery 包装的元素本身是一个很好的做法，因为您不想破坏链接。

最后，我发现了类似的问题:-)

• Difference between jQuery.extend and jQuery.fn.extend?
• jQuery plugin .fn question
• jQuery Plugin Authoring: Why do some do jQuery.pluginName and others jQuery.fn.pluginName?
• in jQuery what is the difference between $.myFunction and $.fn.myFunction?