Модульный шаблон с элементами DOM

Question

Я пытаюсь структурировать свой Javascript, используя шаблон модуля.

var appTest = { 

    settings: { 
     date : $(".date") 
    }, 

    init: function() { 
     s = this.settings; 
     this.setDate(); 
    }, 

    setDate: function() { 
     var monthNames = [ "January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December" ]; 
     var dt = new Date(); 
     s.date.html(dt.getDate()+" "+monthNames[dt.getMonth()]+" "+dt.getFullYear()); 
     //$(".date").html(dt.getDate()+" "+monthNames[dt.getMonth()]+" "+dt.getFullYear()); 
    } 

}; 

$(function(){ 
    appTest.init(); 
}); 

Прямо сейчас элемент dom с классом .date не обновляется с новой датой. Однако, если я раскомментирую прокомментированную строку, она работает нормально.

Я все еще пытаюсь найти свой путь вокруг Javascript.

Answer 1

Некоторые проблемы в вашем модуле:

• использует глобальную переменную, s, без объявления и рисков, связанных с именем столкновения. Вы должны вставить ее
• вы подвергаете настройкам
• использовать DOM, прежде чем он будет готов
• вы звоните setDate на объекте, который не имеет эту функцию

Вы могли бы исправить эти проблемы, как это :

var appTest = (function(){ 
    var monthNames = [ "January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December" ]; 
    var settings = {}; // this is private (not visible from outside the module) 
    var module = {}; 
    module.init = function() { 
     settings.date = $(".date"); 
     module.setDate(); 
    }; 
    module.setDate = function() { 
     var dt = new Date(); 
     settings.date.html(dt.getDate()+" "+monthNames[dt.getMonth()]+" "+dt.getFullYear()); 
    }; 
    return module; 
})(); 

$(function(){ 
    appTest.init(); 
}); 

Answer 2

Я бы предложил использовать прототипы. Вы можете сделать синглтон как:

var App = (function AppModule() { 

    function App() { 
    // All your options here 
    this.$date = $('.date'); 
    this.init(); // initialize singleton 
    } 

    App.prototype = { 

    init: function() { 
     this.setDate(); 
    }, 

    setDate: function() { 

     var months = [...] 
     , monthsdate = new Date; 

     this.$date.html(...); 
    } 
    }; 

    return new App; // a singleton 

}());