レスポンシブの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() {

}