jQueryのソースコードやライブラリなどを見ていると$.fnみたいな記述があると思います。
jQuery.fn のfnってどういう意味?
結論から言ってしまうと、fnはprototypeプロパティのエイリアスです。
javascriptはprototypeプロパティを使って、既存のコンストラクタにメソッドを追加していくことが可能です。
簡単なprototypeのサンプル
// constructor function
var Product = function(name, price) {
this.name = name;
this.price = price;
}
var testProduct = new Product('banana', 100);
console.log( testProduct );
// result
{"name":"banana","age":100}上記で基本的なコンストラクタを作成してみました。実際にprototypeプロパティを使ってメソッドを追加
// add method
Product.prototype.getName = function() {
return this.name;
}
// add property
Product.prototype.stock = 10;上記のように、あとから、<code>prototype</code>プロパティを使うことによって、既存のコンストラクタに新しいプロパティやメソッドを追加することが可能です。
$.fnの使い方
prototypeプロパティのエイリアスであることは分かったけど、実際にどのように使用できるのかを解説します。
プロパティを追加して、プラグインを作成する
$.fnがprototypeのエイリアスであるということは、上記例のように、プロパティやメソッドを追加できます。
簡単なプラグインのサンプル
$.fn.textRed = function() {
this.css("color", "red");
};
// surrounded by span turns red
$("span").textRed();簡単ですね？実際にプラグインを実装する際は下記のことに気を付けてください。
メソッドチェーンを有効にする
// Care jQuery Method Chaining
$.fn.textRed = function(){
this.css("color", "red");
return this;
};
// What is Method Chaining?
$("span").textRed().addClass("warning");メソッドチェーンを使用可能にするために、return thisを追記します。そうすることで、上記例でtextRed()に続けて記載したaddClass()が機能するようになります。
ほかのライブラリと併用される・併用することを想定する
$はjQueryのエイリアスなのですが、ほかのライブラリなどでも使用されるケースもあります。
なので、名前が被らないように下記のようにスコープを限定して記載します。
(function ($) {
$.fn.textRed= function() {
this.css( "color", "red" );
return this;
};
}(jQuery));そのほかの、$.fnの使い方
・基本となる、例えばbase.js、javascriptファイルを一つ作成して全部のページで読み込む。
・フレックススライダーなどのライブラリを導入するが、ライブラリは使用するページのみ読み込む。
上記の場合、base.jsにフレックススライダーの記述を書くとライブラリを読み込んでいないページでエラーになります。
そのため、スライダーを読み込んだページを条件文で切り分けたいときなども$.fnが使えます。
if ($.fn.flexslider) {
$('.image-slider').flexslider({
});
}$.fnにflexsliderというプロパティが追加されているときだけ、実行されます。
以上、$.fnの使い方について、簡単ですが紹介してみました。
コンストラクタにしろ、プラグインにしろ細かく語ると大変なので、簡潔にしか説明していませんがご了承ください。
jQueryおすすめの書籍
jQueryの書籍は、古いものが多いです。ただ、jQuery自体は今も進化しています。
📦