创建一个音频元素并在对象字面量内为其赋予属性答案

【问题标题】：Create an audio element and give it properties inside an object literal创建一个音频元素并在对象字面量内为其赋予属性
【发布时间】：2016-10-18 05:25:48
【问题描述】：

我正在努力改掉编写意大利面条代码的坏习惯。我在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 中？

【问题讨论】：

标签： javascript oop audio object-literal

【解决方案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。

【讨论】：

谢谢，这正是我所要求的！ Babel 为 Object.assign() 内置了 polyfill。我使用模块化模式和对象字面量模式的目的是提高我的代码质量；健壮性、可维护性和可读性。以任何方式使用Object.assign() 这种不好的做法吗？
@Johan 您也可以使用自执行的 init 函数来执行此操作，但我看不出这有什么改进。
@Johan 这是Object.assign() 的有效用例。
也为我工作 - 正在寻找几个小时。谢谢！

【解决方案2】：

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

如果你真的想，你可以：

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

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

【讨论】：