html基础代码-Web 组件入门示例教程

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

组件化是后端的发展方向，目前流行的React和Vue都是组件化框架。

Google一直在推广浏览器的原生组件——Web Components API，因为它已经掌握了Chrome浏览器。 与第三方框架相比，原生组件简单、直接、直观，无需加载任何外部模块，代码量小。 目前，它仍在开发中，但已准备好投入生产使用。

Web Components API 的内容非常多。 本文不是一个全面的教程，而是一个简单的演示，让您了解如何使用它来开发组件。

1. 自定义元素

下图是用户卡。

本文演示了如何将此卡编写为Web Components组件，这里是最终的完整代码。

只要在网页中插入下面的代码，就会显示用户名片。

这种自定义的 HTML 标签称为自定义元素（custom element）。 根据规范，自定义元素的名称必须包含连字符，以将其与原生 HTML 元素区分开。 因此，不能写。

2. 自定义元素.define()

自定义元素需要使用JavaScript来定义一个类，所有元素都将是该类的实例。

class UserCard extends HTMLElement {
  constructor() {
    super();
  }
}

在上面的代码中，UserCard 是自定义元素的类。 注意，该类的父类是HTMLElement，因此它继承了HTML元素的特性。

接下来，使用浏览器的本机 customElements.define() 方法告诉浏览器该元素与此类关联。

window.customElements.define('user-card', UserCard);

3. 自定义元素内容

自定义元素当前为空，该元素的内容在下面的类上方给出。

class UserCard extends HTMLElement {
  constructor() {
    super();
    var image = document.createElement('img');
    image.src = 'https://semantic-ui.com/images/avatar2/large/kristy.png';
    image.classList.add('image');
    var container = document.createElement('div');
    container.classList.add('container');
    var name = document.createElement('p');
    name.classList.add('name');
    name.innerText = 'User Name';
    var email = document.createElement('p');
    email.classList.add('email');
    email.innerText = '[email protected]';
    var button = document.createElement('button');
    button.classList.add('button');
    button.innerText = 'Follow';
    container.append(name, email, button);
    this.append(image, container);
  }
}

上面代码的最后一行，this.append()的this表示自定义元素实例。

完成这一步后，自定义元素内部的DOM结构就已经生成了。

4. 标签

使用 JavaScript 编写上一节的 DOM 结构很麻烦，而 Web Components API 提供了可以使用 HTML 定义 DOM 的标签。

  
  

    
User Name
    
[email protected]
    Follow
  

然后，重写自定义元素的类并为自定义元素加载它。

class UserCard extends HTMLElement {
  constructor() {
    super();
    var templateElem = document.getElementById('userCardTemplate');
    var content = templateElem.content.cloneNode(true);
    this.appendChild(content);
  }
}  

上面的代码中，拿到节点后，它的所有子元素都被克隆了。 这是因为自定义元素可能有多个实例，而这个模板是为其他实例保留的，所以它的子元素不能直接连接。

至此，完整代码如下。

  
  ...
  
    class UserCard extends HTMLElement {
      constructor() {
        super();
        var templateElem = document.getElementById('userCardTemplate');
        var content = templateElem.content.cloneNode(true);
        this.appendChild(content);
      }
    }
    window.customElements.define('user-card', UserCard);    
  

5.添加样式

自定义元素还没有样式，您可以为其指定全局样式，如下所示。

user-card {
  /* ... */
}

但组件的样式应该用代码封装起来，只对自定义元素生效，不影响外部全局样式。 因此，你可以在上面写上样式。

  
   :host {
     display: flex;
     align-items: center;
     width: 450px;
     height: 180px;
     background-color: #d4d4d4;
     border: 1px solid #d5d5d5;
     box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
     border-radius: 3px;
     overflow: hidden;
     padding: 10px;
     box-sizing: border-box;
     font-family: 'Poppins', sans-serif;
   }
   .image {
     flex: 0 0 auto;
     width: 160px;
     height: 160px;
     vertical-align: middle;
     border-radius: 5px;
   }
   .container {
     box-sizing: border-box;
     padding: 20px;
     height: 160px;
   }
   .container > .name {
     font-size: 20px;
     font-weight: 600;
     line-height: 1;
     margin: 0;
     margin-bottom: 5px;
   }
   .container > .email {
     font-size: 12px;
     opacity: 0.75;
     line-height: 1;
     margin: 0;
     margin-bottom: 15px;
   }
   .container > .button {
     padding: 10px 25px;
     font-size: 12px;
     border-radius: 5px;
     text-transform: uppercase;
   }
  
  
  

    
User Name
    
[email protected]
    Follow
  

在上面的代码中，样式上方的 :host 伪类指的是自定义元素本身。

6. 自定义元素的参数

里面当前设置的内容html基础代码，为了使用方便，改为参数。

<user-card
  image="https://semantic-ui.com/images/avatar2/large/kristy.png"
  name="User Name"
  email="[email protected]"
>

代码被相应地重新设计。

  ...
  
  

    

    

    Follow John
  

最后，更改类的代码以将参数添加到自定义元素。

class UserCard extends HTMLElement {
  constructor() {
    super();
    var templateElem = document.getElementById('userCardTemplate');
    var content = templateElem.content.cloneNode(true);
    content.querySelector('img').setAttribute('src', this.getAttribute('image'));
    content.querySelector('.container>.name').innerText = this.getAttribute('name');
    content.querySelector('.container>.email').innerText = this.getAttribute('email');
    this.appendChild(content);
  }
}
window.customElements.define('user-card', UserCard);    

7. 影子 DOM

我们不希望用户看到内部代码。 Web Component 允许隐藏内部代码。 这称为Shadow DOM，即这部分DOM默认与外部DOM隔离，任何内部代码都无法影响外部。

自定义元素的 this.attachShadow() 方法打开 Shadow DOM，具体参见下面的代码。

class UserCard extends HTMLElement {
  constructor() {
    super();
    var shadow = this.attachShadow( { mode: 'closed' } );
    var templateElem = document.getElementById('userCardTemplate');
    var content = templateElem.content.cloneNode(true);
    content.querySelector('img').setAttribute('src', this.getAttribute('image'));
    content.querySelector('.container>.name').innerText = this.getAttribute('name');
    content.querySelector('.container>.email').innerText = this.getAttribute('email');
    shadow.appendChild(content);
  }
}
window.customElements.define('user-card', UserCard);

上面代码中，this.attachShadow()方法的参数{ mode: 'close' }表示Shadow DOM关闭，不允许外部访问。

至此，Web Component组件就完成了，完整的代码可以在这里访问。 可以看到整个流程还是很简单的，不像第三方框架有复杂的API。

8. 组件扩展

在此基础上，可以对组件进行扩展。

(1) 与用户互动

用户卡是一个静态组件。 如果想要与用户进行交互，也很简单，只需窃听班级上的各种骚乱即可。

this.$button = shadow.querySelector('button');
this.$button.addEventListener('click', () => {
  // do something
});

(2) 元件封装

在上面的计数器示例中，将其与网页代码放在一起html基础代码，实际上可以用脚本将其注入到网页中。 这样就可以将JavaScript脚本封装成一个JS文件，成为一个独立的组件文件。 只要网页加载这个脚本，该组件就可以使用。

这里我就不展开了。 对于Web Components的更多中级使用，可以继续学习下面两篇文章。

9. 参考链接

（超过）