针对桌面和移动设备使用不同 HTML 的 Web 组件

Christian Schaefer 撰写了一篇关于处理网络广告的精彩文章。整篇文章都很有趣，首先记录了广告带来的所有挑战，然后针对每个挑战提出了现代解决方案。

我注意到其中一段代码片段，它提供了一种简单的方法来设计一个组件，该组件根据屏幕尺寸渲染不同的 HTML。

<div class="ad">
  <template class="ad__mobile">
    // Mobile ad HTML code with inline script
  </template>
  <template class="ad__desktop">
    // Desktop ad HTML code with inline script
  </template>
  <script>
    const isMobile = matchMedia('(max-device-width: 20em)').matches;
    const ad = document.currentScript.closest('.ad');
    const content = ad
      .querySelector(isMobile ? '.ad__mobile' : '.ad__desktop')
      .content;
    
    ad.appendChild(document.importNode(content, true));
  </script>
</div>

很聪明。不过请注意，Christian 在文章中最终采用了完全不同的方法。

这是同一代码，我使用了自定义元素并将 JavaScript 代码移到了 JavaScript 文件中，仅仅因为我想这么做。

查看 CodePen 上的示例
针对桌面和移动设备使用不同 HTML 的 Web 组件，作者是 Chris Coyier (@chriscoyier)
在 CodePen 上。

评论