具有DOM元素的模块化模式

Modular pattern with DOM elements

本文关键字：模块化 模式 元素 DOM 具有      更新时间：2023-09-26

我正在尝试使用模块模式构建我的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(); 
});

现在，带有class.date的dom元素没有用新日期更新。但是，如果我取消注释被注释的行，它就可以正常工作。

我仍在努力寻找绕过Javascript的方法。

模块中的一些问题：

  • 它使用了一个全局变量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(); 
});

我建议使用原型。你可以制作一个类似于的单例

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
}());
相关文章：