时间戳

首页 > 解决方案 > 如何使用纯 Javascript 函数呈现多个 HTML 部分

javascript - 如何使用纯 Javascript 函数呈现多个 HTML 部分

问题描述

这是一个拥有数百个页面的静态网站。我需要从 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 框架的可能性）。

谢谢您的帮助！

标签： javascripthtmlwebdom

解决方案

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

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

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

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

首先，你不需要component在objWithComponent里面迭代idArr——你已经在idArr. 您也不需要ids数组，因为您可以components使用Object.keys().

假设您的 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呈现具有相应 id 的 div 存在的组件。if

推荐阅读