javascript - 将对象字面量扩展为 html5 数据属性

Question

可以将对象文字扩展为 html5 数据属性吗？

具有以下对象:

const requirements = {
    'data-description': 'some text...',
    'data-pointer': true,
    'data-speaker': true
}

我想将其扩展为 anchor 标记以获得如下内容:

<a href="#" class="show-modal" data-description="some-text" data-pointer="true" data-speaker="true">Show modal</a>

我尝试以这种方式使用扩展语法 <a href="#" class="show-modal" `${...requirements}`>Show modal</a>但没有打印任何内容

我现在依赖这个函数来构建 anchor 并动态传递数据。

function buildAnchor(requirements) {
    const anchor = document.createElement('a');

    anchor.setAttribute('class', 'show-modal');
    anchor.setAttribute('href', '#');
    anchor.textContent = 'More info';

    Object.keys(requirements).forEach(data => {
        anchor.setAttribute(data, requirements[data]);
    });

    return anchor.outerHTML;
}

这个函数可以完成这项工作，但我想知道是否可以使用扩展语法

提前致谢

Answer 1

直接使用 HTMLElement's dataset property 怎么样？然后通过Object.assign为其分配一个简化的配置对象...就像...

var requirements = {
  'description': 'some text...',
  'pointer': true,
  'speaker': true
};
var elmLink = document.createElement('a');

elmLink.href = '';
Object.assign(elmLink.dataset, requirements);

console.log('elmLink : ', elmLink);

.as-console-wrapper { max-height: 100%!important; top: 0; }