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

Question

我的问题是关于 JavaScript 模块模式 的高效使用。下面是我的代码中的一个简化模块。我想将其重构为模块。每个模块将有几百个 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);

---

更新

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

使用对象字面量的替代实现

... Code Removed ...

Answer 1

原型(prototype)设计是 javascript 的一大优点，但在这里你完全错误地使用它，没有必要让这种模式做像这样简单的事情

jQuery(function($) {

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

        }
    }, '.myclass');

});

创建对象的新实例以获取元素并更改其颜色并不是您真正应该做的事情。