読者です 読者をやめる 読者になる 読者になる

frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

JSをプラグイン化 コンストラクタとインスタンス トグル機能を例に解説

スポンサードリンク

プラグイン作成する際、$.fn.hogehogeでオプションを追加していきますが、より機能ごとに関数を作っていく場合コンストラクタとインストラクタを絡めると効率的に組めていいと思います。

例えば、以下簡単な例ですがトグルを初期設定とトグル機能に分けています。
解説はコメントに書いています。(自分は完全に理解してるわけではないので、間違いがあるかもしれません。)
デモ

See the Pen qqEXjb by funclur (@funclur) on CodePen.


// 実行
$(function(){
	$('.js-toggle').setToggle();
});
(function(){
	'use strict';
	// プラグイン化
	$.fn.setToggle = function(options){
		var t = this,
		options = $.extend({
			toggleHook : '.toggle-hook',
			toggleContent : '.toggle-content',
			isClose : 'is-close',
			open : '\u958b\u304f', // 開く
			close : '\u9589\u3058\u308b' // 閉じる
		}, options);

		// インスタンス化
		return t.each(function(){
			this.setToggle = new Toggle(this, options);
			this.setToggle.init();
		});
	};

	// 変数に関数を代入(コンストラクタ)
	var Toggle = function(element, options){
		// 変数生成
		var t = this;
		t.o = options;
		t.$root = $(element);
		t.$toggleHook = $(t.o.toggleHook);
		t.$toggleContent = $(t.o.toggleContent);
		t.isClose = t.o.isClose;
		t.open = t.o.open;
		t.close = t.o.close;
	};
	// オブジェクトリテラルでプロトタイプにメソッドを宣言
	Toggle.prototype = {
		//初期処理
		init : function(){
				var t = this;
				t.set();
				t.toggle();
			},
		set : function(){
				var t = this;
				t.$root.addClass(t.isClose);
				t.$root.find(t.$toggleHook).append('<span class="toggle-text">' + t.open + '</span>');
		},
		toggle : function(){
			var t = this;
			t.$toggleHook.on('click', function(e){
				e.preventDefault();
				var $text   = $('.toggle-text'),
				$target = $(this).closest(t.$root);
				if($target.hasClass(t.isClose)){
					$target.removeClass(t.isClose).find($text).text(t.close);
				}else{
					$target.addClass(t.isClose).find($text).text(t.open);
				}
			});
		}
	};
})();

ルーセルなど機能を複数作る必要がある場合は、このやり方で行こうと思います。