如何使用纯 Javascript 函数呈现多个 HTML 部分答案

【问题标题】：How to render multiple HTML parts with a plain Javascript function如何使用纯 Javascript 函数呈现多个 HTML 部分
【发布时间】：2020-09-22 20:07:46
【问题描述】：

这是一个拥有数百个页面的静态网站。我需要从 JS 渲染诸如 topnav 或时事通讯或内容带之类的元素，并定期更改这些内容。

这是我尝试过的：



const components = {
  compartirEnFlex: `<h4>Newsletter</h4>`,
  newsletterEs: `<h4>Compartir</h4>`,
}


const ids = ['newsletterEs', 'compartirEnFlex', 'infoArticulo', 'infoDeLaWebEnFlexIzq']

function renderComponents(objWithComp, idsArr){
  return idsArr.map(function(id){
    for(let component in objWithComp){
      let arrOfIds = Object.keys(objWithComp);
      arrOfIds.map(key => key)
      if(id === key){
        document.getElementById(id).insertAdjacentHTML('afterbegin', objWithComp[id])
      }
    }    
  })
}
renderComponents(components, ids);

每个 id 在 HTML 结构中都有对应的。当我单独执行此操作时，它会起作用。但是，我必须以一种优雅的方式来处理这个问题（并且在这个项目中没有像 React 这样的 JS 框架的可能性）。

感谢您的帮助！

【问题讨论】：

arrOfIds.map(key => key)的目的是什么？
解压arrOfIds中的数组键，所以我设法比较了if条件下的两个字符串。
你检查过控制台吗？有一个错误。
您想使用控制台，您必须将函数放在 HTML 页面中的脚本中，因为它使用的是“文档”对象。
您可以使用jsfiddle 来制作原型。

标签： javascript html web dom

【解决方案1】：

运行代码时，您会在控制台中看到错误 Uncaught ReferenceError: key is not defined。

这是因为if(id === key) 中的key 没有定义。 arrOfIds.map(key => key) 行返回与 arrOfIds 完全相同的数组，因为 Array.prototype.map“返回一个新数组，其中填充了对调用数组中的每个元素调用提供的函数的结果。”

在这里，您不会将该新数组分配给变量，因此不会发生任何事情。即使是这样，该新数组也将是 arrOfIds 的副本，因为您的映射函数 (key) => key 为每个 key 返回 key——这意味着输出与输入相同。

但是，这不是问题。如果我正确理解了您的问题，那么this demo 应该显示您正在尝试完成的示例。如果这是您想要实现的目标，那么这里有一个解决方案：

首先，您不需要在objWithComponent 中的idArr 中迭代component——您已经在idArr 中这样做了。您也不需要ids 数组，因为您可以使用Object.keys() 从components 对象中获取组件的键。

假设您的 HTML 看起来像这样：

<div>
  <div id="newsletterEs"></div>
  <div id="compartirEnFlex"></div>
  <div id="infoArticulo"></div>
  <div id="infoDeLaWebEnFlexIzq"></div>
</div>

然后，使用Object.keys(components) 获取您拥有的组件的ID 数组，您可以将它们映射到HTML 标记。事实上，map 在这里是不必要的，因为map 返回一个新数组，除非你以后需要那个数组，否则没有理由使用map。相反，您可以使用Object.prototype.forEach。

这就是它的样子：

const components = {
  compartirEnFlex: `<h4>Newsletter</h4>`,
  newsletterEs: `<h4>Compartir</h4>`,
}

function renderComponents(objWithComp) {
  Object
    .keys(components)
    .forEach((id) => {
      const element = document.getElementById(id)
      const component = objWithComp[id]
      if (component && element) {
        element.insertAdjacentHTML('afterbegin', component)
      }
    })
}

renderComponents(components)

然后，当您调用renderComponents 时，您可以只传递components 参数，并且仅使用if 语句呈现具有对应id 的div 存在的组件。

【讨论】：