Question

如果我对术语的使用不正确，我深表歉意。我是新手。

我有一长串由loop（）函数共享/使用的变量。我目前只调用loop（）两次，并且只传递声音文件链接的唯一参数。我将按比例放大此代码，这样我将有很多对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);

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

下面更新的工作代码：

<!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>

Answer 1

是的，像这样的事情作为选项对象传递是很常见的。

function loop(options) {
  // use options.sound, options.aStartMin, etc
}

然后，您可以根据需要单独存储选项对象：

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.
}

Answer 2

使用对象进行销毁分配的其他好处是：

值是按名称而不是顺序传递的（对象属性始终没有顺序）
并非所有（或任何）值都需要使用
如果缺少属性，则将其作为 undefined
您仍然可以在声明中设置默认值

// 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);

如何通过长参数列表使javascript代码保持简单和井井有条？

2 个答案: