【JavaScript】HTMLコーダーを脱出するためのjQueryプラグインの作成

読了: 約 4 分

JavaScriptを勉強し始めて、簡単な音楽アプリをつくってみたのですが、
ほかにも何かしたいなぁと漠然と思っていてプラグインを作りたくなったので
作成法など備忘録的にメモしておきます。

概要

1 目的
2 目次
3 jQuery: jQueryプラグインの仕組み
4 jQuery: jQueryプラグインのポイント
- 4.1 (function($){})(jQuery);で囲う
- 4.2 Authorコメントの書き方
5 jQuery: jQueryプラグインの簡単解説
6 参考
- 6.1 オブジェクト指向を勉強しておくとプラグインの作る際に理解しやすいと思います
- 6.2 作り方で参考になる

目的

大体備忘録的な感じで書いている事が多いのですが、備忘録としても
何かの目的 ⇒ メモという行動　だと思いますのでアウトプットを具体的にしておこうと思います。

jQueryプラグインの作成方法
コーディング作業効率化
保守性の高いコードの保有

jQuery: jQueryプラグインの仕組み

特に難しいルールや構造はなく、
プラグインのコードのファイルの命名と、
特徴であるメソッドチェーンのため自身を返すこと。

jQuery.fn.プラグイン名 = function() {
    ...
}

jQuery.fnにメソッドを定義。

jqueryプラグインのサンプル

jQuery: jQueryプラグインのポイント

(function($){})(jQuery);で囲う

他のプラグインやJavaScriptと干渉し合わないように、全体を無名関数にしておきます。
色々なjQueryのプラグインを見ていると分かるかと思います。
逆に囲ってないものは囲ってあげて、記述を変えてあげる方が良いかと。

(function($){
  jQuery.fn.プラグイン名 = function() {
    ...
  }
})(jQuery);

ラッパー関数に jQuery キーワードを適用。
こうすることで、fn プロパティーを使用する場合のように、プラグインの中でドル記号を使用することができます。
ラッパー関数を用意できると、プラグインのどこででも、サードパーティーの他のプラグインを妨害することなく、jQuery キーワードの代わりにドル記号を使用できるようになります。

参考カスタムの jQuery プラグインを作成する

Authorコメントの書き方

なんとなくコメントがあった方がポいですよね。笑
こういう地味な所でも自分で作ったんだというやりがいをつくりつつ覚えていけたら良いですね！

/**
 * Created with Dreamweaver. (Dreamweaverは見た事がないのですが、作ったのはDWだったので)
 * User: ユーザー名
 * Date: 2012/11/25
 * License: The MIT License (MIT)
 * jquery animation
 */

jQuery: jQueryプラグインの簡単解説

デモとして簡単ですが、クリックしたらfadeOutするものです。

HTML
HTML側に下記を記述します。

$(function() {
	$('#button').fade({
		fadeSpeed: 1000,
		hideEl: '#textArea'
	});
});

jQuery

optionsを設定してdefault値を設定できます。
今回はfadeOutのspeedを1000として、
HTML側のid textAreaというものをフェードアウトしています。
targetのオブジェクトを上書きしないためにと次のように第1引数に{}空のオブジェクトを指定。
option オブジェクトは、$.fn.fade.defaults を options で拡張した結果のオブジェクト

その下で、この場合thisはHTML側の$("#button")を指しています。

(function($){
    $.fn.fade = function(options) {
	var option = $.extend({}, $.fn.fade.defaults, options);
	$(this).click(function(){
	  $(option.hideEl).fadeOut(option.fadeSpeed);
	});

      $.fn.fade.defaults = {
        fadeOut:1000,
	hideEl:'#textArea'
　　　　};
  }
})(jQuery);