创建一个音频元素并在对象字面量中赋予它属性

Question

我正在努力摆脱编写意大利面条式代码的坏习惯。我在 modular javascript 上找到了一个很棒的教程，我正在尝试将其应用到我的一个项目中。

我有这个：

var sfx = {}

sfx.mySound1 = document.createElement('audio');
sfx.mySound1.src = 'https://some-url.ogg';
sfx.mySound1.moreProps = "...";

sfx.mySound2 = document.createElement('audio');
sfx.mySound2.src = 'https://some-url.ogg';
sfx.mySound2.moreProps = "...";

在另一个对象中我可以播放这样的音效：

sfx.mySound1.play();

我想实现同样的事情，但我想使用对象文字模式：

const sfx = {
    mySound1: {
        // create audio element
        // give it props
    },
    mySound2: {
        // create audio element
        // give it props
    }
}

我似乎无法弄清楚如何创建音频元素并在同一对象中为其赋予属性。也许这违背了逻辑，不应该起作用。如果是这样，我应该如何编写它而不是将其全部保存在 sfx object?

中

Answer 1

是的，您将无法在对象定义中创建元素并更改其属性。我觉得你原来的做法很好。

如果你真的想，你可以：

const sfx = {
    mySound1: document.createElement('audio'),
    mySound2: document.createElement('audio')
}

sfx.mySound1.src = 'https://some-url.ogg';
sfx.mySound1.moreProps = "...";

sfx.mySound2.src = 'https://some-url.ogg';
sfx.mySound2.moreProps = "...";

你可能会觉得奇怪，在单独的对象中设置属性，然后使用这些对象覆盖元素对象的属性，但那会很奇怪，很奇怪 ;)

Answer 2

试试这个：

var sfx = {
  mySound1: Object.assign(document.createElement('audio'), {
    src: 'https://some-url.ogg',
    moreProps: '...'
  }),

  mySound2: Object.assign(document.createElement('audio'), {
    src: 'https://some-url.ogg',
    moreProps: '...'
  })
}

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.

看起来很清楚，但请参阅 Object.assign() 文档了解浏览器兼容性和 polyfill。

创建一个音频元素并在对象字面量中赋予它属性

Create an audio element and give it properties inside an object literal

javascript

oop

audio

object-literal