gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 05:34:54 25 4
gpt4 key购买 nike

我的问题是关于 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 ...

最佳答案

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

jQuery(function($) {

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

}
}, '.myclass');

});

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

关于javascript - 事件处理程序的模块模式使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24471094/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com