javascript和fn怎么了？ [复制]答案

【问题标题】：What is going on with the javascript and the fn? [duplicate]javascript和fn怎么了？ [复制]
【发布时间】：2011-11-25 15:11:32
【问题描述】：

可能重复：
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。我只是想知道这个特殊的结构是什么意思。

【问题讨论】：

标签： javascript jquery

【解决方案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 作为属性的原因仅仅是因为它更短，对于不知道原型继承如何工作的人来说可能更容易理解。

【讨论】：

【解决方案2】：

使用 fn 运算符，您可以为（一组）元素创建自己的方法。在这种情况下，该方法称为 TriggerControl，可以这样调用：

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

查看this 页面了解更多信息。

【讨论】：