Jqueryで、ライブラリを自作するときの初期設定

提供:wiki - PCスキルの小技・忘却防止メモ
移動: 案内, 検索

jqueryで、ライブラリを自作するときの初期設定

目次

基本

下記の「○○○○」内にいろいろ追加していく。 適当なファイル名で保存して、JSファイルとして読み込めば利用できる。

(function($) {
	$.extend({
		○○○○
	});
})(jQuery);

例1

一つだけ追加した場合。

(function($) {
	$.extend({
		testAlert: function testAlert(){
			alert("テスト");
		}
	});
})(jQuery);

※「testAlert: function testAlert(){」は「testAlert: function (){」としてもOKっぽい

使い方は下記のような感じ。

$.testAlert();

例2

二つ以上追加する場合は、「,(カンマ)」で区切る。

(function($) {
	$.extend({
		testAlert: function testAlert(){
			alert("テスト");
		},
		testAlert2: function testAlert2(){
			alert("テスト2");
		}
	});
})(jQuery);

使い方は下記のような感じ。

$.testAlert();
$.testAlert2();

まとめ

// ▼設定
(function($) {
  $.プラグイン名 = {
  
    メソッド名: function(引数) {
      ~ 処理内容 ~
    },
    
    メソッド名: function(引数) {
      ~ 処理内容 ~
    }
    
  };
})(jQuery);

// ▼呼び出し
$.プラグイン名.メソッドの名前(引数);

▼プラグイン名に「zebra」を設定して「$.zebra.hoge()」とかしてみたい

// ▼設定
(function($) {
  $.zebra = {
  
    hoge: function(引数) {
      ~ 処理内容 ~
    },
    
    foo: function(引数) {
      ~ 処理内容 ~
    }
    
  };
})(jQuery);

// ▼呼び出し
$.zebra.hoge(引数);

関連項目