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 回答