DOM 요소가있는 모듈 패턴

Question

모듈 패턴을 사용하여 자바 스크립트를 구조화하려고합니다.

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(); 
}); 

지금은 .date 클래스의 DOM 요소가 새 날짜로 업데이트되지 않습니다. 그러나 주석이 달린 줄의 주석을 제거하면 올바르게 작동합니다.

나는 여전히 자바에 관한 나의 길을 찾고있다. 모듈에서

Answer 1

일부 문제 :

• 그것을 선언하지 않고 이름 충돌의 위험과 글로벌 변수, s를 사용합니다. 당신은
• 당신이 그것을 준비하기 전에
• 당신은 당신이 같은 이러한 문제를 해결할 수있는이 기능

이없는 개체에서 setDate를 호출 DOM을 사용하는 설정을

노출 포함한다 :

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 

}());