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

Posted 2023-02-19

【中文标题】jquery - $.functionName 和 $.fn.FunctionName 之间的区别

【英文标题】：jquery - difference between $.functionName and $.fn.FunctionName

【发布时间】：2011-02-20 05:15:11

【问题描述】：

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

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

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

我知道它们是附加到 jQuery 对象（或 $）上的，但是两者之间有什么区别呢？我应该什么时候使用其中一种？

谢谢。

【参考方案1】：

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

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

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

当您处理页面上的 DOM 元素时，请使用第一种形式 $.fn.something，并且您的插件会对元素执行某些操作。当插件与 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?

【讨论】：

我在问问题之前看了看，也找不到任何东西。

实际上，您什么时候会使用其中一种？

另外，据我了解，如果您的方法是可链接的，最好使用$.fn. 表单，因为您从 DOM 元素开始并希望从您的方法中返回 DOM 元素。不过，这确实与 Anurag 的回答无关。

感谢@theIV，链接可以使 javascript DOM 工作得更干净。 :)

太棒了...谢谢阿努拉格！！

【参考方案2】：

一个

$.a = function() 
  return "hello world";
;

alert($.a());

B

$.fn.b = function() 
  return "hello " + $(this).length + " elements";


alert($("p").b());

【讨论】：

您实际上可以在这里使用this 而不是$(this)。

【参考方案3】：

要学习jQuery插件开发，我们必须了解全局函数。 jQuery 通过我们称之为全局函数的工具具有内置功能。这些是 jQuery 的方法，但它们是 jQuery 命名空间中的函数。

要将函数添加到 jQuery 命名空间，只需将新函数添加为 jQuery 对象的属性即可：

jQuery.globalFunction = function() 
  alert('Hi.. just test');
;

要使用它，我们可以这样写：

jQuery.globalFunction();

或者

$.globalFunction();

添加 instand 方法类似，但我们改为扩展 jQuery.fn 对象。

jQuery.fn.myMethod = function() 
  alert('Hello...!');

我们可以使用任何选择器表达式调用这个新方法

$('div').myMethod();

完整解释请参考This Link