如何通过长参数列表保持 JavaScript 代码的简单和组织?

for*_*ley 4 javascript variables parameters howler.js

如果我使用的术语不准确,我深表歉意。我是新手。

我有一长串由函数loop()共享/使用的变量。我目前只调用 Loop() 两次,并且只传递声音文件链接的唯一参数。我将扩展此代码,以便对循环()进行多次调用,但每个调用都有一组唯一的参数来替换我的长共享变量列表。我认为每次调用loop()时都有一长串唯一的参数会有点混乱和混乱。有没有一种方法可以通过制作不同的变量列表来保持内容的可读性和组织性,这些变量列表只能通过特定调用循环()的参数访问?像这样的伪代码:

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);
Run Code Online (Sandbox Code Playgroud)

我希望能够在一个地方定义所有这些变量/参数,然后通过函数调用以简单的方式引用它们。

更新后的工作代码如下:

<!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>
Run Code Online (Sandbox Code Playgroud)

dav*_*vid 5

是的,像这样的东西作为选项对象传入是很常见的。

function loop(options) {
  // use options.sound, options.aStartMin, etc
}
Run Code Online (Sandbox Code Playgroud)

如果需要,您可以单独存储选项对象:

var options1 = {
  sound: 'audio/sample.mp3',
  aStartMin: 2,
  aStartMax: 200,
  seekMin: .5,
  seekMax: 2
}
Run Code Online (Sandbox Code Playgroud)

事实上,这种情况非常常见,以至于(取决于您想要支持的浏览器,或者您的 babel 转译级别)现在支持所谓的“对象解构”,这使得这变得更加容易:

function loop({ sound, aStartMin, aStartMax, etc }) {
  // Can now use sound, aStartMin, aStartMax, etc as if they were plain arguments.
}
Run Code Online (Sandbox Code Playgroud)