That would completely fail when the code runs with other buttons.
What exactly do you mean?
The whole purpose of passing in the src
, is so that the code can be used on a variety of different play buttons. Thatâs why the button has the information as a data-audio
attribute on the play button itself.
This issue needs to be fixed first:
The delay doesnât work with other players.
What issue?
A bunch of different issues I might not even use it now.
The delay is an issueâŚ
But, what we just did, I can incorporate into my other players.
I am confident in saying that all of those issues wonât occur, when only one set of code is used to control all of the buttons.
I removed delay
Version 1: Two arguments
Version 2: Three arguments
Do you have a question?
Without delay, which code do I stick with?
Version 1: Two arguments
function playButton(button) {
var player = getAudio();
var playing = isPlaying(button);
showButton(button, playing);
manageAudio(player, playing);
}
Version 2: Three arguments
function playButton(button) {
var player = getAudio();
var playing = isPlaying(button);
var src = button.getAttribute("data-audio");
showButton(button, playing);
manageAudio(player, playing, src);
}
Or do I stick with this one?
https://jsfiddle.net/6ts492f6/396/
function playButton(button) {
var player = getAudio();
if (isPlaying(button)) {
showPlayButton(button);
pauseAudio(player);
} else {
showPauseButton(button);
playAudio(player, button);
}
}
Less function parameters are better, when it doesnât come at the expense of flexibility.
This:
Version 1: Two arguments
function playButton(button) {
var player = getAudio();
var playing = isPlaying(button);
showButton(button, playing);
manageAudio(player, playing);
}
Would be better than this?
Version 2: Three arguments
function playButton(button) {
var player = getAudio();
var playing = isPlaying(button);
var src = button.getAttribute("data-audio");
showButton(button, playing);
manageAudio(player, playing, src);
}
Two arguments are not better than three when it comes at the expense of flexibility of the code.
Also, there is the matter of âseparation of concernsâ that must be considered when it comes to functions. Itâs not good when a function deals with more than one concern. The audio functions should not deal with concerns about the button, for example.
Which one do you like better?
Version 1:
function playButton(button) {
var player = getAudio();
var playing = isPlaying(button);
showButton(button, playing);
manageAudio(player, playing);
}
Version 2:
function playButton(button) {
var player = getAudio();
var playing = isPlaying(button);
var src = button.getAttribute("data-audio");
showButton(button, playing);
manageAudio(player, playing, src);
}
Version 3:
https://jsfiddle.net/6ts492f6/396/
function playButton(button) {
var player = getAudio();
if (isPlaying(button)) {
showPlayButton(button);
pauseAudio(player);
} else {
showPauseButton(button);
playAudio(player, button);
}
}
None of them. I prefer passing in configurable information as an opts object.
What does that mean?
How do you use that when there are only 2 arguments?
Like this?
function manageAudio(player, opts) {
if (opts.playing) {
pauseAudio(player);
} else {
delay(opts.function() {
playAudio(player, opts);
});
}
}