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