如何使javascript代码保持简单，并使用长的参数列表进行组织？
如何使javascript代码保持简单，并使用长的参数列表进行组织？
提问于 2019-02-04 06:04:31
如果我的用词不准确，我很抱歉。我是个新手。
我有一个由函数循环()共享/使用的变量列表。目前，我只调用了循环()两次，并且只为声音文件链接传递唯一的参数。我将放大这段代码，这样我将有很多调用循环()，但是每个调用都有一组唯一的参数来代替我长时间共享的变量列表。我认为，为每一次调用循环()设置一长串独特的参数，会有些混乱和混乱。是否有一种方法可以通过创建不同的变量列表来保持事物的可读性和组织性，而这些变量列表只能通过参数来访问循环()？就像这个伪码：
argumentListA {
var sound = 'audio/sample.mp3'
var aStartMin = 2
var aStartMax = 200
var seekMin = .5
var seekMax = 2
}
argumentListB {
var sound = 'audio/sampleB.mp3'
var aStartMin = 0
var aStartMax = 100
var seekMin = 0
var seekMax = 1
}
loop(argumentListA);
loop(argumentListB);我希望能够在一个地方定义所有这些变量/参数，然后通过函数调用以简单的方式引用它们。
经修订的工作守则如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="js/howler.core.js"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<script>
var options = {
soundFileName: 'audio/sample.mp3',
aStartMin: 0,
aStartMax: 100,
probablilityAMin: 0,
probablilityAMax: 10,
probabilityThreshold: 3,
seekMin: 0,
seekMax: 1,
aFadeIn: 9000,
aFadeOut: 3000,
aPlayDurationMin: 5000,
aPlayDurationMax: 11000,
maxVolume: 1,
numberOfSounds: 0, // starting variable at 0
maxNumberOfSounds: 2
};
function logNumberOfSounds() { // passing options into this before is what broke code
options.numberOfSounds++;
console.log('Number of sounds is now: ' + options.numberOfSounds);
}
// calls the soundSorter function repeatedly so sounds will play
(function masterClock(options) {
setTimeout(function () {
soundSorter();
masterClock();
}, 2000);
}());
function soundSorter() { // passing options into this before is what broke code
var probabilityResult = Math.floor((Math.random() * options.probablilityAMax) + options.probablilityAMin);
if (probabilityResult > options.probabilityThreshold) {
loop(options);
}
else {
loop(options);
}
}
function loop(options) {
setTimeout(function () {
var playDuration = Math.floor((Math.random() * options.aPlayDurationMax) + options.aPlayDurationMin);
setTimeout(function () {
if (options.numberOfSounds < options.maxNumberOfSounds) { //Don't create more than the max number of sounds.
var sound = getSound(options.soundFileName);
var id2 = sound.play();
logNumberOfSounds();
console.log('probabilityThreshold is now: ' + options.probabilityThreshold);
//sound.volume(0); // don't think I need this since it's defined next as well as in getSound()
sound.fade(0, options.maxVolume, options.aFadeIn, id2); // FADE IN
setTimeout(function () {
sound.fade(options.maxVolume, 0, options.aFadeOut, id2); // FADE OUT
options.numberOfSounds--; //when it fades out subtract one
// Attempt to clean up the sound object
setTimeout(function () {
sound.stop();
sound.unload();
}, options.aFadeOut + 1000);
}, playDuration);
}
}, 0);
}, 0);
}
// PLAYER FOR MAIN SOUND FUNCTION /////////////////////////////
function getSound() {
return new Howl({
src: [options.soundFileName],
autoplay: true,
loop: true,
volume: 0,
fade: 0 // removes the blip
});
}
</script>
<script src="js/howler.core.js"></script>
<script src="js/siriwave.js"></script>
<script src="js/player.js"></script>
</body>
</html>回答 2
Stack Overflow用户
回答已采纳
发布于 2019-02-04 06:07:16
是的，像这样的东西作为options对象传入是很常见的。
function loop(options) {
// use options.sound, options.aStartMin, etc
}然后，如果需要，可以单独存储options对象：
var options1 = {
sound: 'audio/sample.mp3',
aStartMin: 2,
aStartMax: 200,
seekMin: .5,
seekMax: 2
}事实上，这是如此普遍，以至于(取决于您所支持的浏览器，或者您的babel传输溢出级别)，现在有了对所谓的“对象破坏”的支持，这使得这变得更加容易：
function loop({ sound, aStartMin, aStartMax, etc }) {
// Can now use sound, aStartMin, aStartMax, etc as if they were plain arguments.
}Stack Overflow用户
发布于 2019-02-04 06:50:23
使用对象销毁赋值的其他好处是：
- 值是按名称传递的，而不是按顺序传递的(对象属性无论如何都没有顺序)
- 并非所有(或任何)值都需要使用。
- 如果缺少属性，则将其作为未定义的传递。
- 仍然可以在声明中设置默认值。
// Define 3 properties on options object
var opts = {
opt1: 'opt1 value',
opt2: 'opt2 value',
opt3: 'opt3 value'
};
// Use some option properties, even not defined props
function myFunc({opt3, opt1, foo, bar = 'bar'}) {
console.log(`opt1: ${opt1}\nopt3: ${opt3}\nfoo : ${foo}\nbar : ${bar}`);
}
myFunc(opts);
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54510881
复制相关文章
相似问题
腾讯云开发者
