Question

我的查询是关于Javascript Module Patterns的有效使用。以下是我的代码中的简化模块。我想把它重新分解成模块。这些模块每个都有几个LOC。

问题：1与2与3的哪种方法更好？在method 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);

更新

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

~~使用object literal~~

的替代实现

... Code Removed ...

Answer 1

原型制作是关于javascript的一件好事，但在这里你完全错误地使用它，这种模式不需要像

那样简单。

jQuery(function($) {

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

        }
    }, '.myclass');

});

创建一个对象的新实例来获取一个元素并改变它的颜色并不是你应该做的事情。

Answer 2

在您的示例中似乎假设您在使用模块模式时需要创建一些MyModule对象或命名空间。在我看来，这是不正确的。

在极其简化的示例中，创建的MyModule不需要存在于IIFE之外，因为您不会将MyModule对象返回到外部，也不会将其分配给某个全局命名空间。但至关重要的是，这是选择1,2和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元素创建新的函数实例处理程序。事件信息自动传递给函数，this是处理程序附加到的DOM元素。这两个信息都由jQuery on传递给处理程序，因为这是原始浏览器JavaScript处理事件的方式。如果这是您的处理程序完成其工作所需的所有信息，那么您只需要一个处理程序的单个实例。

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

2 个答案: