将对象文字扩展为html5数据属性

Question

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

具有以下目的：

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

我想在锚标记中将其扩展，以获得以下内容：

<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>但是什么也没打印

我现在依赖于此功能，该功能可以构建锚点并动态传递数据。

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的dataset属性 ，然后通过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; } 

Answer 2

您可以将data-*属性定义为单个JSON字符串，然后使用JSON.parse()创建.dataset属性的JavaScript对象表示形式。

请注意，模板文字中的单引号周围属性值围绕HTML字符串处的有效JSON 。

 const requirements = { 'description': 'some text...', 'pointer': true, 'speaker': true } const a = `<a data-requirements='${JSON.stringify(requirements)}'>click</a>`; document.body.insertAdjacentHTML("beforeend", a); let data = JSON.parse(document.querySelector("a").dataset.requirements); console.log(data, data.description, data.pointer, data.speaker); 

Answer 3

传播语法无法满足您的要求。 这实际上是为了将一个对象的键/值对包含到另一个对象中，或者用于破坏分配。

您可以在模板文字内部将Object.entries()与.map()和.join()使用。

 const requirements = { 'data-description': 'some text...', 'data-pointer': true, 'data-speaker': true }; const s = `<a href="#" class="show-modal" ${Object.entries(requirements).map(([k, v]) => k + "='" + v + "'").join(" ")}>Show modal</a>`; console.log(s); 

---

我认为将属性创建移至其自己的功能会更清洁。

 const requirements = { 'data-description': 'some text...', 'data-pointer': true, 'data-speaker': true }; const s = `<a href="#" class="show-modal" ${oToA(requirements)}>Show modal</a>`; console.log(s); function oToA(obj) { return Object.entries(obj) .map(([k, v]) => k + "='" + v + "'") .join(" ") } 

您可以通过用HTML实体替换嵌入式引号来增强功能。

Answer 4

从MDN：

扩展语法允许将可迭代程序（例如数组表达式）扩展到期望零个或多个参数（用于函数调用）或元素（用于数组文字）的位置，或者将对象表达式扩展在零个或多个键-值对（用于对象文字）是期望的。

由于您试图构建一个将需求作为参数（而不是键/值对）的函数，因此数组结构比对象结构更有意义。

 const requirements = [ {'data-description': 'some text...'}, {'data-pointer': true}, {'data-speaker': true} ]; (function populate(){ var anchor = document.createElement("a"); // Convert the arguments object to an array and enumerate it // so that each object key can become an attribute and the // corresponding value can become the value: Array.prototype.slice.call(arguments).forEach(function(arg){ for(var prop in arg){ anchor.setAttribute(prop, arg[prop]); } }); console.log(anchor); })(...requirements);