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对象本身添加一个属性或函数。

当您处理页面上的DOM元素时，使用第一种形式$.fn.something，并且您的插件对元素做了某些操作。当插件与DOM元素无关时，请使用其他表单$.something。

举例来说，如果你有一个记录器功能，它并没有太大的意义与DOM元素用它作为：

$("p > span").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自动执行的功能不会溢出到全球范围。这是两个插件表单之间的示例或重用功能。

正如上面提到的那样，返回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?

Answer 2

一个

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

alert($.a()); 

乙

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

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

Answer 3

要了解jQuery插件的开发，我们必须了解全局函数。 jQuery有内置的capibilities，通过设施我们一直在调用全局函数。这些是jQuery的方法，但在jQuery名称空间中是函数。

将功能添加到jQuery的命名空间，只需添加新的功能，如jQuery对象的属性：

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

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

jQuery.globalFunction(); 

或者

$.globalFunction(); 

添加实例方法很相似，但我们扩展了jQuery.fn对象。

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

我们可以调用使用任何选择表达

​​

这种新方法有关完整的说明请参考This Link