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

试试这个：

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: '...'
  })
}

Object.assign（）方法用于将所有可枚举的自有属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

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

Answer 2

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

如果你真的想，你可以：

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 = "...";

你可能会对它感到奇怪，并将属性设置在单独的对象中，然后使用这些对象来覆盖元素对象的属性，但这会很奇怪，不是很奇怪;）

创建一个音频元素并在对象文字中提供它们的属性

2 个答案: