JavaScript和fn發生了什麼？

Question

可能重複：
What does jQuery.fn mean?

我試圖找出什麼它做一個頁面上的一些腳本：

(function ($, window, undefined) 
{ 

    var 
    // String constants for data names 
    dataFlag = "watermark", 
    dataClass = "watermarkClass", 
    dataFocus = "watermarkFocus", 
    dataFormSubmit = "watermarkSubmit", 
    dataMaxLen = "watermarkMaxLength", 
    dataPassword = "watermarkPassword", 
    dataText = "watermarkText", 

    // Copy of native jQuery regex use to strip return characters from element value 
    rreturn = /\r/g, 

    // Includes only elements with watermark defined 
    selWatermarkDefined = "input:data(" + dataFlag + "),textarea:data(" + dataFlag + ")", 

    // Includes only elements capable of having watermark 
    selWatermarkAble = "input:text,input:password,input[type=search],input:not([type]),textarea", 

    // triggerFns: 
    // Array of function names to look for in the global namespace. 
    // Any such functions found will be hijacked to trigger a call to 
    // hideAll() any time they are called. The default value is the 
    // ASP.NET function that validates the controls on the page 
    // prior to a postback. 
    // 
    // Am I missing other important trigger function(s) to look for? 
    // Please leave me feedback: 
    // http://code.google.com/p/jquery-watermark/issues/list 
    triggerFns = [ 
     "Page_ClientValidate" 
    ], 

    // Holds a value of true if a watermark was displayed since the last 
    // hideAll() was executed. Avoids repeatedly calling hideAll(). 
    pageDirty = false, 

    // Detects if the browser can handle native placeholders 
    hasNativePlaceholder = ("placeholder" in document.createElement("input")); 


    /*******************************************************/ 
    /* Enable/disable other control on trigger condition */ 
    /*******************************************************/ 
    $.fn.TriggerContol = function (options) 
    { 

林與最後兩行掙扎。爲什麼開發者使用fn，這是什麼意思？

據我所知，這整個文件基本上是一個自調用的匿名函數，旨在將函數附加到Jquery庫，以便您可以執行jQuery（x）.TriggerControl。我只是想知道這個特定的結構是什麼意思。

Answer 1

在jQuery中，jQuery.fn只是對jQuery.prototype的引用。

因此要了解發生了什麼，您確實需要了解原型繼承。

從jQuery構造函數創建的所有對象都將繼承jQuery.prototype對象上存在的任何屬性。

拿這個簡單的例子：

function jQuery() { 
     // empty constructor function 
} 

jQuery.fn = jQuery.prototype; // Make a "fn" property that simply references the 
           // jQuery.prototype object. 

// So assigning a property to jQuery.fn 
// is the same as assigning it to jQuery.prototype 
jQuery.fn.sayHello = function() { alert("Hi!"); }; 

// Create an object from the jQuery constructor 
var obj = new jQuery; 

// Our new object will automatically inherit the "sayHello" function 
obj.sayHello(); // "Hi!" 

這顯然是非常簡單的，和jQuery並不僅僅是這更多，但它是原型繼承允許所有的jQuery對象具有相同的一組方法。

要爲所有jQuery對象添加新方法，只需添加到其原型。

jQuery.fn.sayGoodbye = function() { alert("Goodbye!"); }; 

// call the new method on our original object 
obj.sayGoodbye(); // Goodbye! 

正如你所看到的，sayGoodbye正確奇蹟般地出現了，儘管我們沒有直接將該屬性添加到我們的obj。

---

JSFIDDLE DEMO上述代碼的。

---

我會認爲他們提供jQuery.fn作爲屬性的原因很簡單，因爲它是更短，也許更容易理解的人誰不知道如何繼承原型的作品。

Answer 2

使用fn運算符，您可以爲（一組）元素創建自己的方法。在這種情況下，該方法被稱爲TriggerControl，可以這樣調用：

$('.someclass').TriggerControl(someoptions); 

採取看看this頁面獲取更多信息。