レスポンシブのJS切り替え

CSSメディアクエリみたいに、
レスポンシブでJS切り替えを書く。

//──────────────────────────────────
//レスポンシブJS切り替え
//──────────────────────────────────
$(function() {
	var windowWidth = $(window).width();
	var breakpoint = 768;
	var idTimer = null;
	var eventFlg = "";

	// ──────────────────────────────────
	// 初期実行
	// ──────────────────────────────────
	resizeInit();

	// ──────────────────────────────────
	// リサイズ
	// ──────────────────────────────────
	$(window).on('resize', function() {
		clearTimeout(idTimer);
		idTimer = setTimeout(function() {
			resizeInit();
		}, 300);
	});


	// ──────────────────────────────────
	// リサイズ時に実行
	// ──────────────────────────────────
	function resizeInit() {

		windowWidth = $(window).width();

		// PCの場合
		if (breakpoint <= windowWidth) {
			eventFlg = "pc";
			resetClassPC();

		// SPの場合
		} else if (breakpoint > windowWidth) {
			eventFlg = "sp";
			resetClassSP();
		}

	}


	// ──────────────────────────────────
	// for PC
	// ──────────────────────────────────

	// ──────────────────────────────────
	// リセット処理
	// ──────────────────────────────────
	function resetClassPC() {

	}


	// ──────────────────────────────────
	// それぞれのイベントの始めにif文でどっちか指定するルールだけ踏襲しつつ、
	// あとは好きにSPのコードを書く
	// （関数化するといいかも）
	// ──────────────────────────────────
	// ──────────────────────────────────
	// 例：gnavShow
	// ──────────────────────────────────
	$('.js-gnavBtn').on('click', function() {
		//SP版のみで実行
		if (eventFlg != "sp") return true;

		$('.js-gnav').addClass('is_active');
	});
	$('.js-gnavCloseBtn').on('click', function() {
		//SP版のみで実行
		if (eventFlg != "sp") return true;

		$('.js-gnav').removeClass('is_active');
	});




	// ──────────────────────────────────
	// for SP
	// ──────────────────────────────────

	// ──────────────────────────────────
	// リセット処理
	// ──────────────────────────────────
	function resetClassSP() {

	}


	// ──────────────────────────────────
	// それぞれのイベントの始めにif文でどっちか指定するルールだけ踏襲しつつ、
	// あとは好きにSPのコードを書く
	// （関数化するといいかも）
	// ──────────────────────────────────
	// ──────────────────────────────────
	// 例：gnavShow
	// ──────────────────────────────────
	$('.js-gnavBtn').on('click', function() {
		//SP版のみで実行
		if (eventFlg != "sp") return true;

		$('.js-gnav').addClass('is_active');
	});
	$('.js-gnavCloseBtn').on('click', function() {
		//SP版のみで実行
		if (eventFlg != "sp") return true;

		$('.js-gnav').removeClass('is_active');
	});

});

ポイント

それぞれのイベントの始めにif文でどっちか指定する。
関数化してpc、spを引数で指定してもOK。

$('.selector').on('click', function() {
	//SP版のみで実行
	if (eventFlg != "sp") return true;

	console.log('Hello world!!!');
});

PC/SP版でリセットすることがあれば、
resetClassSP()という名前でリセット用関数をつくったので、そこで指定。

function resetClassSP() {

}