Инкапсулируйте код JavaScript в глобальном объекте для более ясного кода

Question

Я пытаюсь заставить все работать, используя jQuery и jQueryUI, DatePicker, встроенный режим.

Я хотел бы поместить весь мой код в глобальный объект и использовать его для функции инициализации datepicker (beforeShowDay, changeMonthYear). У меня также есть несколько служебных функций.

Я застрял, потому что я действительно не знаю, как действовать.
Я прочитал довольно много статей, учебных пособий, обсуждений потоков на стеке - особенно в области this и т. Д., Но теперь я не знаю, с чего начать!

Это то, что я имею до сих пор:

var Calendar = (function() {
var obj = this;

var calendar = {
    datescache: [],
    bsd: function (date) {
        var offset =  this.formatNum(date.getMonth()+1)+'-'+this.formatNum(date.getDate());
        if (thedate[offset] != undefined) {
            return [true, 'bold', thedate[offset] + ' événement(s)'];
        } else {
            return [true];
        }
    },
    formatNum: function (i) {return ('0'+i).slice(-2);},
    getEventsForDate: function(year, month, inst) {
        var date = this.datescache;
        if (this.datescache[month] === undefined) {
            console.warn('uncached: '+month);
            $.ajax({
                url: '/event/get-event-count/year/'+year+'/month/'+month+'/format/json',
                success: function (resp) {
                    date[month] = resp.events;
                },
                async: false
            });
        }
        console.log('return: '+month);
        return date[month];
    }
}

return calendar;    
})();


$('#calendar').datepicker({
    dateFormat: "dd\/mm\/yy",
    showOtherMonths: true,
    selectOtherMonths: true,
    beforeShowDay: Calendar.bsd,
    onChangeMonthYear: Calendar.getEventsForDate,
});

Конечно, у меня есть ошибка в строке:

var offset =  this.formatNum(date.getMonth()+1)+'-'+this.formatNum(date.getDate());  

потому что this ссылается на объект datepicker, так как мы находимся в функции обратного вызова beforeShowDay, которая заботится о передаче экземпляра datepicker в функцию как this. Но мне нужно this для ссылки на мои служебные функции, такие как formatNum.

• С чего мне начать?
• лучше попытаться расширить объект datepicker (еще не пробовал)?

Заранее спасибо за помощь!

РЕДАКТИРОВАТЬ 1

Хорошо, с некоторыми чтениями и первым ответом мне удалось заставить что-то работать:

var Calendar = (function() {
  var calendar = function() {
    var self = this;

    this.datescache = [];

    this.bsd = function (date) {
       [[... I use for instance self.datescache ...  ]]
    }

    [[...]]

  };
  return new calendar();
})();

Кажется, это работает нормально.

• Требуется ли глобальная инкапсуляция?

Еще раз спасибо!

Answer 1

Для манипуляции this в функциях обратного вызова и других функциях есть несколько опций.

Вместо вызова this внутри функции вы можете вызвать псевдоним, например that или self. В вашем случае переменная obj = this уже является псевдонимом, поэтому вы можете вызвать obj.formatNum

Другой вариант - Function.bind, который позволяет вам сделать это:

foo : (function() {
    ...
}).bind(obj),
...

Обратите внимание, что Function.bind - вещь ES5. Вместо этого вы можете использовать _.bind или _.bindAll из символов подчеркивания.

Еще один вариант заставить работать область this - это сделать

beforeShowDay: function() {
    Calendar.bsd();
},
onChangeMonthYear: function() {
    Calendar.getEventsForDate();
},

Разница здесь заключается скорее не в том, чтобы передавать функцию (которая при вызове будет вызываться с другим this объектом), а в том, что вы передаете функцию, которая вызывает вашу функцию ON , к вашему собственному объекту Calendar, что заставляет this будет Calendar.

См:

var f = function() { console.log(this); }
var a = {
    b: f
};
var c = {}
c.d = a.b;
c.e = function() {
    a.b();
};

f(); // window
a.b(); // a
c.d(); // c
c.e(); // calls a.b(); so a

this область действия - это любой объект, для которого вызывается метод.