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页面获取更多信息。