16
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【jQuery】プラグインの作り方

Last updated at Posted at 2015-02-28

##サンプル
sampleというプラグインを定義して実行してみる。

プラグインの定義
//POINT1 即時実行の無名関数で囲うこと
(function($) {
  $.fn.sample = function(option){
    
    //POINST2 パラメータとデフォルト値のマージ
    var defaults = {text:'hello'};
    var option = $.extend(defaults,option);

    //ここに処理を書く!
         
    //POINT3 メソッドチェーンに対応するためthisを返す
    return(this);
  };
})(jQuery);

jQueryを読み込んで、プラグインの定義したファイルを読みこむ。
jQueryオブジェクトのメソッドにプラグインが追加されているので実行できる。

プラグインの実行
$('p').sample();

##POINT解説

POINT1 即時実行の無名関数で囲うこと

グローバル汚染しないため。

POINST2 パラメータとデフォルト値のマージ

オプションはオブジェクト$.extend()を使うとマージが簡単!

var option = $.extend(defaults,option);

POINT3 メソッドチェーンに対応するためthisを返す

これはマナー的な感じ。

参考:はじめてのjQueryのプラグインの作り方

16
17
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?