如何减少重复的javascript代码答案

【问题标题】：How to reduce repetitive javascript code如何减少重复的javascript代码
【发布时间】：2011-06-26 01:13:02
【问题描述】：

无论如何我可以减少下面的重复吗？我只展示了两个代码块，但还有更多相同的代码块。

我尝试过使用数组和循环，但不幸的是我找不到一个有效的示例。提前谢谢你。

E1 = new Audio('audio/E1.ogg');
E1.addEventListener('ended', function() {
  this.currentTime = 0;
  this.play();
}, false);

A1 = new Audio('audio/A1.ogg');
A1.addEventListener('ended', function() {
  this.currentTime = 0;
  this.play();
}, false);

编辑：使用下面乔纳森的代码，我仍然想知道是否可以做相当于：

(E1,A1,x,x,x).addEventListener('ended', callback, false);
// I know this bit of code doesn't work

【问题讨论】：

您应该保留问题中的原始代码。实际上，接受的答案令人困惑，因为它看起来与您在问题中已有的完全一样。
@davy8：我不知道为什么我从来没有看到这个评论，但这绝对是有道理的。我已将问题回滚并重新编辑，以便将来寻求答案的人能够轻松查看解决方案正在解决的问题。

标签： javascript repeat

【解决方案1】：

由于您的回调是相同的，您可以将它们绑定到一个变量：

var E1 = new Audio('audio/E1.ogg');
var A1 = new Audio('audio/A1.ogg');

var callback = function() {
    this.currentTime = 0;
    this.play();
};

E1.addEventListener('ended', callback, false);
A1.addEventListener('ended', callback, false);

【讨论】：

我不敢相信我没有发现创建回调变量。我想我一定是因为盯着所有其他代码而导致代码失明！

【解决方案2】：

var files = ['audio/E1.ogg', 'audio/A1.ogg'];
//note that we cannot/should not use for(... in ...) - that won't do what you expect
for(var i = 0; i < files.length; ++i) {
    var audio = new Audio(files[i]);
    audio.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);
}

【讨论】：

【解决方案3】：

类似

var addEndedEvent = function(elem) {
    elem.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);
}

addEndedEvent(new Audio('audio/A1.ogg'));

【讨论】：

【解决方案4】：

你应该能够做这样的事情。如果您有更多文件，只需将它们的名称添加到数组fileNames。

var audioRefs = { }, fileNames = ['E1','A1','B1'], i, file;
for( i = 0; i < fileNames.length; i++ ) {
    file = fileNames[i];
    audioRefs[file] = new Audio('audio/' + file + '.ogg');
    audioRefs[file].addEventListener('ended', callback, false);
}

function callback() {
   this.currentTime = 0;
   this.play();
};

audioRefs 最终会看起来像....

audioRefs = {
   'A1': (reference to A1 Audio object),
   'B1': (reference to B1 Audio Object)
}

【讨论】：

【解决方案5】：

对于已编辑的问题，如果您使用 Underscore.js 中的 each 函数，您可以执行以下操作：

_.each([E1,A1,B1], function(audio) { 
    audio.addEventListener('ended', callback, false); 
});

【讨论】：