JQueryのプラグインを作ろうかと公式サイトの「How to Create a Basic Plugin」を読んだ覚書

MKJ aoiebisan 1024x682 JQueryのプラグインを作ろうかと公式サイトの「How to Create a Basic Plugin」を読んだ覚書

公式サイト
「How to Create a Basic Plugin」
http://learn.jquery.com/plugins/basic-plugin-creation/
基本的なプラグインの作り方っていうのを読んだのでその覚書です。

公式サイトもあわせて読んでみるとよいかと思います。

一番最初の簡単な例

$.fn.greenify = function() {
    this.css( "color", "green" );
};

$("a").greenify(); 

JQueryはオブジェクトを$.fnからとってくるとかいてますね。
なので

$.fn.~

とつけることでJQueryに関数を追加できるということです。
ちなみに同じ名前のものを追加するとどうなるかというと上書きされます。
後から実行されたほうが強くなります。

http://api.jquery.com/

をみて衝突しないようにするしかないでしょう。
あと、他のJavaScriptライブラリを使用する場合も注意が必要です。

たとえば$はProtoType.jsで使われていて(実はwordpressではデフォルトで使われていたりします。)そのため$.~の代わりに必ずJQuery.~とする人もいます。
※公式サイトに以下の内容が書いてます。
if you’re using another library with jQuery, you will have to make jQuery not use the $ with jQuery.noConflict().

$.fn.greenify = function() {
    this.css( "color", "green" );
    return this;
}
//実行
$("a").greenify().addClass("greenified");

return で

thisを返してます。

これはどういうことかというとオブジェクト自体を返しているということです。

そのため、後につけたaddClassというメソッド呼び出しが実行されます。

最初のものだと、thisが返却されていないのでaddClassとしてもどのオブジェクトに対して実行すればよいのかわからないので何もおきません。


(function ( $ ) {
    $.fn.greenify = function() {
    this.css( "color", "green" );
    return this;
};

$.ltrim = function( str ) {
    return str.replace(/^\s+/, '');
};

$.rtrim = function( str ) {
    return str.replace(/\s+$/, '');
};

}( jQuery ))

;

関数の衝突を起こさないように作るためには上記のようにかくといいということです。

ちょっともどりますが上記を


(function ( $ ) {
    $.fn.greenify = function() {
    this.css( "color", "green" );
    return this;
};
}( jQuery ));

とすると先ほどのコードとまったく同じです。

追加してある

$.ltrim = function( str ) {
return str.replace(/^\s+/, '');
};
$.rtrim = function( str ) {
return str.replace(/\s+$/, '');
};

この部分は正規表現を使った文字列の置換えです。
単純に
str.replace(/^\s+/, ”);
\s(空白文字)を^(先頭)から+(1つ以上)のものを”(空)に置換え
str.replace(/\s+$/, ”);
\s(空白文字)が+(1つ以上)で$(最後まで)のものを”(空)に置換え
という意味です。

書き方の悪い例


(function( $ ) {
$.fn.openPopup = function() {
// ポップアップが開く
};
$.fn.closePopup = function() {
// ポップアップが閉じる
};
}( jQuery ));

いろいろな関数名をつけると関数の衝突がおきるのでなるべくまとめたほうがよいということです。

こんな風にかいたほうがよい。


(function( $ ) {
$.fn.popup = function( action ) {
if ( action === "open") {
    // ポップアップが開くコード
} if ( action === "close" ) {
    // ポップアップが閉じるコード
}
};
}( jQuery ));

よくあるパターンですがすべての要素に対して処理を行いたい場合


$.fn.myNewPlugin = function() {
    return this.each(function() {
    // 対応する要素に関しての処理を書いておく
    });
};

こんな感じにかくとよいでしょう。

拡張させたい場合オプションをこんな感じにかいておくとよいでしょう。


(function ( $ ) {
$.fn.greenify = function( options ) {
     // This is the easiest way to have default options.
         var settings = $.extend({
         "color": "#556B2F", // These are the defaults
         "background-color": "white"
     }, options );
         // Greenify the collection based on the settings variable
     return this.css({
         "color": settings.color,
         "background-color": settings.background-color
     });
};
}( jQuery ));

//こんな感じに実行
$("div").greenify({
    "color": "orange"
});

上記の例だと何も設定しない場合にはデフォルトのカラー”color”: “#556B2F”,”background-color”: “white”が設定され、設定して上記のように呼び出した場合だと呼び出したときの設定を使用するようになります。


(function( $ ){
    $.fn.showLinkLocation = function() {
        return this.filter("a").each(function() {
        $( this ).append( " (" + $( this ).attr("href") + ")" );
    });
};
}( jQuery ));

// 実行する
$("a").showLinkLocation();

上記のようにかいて実行すると以下のような結果となります。

<!-- プラグインを呼び出す前: -->
<a href="page.html">Foo</a>
<!-- プラグインを呼び出した後: -->
<a href="page.html">Foo (page.html)</a>

これはどういうことかというとa要素のhrefを取得して追加ということをしています。
※プラグインが呼び出された後には (page.html)が追加されます。

さらに最適化したものは以下になります。

(function( $ ){
    $.fn.showLinkLocation = function() {
        return this.filter("a").append(function() {
        return " (" + this.href + ")";
    });
};
}( jQuery ));

公式サイト
「How to Create a Basic Plugin」
に書いてあるものです。
覚書程度に書いておきました。

翻訳したわけではないので書きもれているところ等あるかもしれません。
公式サイトは簡単な英語と簡単な例なので英語がそんなに得意ではない人でも公式サイトを読んでもすぐにわかると思います。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">