关于jquery：javascript和fn发生了什么？

What is going on with the javascript and the fn?

本问题已经有最佳答案，请猛点这里访问。

Possible Duplicate:
What does jQuery.fn mean?

我在页面上有一些脚本试图弄清楚它在做什么：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

(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 = /
/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对象上存在的任何属性。

举个简单的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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对象添加新方法，只需添加到其原型即可。

1
2
3
4

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

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

正如您所看到的，即使我们没有直接将该属性添加到我们的obj，sayGoodbye也会神奇地出现。

以上代码的JSFIDDLE DEMO。

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