jQueryでは、$。myFunctionと$ .fn.myFunctionの違いは何ですか？|Codeflow

jQueryでは、$。myFunctionと$ .fn.myFunctionの違いは何ですか？

私はjQueryのプラグインを書くことを検討しており、$。fと$ .fn.fの違いを理解しようとしています。

プラグインの作成者が両方を使用するか、時々$ .f = $ .fn.fを割り当てることを見てきました

誰かが私にこれを説明することができますか、推論、利益など？

3 Answer

jQueryのソースコードを見ると、事態が明確になります。ところで、 jQuery`と $ `は同じオブジェクトを参照しています。これがjQueryオブジェクトの定義方法です：

var jQuery = function( selector, context ) {
    return new jQuery.fn.init( selector, context );
}

jQuery`は関数であり、Javascriptでは、関数は Function`型のオブジェクトでもあります。したがって、 jQuery.f`または $ .f`は、jQueryの Function`オブジェクトに f`をアタッチするか、必要に応じてjQueryクラスを呼び出します。

jQueryのソースを見ると、 jQuery.prototype`が jQuery.fn`に割り当てられていることがわかります。

jQuery.fn = jQuery.prototype

したがって、 jQuery.fn.f = ..、または` $ .fn.f = ..、または `jQuery.prototype.fのように、メソッド（またはプロパティ）を jQuery.fn`にアタッチするときは常に= ..`または `$ .prototype.f = ..`の場合、このメソッドはこのjQueryクラスのすべてのインスタンスで使用できます（Javascriptにはクラスはありませんが、理解に役立つ場合があります）。

`jQuery（"＃someID "）`のように、 `jQuery（）`関数を呼び出すと、この行に新しいjQueryインスタンスが作成されます：

return new jQuery.fn.init( selector, context );

そしてこのインスタンスにはプロトタイプにアタッチしたすべてのメソッドがありますが、 `Function`オブジェクトに直接アタッチしたメソッドはありません。

適切な場所で定義されていない関数を呼び出すと、例外が発生します。

$.doNothing = function() {
    // oh noez, i do nuttin
}

// does exactly as advertised, nothing
$.doNothing();

var jQueryEnhancedObjectOnSteroids = $("body");
// Uncaught TypeError: Object # has no method 'doNothing'
jQueryEnhancedObjectOnSteroids.doNothing();

'' '' '

ああ、最後に長いスレッドを短くして質問に答えるために-`$ .f = $ .fn.f`を実行すると、プラグインまたはユーティリティメソッド（jquery lingo）として関数を使用できます。

Source

$ .f`はユーティリティ関数で、 $ .fn.f`はjQueryプラグイン/メソッドです。

ユーティリティ関数は、基本的にjQuery名前空間内の関数であり、何らかの操作を実行するのに役立ちます。たとえば、 `$ .isArray（obj）`はオブジェクト `obj`が配列かどうかをチェックします。関数を頻繁に使用する場合はjQuery名前空間に関数を配置し、グローバルな名前空間の汚染を回避すると便利です。

一方、jQueryメソッドはjQueryオブジェクト/ラップされたセットで動作します。たとえば、 $（document.body）.append（ '

こんにちは

'）; Helloを含む段落をドキュメントのbody要素に追加します。 $ .fn`は、jQueryの以降のバージョンでの $ .prototype`の省略形です（以前のバージョンのライブラリでは常にそうであったとは限りませんでした）。独自のプラグインを作成するときにこれを使用します。

Source

$ .fn.f`は単に jQuery.prototype`へのショートカットです

`fn`を使用すると、extendメソッドを使用せずにプラグインメソッドを追加できます。

jQuery.fn.myPlugin = function(opts) { ... }

Source