82mou
12/12/2016 - 1:14 PM

ES5デザインパターン

ES5デザインパターン

var HOGE = HOGE || {};
HOGE.Fn1 = HOGE.Fn1 || {};
HOGE.Fn2 = HOGE.Fn2 || {};

// モーダルを開く
HOGE.Fn1 = function($target) {
    this.$target = $target;
};
HOGE.Fn1.prototype = {
    init: function() {
        this.bindEvent();
    },
    bindEvent: function() {
        var self = this;

        this.$target.on('click', function(e) {
            e.preventDefault();
            self.show();
        });
    },
    show: function() {
        console.log('hoge');
    }
};

HOGE.Fn2 = function($target) {
    this.$target = $target;
};
HOGE.Fn2.prototype = {
    init: function() {
        this.bindEvent();
    },
    bindEvent: function() {
        var self = this;

        this.$target.on('click', function(e) {
            e.preventDefault();
            self.modal();
        });
    },
    modal: function() {
        console.log('fuga');
    }
};

$(function() {
    var fn1 = new HOGE.Fn1();
    fn1.init();

    var fn2 = new HOGE.Fn2();
    fn2.init();
});