jquery - $ .functionName和$ .fn.FunctionName之间的区别 [英] jquery - difference between $.functionName and $.fn.FunctionName

问题描述

在jQuery中，我已经看到了定义jQuery函数的以下两种方法：

$ $ $ $ $ $ $ $ $ .fn.CustomAlert = function （）{
alert（'boo！'）;
};

$ .CustomAlert = function（）{
alert（'boo！'）;
};

据我所知，它们被附加到jQuery对象（或$）上，但是他们俩？什么时候应该使用其中一种？

谢谢。

解决方案

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

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

$。something 添加一个属性或函数给jQuery对象本身。

当你使用第一个形式 $。fn.something 时'处理页面上的DOM元素，并且您的插件会为元素做些事情。当插件与DOM元素无关时，请使用其他表单 $。something 。

例如，如果你有一个记录器函数，那么在DOM元素中使用它就没什么意义了，例如：

  $（p> span）.log（）; 
  

对于这种情况，您只需将log方法添加到jQuery对象iself中：

  jQuery.log = function（message）{
 //记录某处
}; 
 
 $ .log（好得多）; 
  

但是，在处理元素时，您会想要使用其他表单。例如，如果您有一个从< table> 获取数据并生成图形的图形插件（plotGraph），则可以使用 $ .fn.plotGraph = function（）{$ b $。$ <$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ b //读取表格数据并生成图形
};

$（＃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不会溢出到全局范围。这是一个例子或重用插件表单之间的功能。

正如IV所提到的，返回jQuery包裹元素本身是一个好习惯，因为您不想要打破链接。

最后，我发现了类似的问题： - ）

• jQuery.extend和jQuery.fn.extend之间的区别？ li>
  
• jQuery插件.fn问题

< li> > jQuery插件创作：为什么有些人做jQuery.pluginName和其他jQuery.fn.pluginName？

• 在jQuery中有什么不同费用在$ .myFunction和$ .fn.myFunction之间？

In jQuery, I have seen both the following ways of defining a jQuery function:

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

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

I understand that they are attached to the jQuery object (or $), but what is the difference between the two? When should I use one or the other?

Thanks.

解决方案

I'm sure this question has been asked several times before, but I can't find the link.

$.fn points to the jQuery.prototype. Any methods or properties you add to it become available to all instance of the jQuery wrapped objects.

$.something adds a property or function to the jQuery object itself.

Use the first form $.fn.something when you're dealing with DOM elements on the page, and your plugin does something to the elements. When the plugin has nothing to do with the DOM elements, use the other form $.something.

For example, if you had a logger function, it doesn't make much sense to use it with DOM elements as in:

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

For this case, you'd simply add the log method to the jQuery object iself:

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

$.log("much better");

However, when dealing with elements, you would want to use the other form. For example, if you had a graphing plugin (plotGraph) that takes data from a <table> and generates a graph - you would use the $.fn.* form.

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

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

On a related note, suppose you had a plugin which could be used either with elements or standalone, and you want to access it as $.myPlugin or $("<selector>").myPlugin(), you can reuse the same function for both.

Say we want a custom alert where the date is prepended to each alert message. When used as a standalone function, we pass it the message as an argument, and when used with elements, it uses the text of the element as the message:

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

    $.myAlert = myAlert;

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

It's wrapped in a self-executing function so myAlert doesn't spill out to the global scope. This is an example or reusing functionality between both the plugin forms.

As theIV mentioned, it is a good practice to return the jQuery wrapped element itself since you wouldn't want to break chaining.

Finally, I found similar questions :-)

• 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?

这篇关于jquery - $ .functionName和$ .fn.FunctionName之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！