利用 Custom Elements 实现手机短信验证码组件及提高用户体验-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，短信验证码组件是常见的表单组件之一。常规实现方式是通过 HTML、CSS 和 JavaScript 编写复杂的样式和逻辑代码。但是，通过使用 Custom Elements，可以将短信验证码组件封装为一个自定义的 HTML 元素，从而提高组件的可复用性和可维护性。

Custom Elements 简介

Custom Elements 是 Web Components 技术中的一部分，它允许开发者创建和注册自定义的 HTML 元素。通过继承 HTMLElement 类，开发者可以创建一个定制化的 HTML 元素，将其包装在一个自定义元素的类中，并注册到文档中，从而将其作为一个新的 HTML 标签来使用。

在 Custom Elements 中，组件的元素支持继承原生 HTML 元素的属性和方法，也可以添加新的属性和方法。对于组件内部的模板和样式，也支持使用 Shadow DOM 技术进行封装。

短信验证码组件实现

组件设计要点

在使用 Custom Elements 实现短信验证码组件时，需要考虑以下设计要点：

用户体验优化：组件的交互行为、样式和提示信息要符合用户习惯，提高用户体验；
安全性优化：组件的输入内容要进行校验，避免非法字符的攻击；
自定义属性和方法：组件需要支持在不同的项目中的使用，因此需要设计一些可自定义的属性和方法；
复用性：组件的样式和逻辑代码应该尽量符合设计规范和工程规范，以便在不同的项目中复用。

组件结构和样式

在组件的结构和样式方面，我们可以采用 Bootstrap 或其他现成的样式库，或者自己编写 CSS 样式。以下是短信验证码组件的 HTML 结构和样式代码示例：

// javascriptcn.com 代码示例
<template>
  <div class="form-group">
    <label for="smscode-input">SMS Code:</label>
    <div class="input-group">
      <input type="text" class="form-control" id="smscode-input" name="smscode" placeholder="Enter a short message verification code">
      <div class="input-group-append">
        <button class="btn btn-secondary" type="button" id="smscode-btn">Get Code</button>
      </div>
      <div class="invalid-feedback">
        Sms code is required.
      </div>
    </div>
  </div>
</template>

<style>
.form-group {
  margin-bottom: 1rem;
}
.form-control {
  display: block;
  width: 100%;
  height: calc(2.25rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.input-group-append .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.invalid-feedback {
  display: none;
  color: #dc3545;
  margin-top: 0.25rem;
  font-size: 80%;
  font-weight: 400;
}
input.is-invalid {
  border-color: #dc3545;
}
input.is-invalid + .invalid-feedback {
  display: block;
}
</style>

注册组件

在组件注册阶段，需要通过 window.customElements.define() 方法创建自定义元素，并在自定义元素中添加所有的组件行为和样式。添加到页面上的组件可以在任何时候实例化和使用。

以下是实现短信验证码组件的注册代码示例：

// javascriptcn.com 代码示例
class SmsCodeComponent extends HTMLElement {
  constructor() {
    super(); 
    const template = document.currentScript.ownerDocument.querySelector('template');
    const clone = document.importNode(template.content, true);
    this.attachShadow({ mode: 'open' }).appendChild(clone);        
    
    this.smscodeInput = this.shadowRoot.querySelector('#smscode-input');
    this.smscodeBtn = this.shadowRoot.querySelector('#smscode-btn');
    
    const form = this.closest('form');
    form.addEventListener('submit', (event) => {
      if (!this.smscodeInput.value) {
        event.preventDefault();
        this.smscodeInput.classList.add('is-invalid');
        this.showErrorMessage('Sms code is required.');
      } else {
        this.smscodeInput.classList.remove('is-invalid');
        this.hideErrorMessage();
      }
    });
    
    this.smscodeBtn.addEventListener('click', () => {
      const smsCode = this.generateSmsCode();
      alert(`Sms Code: ${smsCode}`);
    });
  }
  
  generateSmsCode() {
    // generate sms code
    return '0000';
  }
  
  showErrorMessage(message) {
    const feedback = this.shadowRoot.querySelector('.invalid-feedback');
    feedback.textContent = message;
  }
  
  hideErrorMessage() {
    const feedback = this.shadowRoot.querySelector('.invalid-feedback');
    feedback.textContent = '';
  }
}

window.customElements.define('sms-code', SmsCodeComponent);

可以看出，该组件实现了以下要点：

继承了 HTMLElement 类；
添加了一个构造器，用于初始化 Shadow DOM、添加组件的行为和样式以及获取组件中的元素；
关联选择器，使其能够访问组件的 Shadow DOM；
添加了一个 generateSmsCode() 方法，用于生成随机的短信验证码；
添加了一个事件监听器，用于捕获表单提交事件，并校验短信验证码；
添加了一个事件监听器，用于捕获获取短信验证码按钮的点击事件，并显示短信验证码。

这里使用了 form.closest() 方法来获取表单元素，和元素.closest() 方法类似。this.closest() 方法是用于获取当前元素最近的一个祖先元素，这里获取了最近的 form 元素。

总结

通过使用 Custom Elements 可以轻松创建自定义 HTML 元素，从而提高组件的可复用性和可维护性。本文介绍了如何使用 Custom Elements 实现短信验证码组件，并详细讲解了实现的过程和关键点。尽管本文只介绍了一个简单的组件示例，但是使用 Custom Elements 能够极大地增强前端开发者设计和开发自定义组件的能力。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652e57e47d4982a6ebf61a8e