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

vue 设置组件不重用

The concept of reusable components can clearly be seen in component-based frameworks like React and Vue.

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

This introduces modularity into our UI development, especially in cases where several screens or pages of a web project have shared components.

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

But how can we achieve this without a solid grasp of these component-based frameworks and a strong knowledge of JavaScript?

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

I thought about this after I worked on a 30-page website for a bank sometime back, before I knew how to use Vue.js, React, or PHP's famous includes function.

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

I was left with no choice other than to serially copy and paste the same header and footer sections into all 30 HTML files. Stressful, huh?

除了将相同的页眉和页脚部分依次粘贴并粘贴到所有30个HTML文件中之外，我别无选择。 紧张吧？

Definitely, because for every change made to either the header or footer, the same had to be done for all the other pages.

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

This frustrated me and got me to start thinking if there was a way that a page in pure HTML could have components. It would make work easier for people like my past self that just know HTML, CSS, and vanilla JavaScript.

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

In this article, I will quickly take you through how to build JavaScript components and call each component in your HTML.

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

步骤1：创建可重用的Header自定义组件 (Step 1: Create the reusable Header custom component)

Imagine we have a website of five pages all having the same header and the same footer.

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

The first step is to copy the existing header HTML section and place it in a class object in JavaScript. Then, render it to the page using innerHTML:

第一步是复制现有的标头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>     
    `;
  }
}

The JavaScript file defines a class called Header which extends the generic HTMLElement class.

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

connectedCallback() is invoked each time the custom element/component is appended into a document-connected element.

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

The difference between using connectedCallback() and constructor() is that constructor() is called when the element is created and connectedCallback() is called after the element is attached to the DOM.

使用connectedCallback()和constructor()的区别在于，在创建元素时调用constructor()在将元素附加到DOM之后调用connectedCallback() 。

But either one works for what we want to achieve.

但是，任何一种都可以为我们想要实现的目标服务。

Finally, this.innnerHTML displays the content in the HTML tag.

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

步骤2：注册可重用标头的自定义组件 (Step 2: Register the reusable header's custom component)

To go further, we have to register a custom element on the page. We do that by using the CustomElementRegistry.define() method.

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

This takes the following arguments:

这采用以下参数：

1. A DOMString representing the name you are giving to the custom element. Note that custom element names require a dash to be used in them (kebab-case) and they can't be single words.

   一个DOMString表示您要为自定义元素提供的名称。 请注意，自定义元素名称要求在其中使用破折号( kebab-case )，并且它们不能为单个单词。

2. A class object that defines the behavior of the element.
   定义元素行为的类对象。

main-header is the DOMString which represents the name we are giving to the element and Header is the object that defines the element.

main-header是DOMString ，它表示我们为元素和Header赋予的名称 是定义元素的对象。

This code segment is showing the HTML line which is the DOMString defined using customElements.

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

With these two steps you can easily create reusable components with just HTML and vanilla JavaScript.

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

例 (Example)

It is not limited to the footer and header alone but to every reusable component you might have in your project.

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

You can follow me on Twitter to stay updated on my latest posts. I hope you found this post helpful. :)

您可以在Twitter上关注我，以了解我的最新帖子。 希望这篇文章对您有所帮助。 :)

翻译自: https://www.freecodecamp.org/news/how-to-build-reusable-html-components-without-component-based-frameworks/

vue 设置组件不重用