jQuery.fnの意味?


回答:


848

jQueryでは、fnプロパティはプロパティの単なるエイリアスprototypeです。

jQuery識別子(または$)だけでコンストラクタ関数コンストラクタのプロトタイプを継承し、それを作成したすべてのインスタンス。

簡単なコンストラクタ関数:

function Test() {
  this.a = 'a';
}
Test.prototype.b = 'b';

var test = new Test(); 
test.a; // "a", own property
test.b; // "b", inherited property

jQueryのアーキテクチャーに似た単純な構造:

(function() {
  var foo = function(arg) { // core constructor
    // ensure to use the `new` operator
    if (!(this instanceof foo))
      return new foo(arg);
    // store an argument for this example
    this.myArg = arg;
    //..
  };

  // create `fn` alias to `prototype` property
  foo.fn = foo.prototype = {
    init: function () {/*...*/}
    //...
  };

  // expose the library
  window.foo = foo;
})();

// Extension:

foo.fn.myPlugin = function () {
  alert(this.myArg);
  return this; // return `this` for chainability
};

foo("bar").myPlugin(); // alerts "bar"

4
これは本当であることが保証されていますか?jQuery.prototypeの呼び出しがjQuery.fnとまったく同じであると想定できますか?私の心配は、jQueryが.fnを呼び出すときに何らかの魔法をかけると、互換性がない
Brandon

4
ああ、私は何かが欠けています。 'window.foo = foo'は 'foo'にグローバルスコープを与えますか?決して新しいことではないので、習得するテクニックのリストに追加します。
EE33 2012年

2
@ EE33私が間違っていない場合、JavaScriptのグローバルスコープは、変数がウィンドウオブジェクトのパラメーターであることを意味します。
Shawn

1
@Imray- 連鎖return thisを可能にするために、そうすることができますfoo("bar").myPlugin().otherPlugin()
Racing Tadpole

3
@Shawnパラメータではなくプロパティと呼ばれると思いますよね?ここではfunction func1 (a) { ... }、パラメータは「a」変数であり、プロパティは「a」変数ですvar foo = {}; foo.a = 'a'
ザック

145

jQuery.fnはの省略形として定義されていjQuery.prototypeます。ソースコードから:

jQuery.fn = jQuery.prototype = {
    // ...
}

つまりjQuery.fn.jquery、のエイリアスでjQuery.prototype.jquery、現在のjQueryバージョンを返します。もう一度ソースコードから:

// The current version of jQuery being used
jquery: "@VERSION",

15
私はこの答えが好きです。ソースコード内で定義を見つける方法を正確に示し、定義を有用な方法で解釈する方法を示します。「昔ながらの人に釣りを教える」という答えの方法。+1。
EE33

しかし、それを行う目的は何ですか?いくつかのキーストロークを保存するだけですか?
2015

@slier:はい、ほとんど。
アンディE

私は、静的な機能になります、$の.Fnに他のpurpose..attaching機能がある賭ける
slier

145

fn文字通りjqueryを指しprototypeます。

このコード行はソースコードにあります。

jQuery.fn = jQuery.prototype = {
 //list of functions available to the jQuery api
}

しかし、背後にある実際のツールfnは、独自の機能をjQueryにフックするための可用性です。jqueryは関数の親スコープにthisなるので、jqueryオブジェクトを参照することに注意してください。

$.fn.myExtension = function(){
 var currentjQueryObject = this;
 //work with currentObject
 return this;//you can include this if you would like to support chaining
};

これがその簡単な例です。2つの拡張を作成したいとします。1つは青い境界線を置き、もう1つはテキストの色を青にし、それらを連鎖させます。

jsFiddle Demo

$.fn.blueBorder = function(){
 this.each(function(){
  $(this).css("border","solid blue 2px");
 });
 return this;
};
$.fn.blueText = function(){
 this.each(function(){
  $(this).css("color","blue");
 });
 return this;
};

これで、次のようなクラスに対してそれらを使用できます。

$('.blue').blueBorder().blueText();

(これは、異なるクラス名を適用するなどのcssで最適に行われることを知っていますが、これは概念を示すための単なるデモであることを覚えておいてください)

この答えは、本格的な拡張機能の良い例です。


11
eachあなたのサンプルコードでスキップすることはできませんか?$.fn.blueBorder = function(){ this.css("border","solid blue 2px"); return this; };罰金をうまくいく.css()要素を超えるalerady反復します。
SoonDead 2013年

6
@SoonDead-jQueryオブジェクトがコレクションを保持している場合、css関数はコレクションごとにコレクションを自動的に反復するため、確かに可能です。これはthis、外側のオブジェクトがjqueryオブジェクトであり、内側のオブジェクトが要素自体を参照する場所の違いを示す例にすぎません。
Travis J

1
@SoonDead良いコメントですが、Travis Jがアイデア/原理を説明する方法が本当に好きです。:)
サンダー2014年

5
これは最高のコメントです-fnが単なるエイリアスであることを知ることは、なぜ誰かが気にする必要があるのか​​を知ることほど有用ではありません。この回答はそれを美しく示しました。
Gerard ONeill、2015

1
他の答えを検討した結果、これが主な概念を理解するのに簡単であることがわかりました。ありがとうございました。:)
VivekP '10 / 10/19

0

我々はjQueryのソースコードでjQuery.fn = jQuery.prototype = {...}あるためjQuery.prototype、オブジェクトは、の値はjQuery.fn単に同じオブジェクトへの参照となりjQuery.prototype既に参照。

これを確認するために、それがjQuery.fn === jQuery.prototype評価するtrue(それを行う)かどうかを確認し、同じオブジェクトを参照する

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.