jQueryでは$.fnを拡張する事で、$()の返り値であるjQueryオブジェクトにメソッドを追加することが出来ます。
次のgreenifyプラグインでは、$(document.body).greenify();というメソッド呼び出しが可能になります。
実際に利用するためには、jquery.jsを読み込んだ後にgreenify.jsを読み込ませる必要があります。
<script src="jquery.js"></script>
<script src="greenify.js"></script>このjQueryプラグインがどのような仕組みで動いているのかを見てみましょう。
jQueryプラグインはprototype拡張のように $.fn.greenify = function (){} と拡張するルールでした。
jQuery.fnの実装を見てみると、実態はjQuery.prototypeであるため実際にprototype拡張していることがわかります。
// https://github.com/jquery/jquery/blob/2.1.4/src/core.js#L39
jQuery.fn = jQuery.prototype = {
// prototypeの実装
}$()は内部的にnewをしてjQueryオブジェクトを返すので、このjQueryオブジェクトではprototypeに拡張したメソッドが利用できます。
$(document.body); // 返り値はjQueryのインスタンスつまり、jQueryプラグインはJavaScriptのprototypeをそのまま利用しているだけに過ぎないということがわかります。
jQueryプラグインの仕組みがわかったのでどういう用途に有効な仕組みなのか考えてみましょう。
単純なprototype拡張であると言えるので、利点はJavaScriptのprototypeと同様と言えるかもしれません。 動的にメソッドを追加するだけではなく、既存の実装を上書きするmonkey patchのようなものもプラグインとして追加することができます。
これもJavaScriptのprototypeと同様で、prototypeによる拡張は柔軟すぎるため、 jQuery自体がプラグインのコントロールをすることが難しいです。
また、プラグインが拡張するjQueryの実装に依存し易いため、 jQueryのバージョンによって動かなくなるプラグインが発生しやすいです。
jQueryではそこをどうやってカバーしているかというと、 ドキュメント化されてないAPIは触っていけないというルールを設けているだけとなっています。
calculatorという拡張可能な計算機をjQuery Pluginと同じ方法で作ってみたいと思います。
calculator は以下のような形となります。
$.fnと同様にprototypeへのaliasを貼っているだけのただのコンストラクタ関数です。
calculator.fn = calculator.prototype;calculator(初期値)と書けるようにしているため、少し特殊なコンストラクタとなっていますが、この拡張の仕組みとは関係ないのでとりあえず置いておきましょう。
calculator.jsには何も実装が入ってないので、プラグインで四則演算の実装を追加してみます。
calculator-plugin.jsでは、calculator.fn.addというようにaddというメソッドを追加しています。
また、モジュールで依存関係を示していますがやっていることはjQueryと同じで、calculator.jsを読み込んでからcalculator-plugin.jsを読み込んでいるだけですね。
<script src="jquery.js"></script>
<script src="greenify.js"></script>これを使うとcalculator#addといったメソッドが利用できるようになるので、以下のように書くことが出来ます。
実装をみてもらうと分かりますが、JavaScriptのprototypeの仕組みをそのまま利用しています。
そのため、特別な実装は必要なく
「拡張する時はcalculator.prototypeの代わりにcalculator.fnを拡張して下さい」
というルールがあるだけとも言えます。
ここではjQueryプラグインの仕組みや実装について学びました。
- jQueryプラグインは
jQuery.fnを拡張する jQuery.fnはjQuery.prototypeと同じである- jQueryプラグインとは
jQuery.prototypeを拡張したものといえる - 柔軟であるが、プラグインが行うことを制御することが難しい