javascript和fn发生了什么

What is going on with the javascript and the fn?

本文关键字：什么 发生了 fn javascript      更新时间：2023-09-26

可能重复：
jQuery.fn是什么意思？

我在一个页面上有一些脚本，试图弄清楚它的作用：

(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。我只是想知道这个特定的构造意味着什么。

在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演示以上代码。

我认为他们提供jQuery.fn作为属性的原因很简单，因为它更短，对于不知道原型继承是如何工作的人来说，也许更容易理解。

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

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

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

相关文章：