Javascript 事件处理程序的模块模式使用

我的问题是关于

Javascript模块模式的有效使用。下面是我代码中的简化模块。我想把它重新分解成模块。每个模块将有几个100 LOC

问题：以下哪种方法
1
vs
2
vs
3
更好？在
方法1
中，每次鼠标悬停在元素上时创建一个新对象是浪费吗？请随意评论/建议替代实施方案

上下文：我有几十个具有
.myclass
属性的元素，它们需要在网页的生命周期中偶尔处理事件

(function ($) {

  var MyModule = function (element) {
      this.element = element
  }

  MyModule.prototype.color1 = function () {
      $(this.element).css('backgroundColor', '#aaa');
  }

  MyModule.prototype.color2 = function () {
      $(this).css('backgroundColor', '#aaa');
  }

  //Event handlers for MyModule 
  $('#mydiv').on('mouseenter', '.myclass', function(evt) {
      //Method 1
      var myMod = new MyModule(this);
      myMod.color1();

      //Method 2
      MyModule.prototype.color2.call(this)          
  });

  $('body').on('mouseleave', function(evt) {...});


})(jQuery);


更新

如果我坚持使用模块模式，我想了解在事件处理程序中引用模块的有效方法是什么。因此消除了对象文字方法。这造成了混乱。出于教学上的原因，我更愿意学习上述内容，而不是将其简化为使用对象文字

使用对象文字的替代实现

原型设计是javascript的一大优点，但在这里，您使用它是完全错误的，不需要这个模式来做像这样简单的事情

jQuery(function($) {

    $('#mydiv').on({
        mouseenter: function(evt) {
            $(this).css('backgroundColor', '#aaa');
        },
        mouseleave: function(evt) {

        }
    }, '.myclass');

});

创建对象的新实例以获取元素并更改其颜色并不是您真正需要做的事情。
在您的示例中，似乎有一个假设，即当您使用模块模式时，您需要创建一些MyModule对象或命名空间。在我看来，这是不正确的

在大大简化的示例中，创建的MyModule不需要位于IIFE之外，因为您不会在IIFE之外返回MyModule对象，也不会将其分配给某个全局名称空间。但至关重要的是，这是在备选方案1、2和3之间进行选择的动机。您是否需要在每次调用时创建一个实例，是否可以只创建一个单例实例，或者是否可以只在闭包中分配一个函数，这取决于事件处理程序实际需要做什么，而不是取决于对模块模式最佳实践的一些理论讨论。您提到的所有备选方案都不会对代码的模块化能力产生任何影响

在所写的示例中，有第四种选择比您提到的三种更有效

(function ($) {
  var MyModule = {
    color : function (evt) {
      // I'm not sure whether you want this or evt.target
      $(this).css('backgroundColor', '#aaa');
    }  
  }

  //Event handlers for MyModule 
  $('#mydiv').on('mouseenter', '.myclass', MyModule.color);
})(jQuery);

您不必为附加到的每个DOM元素创建新的函数实例处理程序。事件信息会自动传递给函数，
此
是处理程序附加到的DOM元素。这两个信息都由上的jQuery传递给处理程序，因为原始浏览器JavaScript就是这样处理事件的。如果这是处理程序完成其工作所需的全部信息，那么您只需要处理程序的一个实例。
同意。然而，这是代码的简化版本。实际上，它只有几千行，我想把它重新分解成模块。每个模块只有几百行，有十几种方法。记住这一点&可维护性/模块性，你有什么建议？如果你实际上不需要一个新的类实例，但只是用它来分离代码，而是将代码分解成块和函数，我建议不要使用原型，如果适合您所做的事情，甚至可以使用文本。您是否可以通过扩展上面的示例来建议一个用例，在其中实际拥有一个新的类实例会很有用？@buffer-我真的想不出有什么好的理由以这种方式在jQuery中使用这种模式。jQuery使用
$.fn
和插件有自己的方法，因此使用原型必须非常特别。我利用了Bootstrap模式对话框中的一些编码样式：。我在这里遵循Bootstrap使用的代码模式：（不制作jQuery插件）。我知道当前的示例可以很容易地简化为对象文字。然而，我试图理解，在事件处理程序中引用模块的有效方法是什么？如果我坚持模块模式。出于教学方面的原因，我可能会取消方法3。什么是最有效的取决于你需要做什么——正确的答案是情境性的，没有普遍的答案。有一些一般原则，但这些原则有很多例外。
(function ($) {
  var MyModule = {
    color : function (evt) {
      // I'm not sure whether you want this or evt.target
      $(this).css('backgroundColor', '#aaa');
    }  
  }

  //Event handlers for MyModule 
  $('#mydiv').on('mouseenter', '.myclass', MyModule.color);
})(jQuery);