1

モジュール パターンを使用して 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(); 
});

現在、クラス .date の dom 要素は新しい日付で更新されません。ただし、コメントされている行のコメントを外すと、問題なく動作します。

私はまだJavascriptを回避しようとしています。

4

2 に答える 2

2

モジュールのいくつかの問題:

  • グローバル変数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(); 
});
于 2013-09-04T06:12:34.777 に答える
0

プロトタイプの使用をお勧めします。次のようなシングルトンを作成できます。

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

}());
于 2013-09-04T06:15:57.447 に答える