如何缩短重复功能

如何让此代码更有效或更短。我觉得有太多的重复功能。有没有办法使这一切都在一个更短的？如何缩短重复功能

<html> 
<body> 

<button onclick="myFunction()">Audio 1</button> 
<button onclick="myFunction2()">Audio 2</button> 
<button onclick="myFunction3()">Audio 3</button> 


<script> 
function myFunction() { 
    var a = new Audio('Link1'); 
    a.play(); 
} 

function myFunction2() { 
    var b = new Audio('Link2'); 
    b.play(); 
} 

function myFunction3() { 
    var c = new Audio('Link3'); 
    c.play(); 
} 

</script> 

</body>

来源

2017-10-16 qtt qtt

通'链接1/2/3'的功能，你可以只使用一个函数'myFunction的（ '链接1'）'例如 – Huangism

我会严厉反对这个建议。 HTML中的JavaScript成为维护中的一个主要问题，违背了经常引用的“关注点分离” – zfrisch

@zfrisch你能澄清一下你建议的是什么吗？一般使用JavaScript？ –

您可以将参数添加到功能的链接。

HTML：

<button onclick="playAudio('link1')">Audio 1</button> 
<button onclick="playAudio('link2')">Audio 2</button> 
<button onclick="playAudio('link3')">Audio 3</button>

的Javascript：

function playAudio(link) { 
    var audio = new Audio(link); 
    audio.play(); 
}

来源

2017-10-16 17:08:08

非常感谢。 –

使用函数调用的参数，尝试以下操作：

<button onclick="doPlay(1)">Audio 1</button> 
<button onclick="doPlay(2)">Audio 2</button> 
<button onclick="doPlay(3)">Audio 3</button> 


function doPlay(index) { 
    var a = new Audio('Link' + index); 
    a.play(); 
}

来源

2017-10-16 17:07:15 dhilt

@qttqtt只是通过[函数参数]（https://www.w3schools.com/js/js_function_parameters.asp）：我将合适的'index'（1，2，3）传递给'doPlay'，所以。 .. – dhilt

感谢您的帮助。 –

使用'index'参数（1,2,3）比'token'参数（'link1'等）更通用，因为'token'可以被改变（例如'myPrettyLink1'等），而'index'只是一个索引。 – dhilt

如何缩短重复功能

回答

相关问题