1. 微擎百科首页
  2. 学无止境

如何在没有基于组件的框架的情况下构建可重用的HTML组件

本文作者:格蕾丝·欧莫莉(Grace Omole)

可重用组件的概念可以在基于组件的框架(如React和Vue)中清楚地看到。

这将模块化引入了我们的UI开发,尤其是在Web项目的多个屏幕或页面具有共享组件的情况下。

但是,如果没有扎实地掌握这些基于组件的框架和对JavaScript的深入了解,我们如何实现这一目标?

我曾经在一家银行工作长达30页的网站上工作过一段时间,然后才知道如何使用Vue.js,React或PHP的著名includes功能,然后我想到了这一点。

我别无选择,只能将相同的页眉和页脚部分依次复制并粘贴到所有30个HTML文件中。紧张吧?

肯定地,因为对于页眉或页脚进行的每个更改,都必须对所有其他页面执行相同的操作。

这让我感到沮丧,让我开始思考是否有一种方法可以使纯HTML页面具有组件。对于像我过去的自我一样只了解HTML,CSS和原始JavaScript的人,这将使工作变得更容易。

在本文中,我将快速带您了解如何构建JavaScript组件以及如何在HTML中调用每个组件。

步骤1:创建可重用的Header自定义组件

想象一下,我们有一个包含五个页面的网站,每个页面具有相同的页眉和页脚。

第一步是复制现有的标头HTML部分,并将其放在JavaScript中的类对象中。然后,使用将其呈现到页面innerHTML

class Header extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <nav>            
       {*Header code goes here *}         
      </nav>
    `;
  }
}

class Footer extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `	   
      <footer>            
        {*footer code goes here *}         
      </footer>     
    `;
  }
}

JavaScript文件定义了一个名为的类,该类Header 扩展了通用HTMLElement类。

connectedCallback() 每次将自定义元素/组件附加到文档连接的元素中时,都会调用。

使用之间的差connectedCallback()constructor()constructor()创建元素,并且当被调用connectedCallback()的元件被附接到所述后DOM被调用。

但是,任何一个都能为我们想要实现的目标服务。

最后,this.innnerHTML 在HTML标记中显示内容。

步骤2:注册可重用标头的自定义组件

为了更进一步,我们必须在页面上注册一个自定义元素。我们通过使用CustomElementRegistry.define()方法来做到这一点。

这采用以下参数:

  1. 一个DOMString代表你是给到自定义元素的名字。请注意,自定义元素名称要求在其中使用破折号(kebab-case),并且它们不能为单个单词。
  2. 定义元素行为的类对象。
customElements.define('main-header', Header);
customElements.define('main-footer', Footer);
定义每个类

main-headerDOMString,代表我们为元素指定的名称,并且Header 是定义元素的对象。


<body>
  <main-header></main-header>
  
  <!-- body content goes here -->
  
  <main-footer></main-footer>
</body>
HTML文件

此代码段显示了HTML行,该行是使用定义的DOMString customElements

通过这两个步骤,您可以仅使用HTML和原始JavaScript轻松创建可重用的组件。

HTML:

<main-header></main-header>

<p>How to Build Reusable HTML Components
</p>

<main-footer></main-footer>

CSS

body {
  font-family: system-ui;
  background: #fff;
  color: white;
  text-align: center;
}

p{
  padding:60px 0;
  color:#000;
}
footer{
  background-color:#555;
}
footer p{
  color:#fff;
}
footer li a{
  color:#fff;
}

它不仅限于页脚和页眉,还包括项目中可能具有的每个可重用组件。

点击查看原文

本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/develop/4133.html

发表评论

登录后才能评论