如何使用 Custom Elements 开发 Google 翻译的浮动翻译器？-JavaScript中文网-JavaScript教程资源分享门户

前言

随着全球化的不断发展，跨语言交流变得越来越普遍。在这个时代，翻译工具无疑是一个非常重要的工具。作为一名前端开发者，我们可以借助 Custom Elements 来开发一个浮动式的翻译器，使用户在使用网站时可以更方便地进行翻译。

Custom Elements 简介

Custom Elements 是 Web Component 的一部分，它提供了一种自定义 HTML 元素的方式。使用 Custom Elements 可以创建一个新的 HTML 元素，这个元素可以拥有自己的属性和方法，并且可以像普通 HTML 元素一样使用。Custom Elements 的使用可以使我们的代码更加模块化和可维护。

开发浮动翻译器

接下来，我们将使用 Custom Elements 来开发一个浮动翻译器。这个翻译器将会有两个主要的功能：

点击翻译按钮可以将当前页面翻译成用户设定的语言。
鼠标悬浮在需要翻译的文本上可以显示翻译结果。

创建 Custom Element

首先，我们需要创建一个自定义的 HTML 元素。在这个例子中，我们将创建一个名为 floating-translator 的元素。

// javascriptcn.com 代码示例
<template id="floating-translator-template">
  <style>
    /* 样式代码 */
  </style>
  <div class="floating-translator">
    <!-- 元素内容 -->
  </div>
</template>

<script>
  class FloatingTranslator extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById('floating-translator-template').content;
      const shadowRoot = this.attachShadow({ mode: 'open' });
      shadowRoot.appendChild(template.cloneNode(true));
    }
  }

  customElements.define('floating-translator', FloatingTranslator);
</script>

在上面的代码中，我们创建了一个名为 floating-translator 的自定义元素，并且将其内容包含在一个模板中。在 constructor 方法中，我们获取了模板的内容，并将其添加到了 shadow DOM 中。最后，我们使用 customElements.define 方法来定义这个元素。

添加翻译按钮

现在，我们可以在 floating-translator 元素中添加一个翻译按钮。当用户点击这个按钮时，我们将会触发翻译功能。

<div class="floating-translator">
  <button class="translate-btn">翻译</button>
</div>

在上面的代码中，我们添加了一个名为 translate-btn 的按钮。

接下来，我们需要在 FloatingTranslator 类中添加一个方法来处理翻译请求。

// javascriptcn.com 代码示例
class FloatingTranslator extends HTMLElement {
  constructor() {
    super();
    const template = document.getElementById('floating-translator-template').content;
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.appendChild(template.cloneNode(true));
    
    this.shadowRoot.querySelector('.translate-btn').addEventListener('click', () => {
      // 处理翻译请求
    });
  }
  
  // 其他代码
}

在上面的代码中，我们使用 querySelector 方法获取了按钮元素，并添加了一个 click 事件监听器。当用户点击这个按钮时，我们将会触发一个方法来处理翻译请求。

添加翻译功能

现在，我们需要使用 Google Translate API 来实现翻译功能。在这个例子中，我们将会使用 Google Cloud Translation API。

首先，我们需要在 Google Cloud Console 中创建一个项目，并启用 Translation API。然后，我们需要创建一个服务帐号，并将其添加到我们的项目中。最后，我们需要创建一个 JSON 格式的密钥文件，这个文件包含了我们的服务帐号的信息。

在代码中，我们需要使用 fetch 方法来向 Google Cloud Translation API 发送请求。在发送请求之前，我们需要先获取到我们的服务帐号的密钥。在这个例子中，我们将密钥保存在名为 key.json 的文件中。

// javascriptcn.com 代码示例
class FloatingTranslator extends HTMLElement {
  constructor() {
    super();
    const template = document.getElementById('floating-translator-template').content;
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.appendChild(template.cloneNode(true));
    
    this.shadowRoot.querySelector('.translate-btn').addEventListener('click', async () => {
      const text = window.getSelection().toString();
      const lang = 'en'; // 这里使用英语作为目标语言
      
      const key = await fetch('key.json').then(response => response.json());
      
      const url = `https://translation.googleapis.com/language/translate/v2?key=${key.private_key}`;
      const body = JSON.stringify({ q: text, target: lang });
      const response = await fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: body
      });
      
      const result = await response.json();
      console.log(result.data.translations[0].translatedText);
    });
  }
  
  // 其他代码
}

在上面的代码中，我们使用 window.getSelection().toString() 方法获取了用户选中的文本，并将其作为翻译的源文本。然后，我们使用 fetch 方法向 Google Cloud Translation API 发送了一个 POST 请求，并将翻译结果输出到控制台中。

显示翻译结果

现在，我们需要在鼠标悬浮在需要翻译的文本上时显示翻译结果。在这个例子中，我们将会使用 mouseover 和 mouseout 事件来实现这个功能。

首先，我们需要在 FloatingTranslator 类中添加一个方法来处理翻译请求。在这个方法中，我们将会获取到用户悬浮的文本，并将其翻译成用户设定的语言。

// javascriptcn.com 代码示例
class FloatingTranslator extends HTMLElement {
  constructor() {
    super();
    const template = document.getElementById('floating-translator-template').content;
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.appendChild(template.cloneNode(true));
    
    this.shadowRoot.querySelector('.translate-btn').addEventListener('click', async () => {
      // 处理翻译请求
    });
    
    this.addEventListener('mouseover', async (event) => {
      const text = event.target.textContent;
      const lang = 'en'; // 这里使用英语作为目标语言
      
      const key = await fetch('key.json').then(response => response.json());
      
      const url = `https://translation.googleapis.com/language/translate/v2?key=${key.private_key}`;
      const body = JSON.stringify({ q: text, target: lang });
      const response = await fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: body
      });
      
      const result = await response.json();
      console.log(result.data.translations[0].translatedText);
    });
    
    this.addEventListener('mouseout', () => {
      // 隐藏翻译结果
    });
  }
  
  // 其他代码
}

在上面的代码中，我们使用 addEventListener 方法添加了 mouseover 和 mouseout 事件监听器。当用户鼠标悬浮在需要翻译的文本上时，我们将会触发一个方法来处理翻译请求。当用户鼠标移出时，我们将会隐藏翻译结果。

接下来，我们需要在 FloatingTranslator 类中添加一个方法来显示翻译结果。

// javascriptcn.com 代码示例
class FloatingTranslator extends HTMLElement {
  constructor() {
    super();
    const template = document.getElementById('floating-translator-template').content;
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.appendChild(template.cloneNode(true));
    
    this.shadowRoot.querySelector('.translate-btn').addEventListener('click', async () => {
      // 处理翻译请求
    });
    
    this.addEventListener('mouseover', async (event) => {
      // 处理翻译请求
      const result = await this.translate(text, lang);
      
      const tooltip = document.createElement('div');
      tooltip.className = 'tooltip';
      tooltip.textContent = result;
      this.shadowRoot.appendChild(tooltip);
      
      tooltip.style.left = `${event.clientX}px`;
      tooltip.style.top = `${event.clientY}px`;
    });
    
    this.addEventListener('mouseout', () => {
      // 隐藏翻译结果
      const tooltip = this.shadowRoot.querySelector('.tooltip');
      this.shadowRoot.removeChild(tooltip);
    });
  }
  
  async translate(text, lang) {
    const key = await fetch('key.json').then(response => response.json());
    
    const url = `https://translation.googleapis.com/language/translate/v2?key=${key.private_key}`;
    const body = JSON.stringify({ q: text, target: lang });
    const response = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: body
    });
    
    const result = await response.json();
    return result.data.translations[0].translatedText;
  }
}

在上面的代码中，我们添加了一个名为 translate 的方法来处理翻译请求。在 mouseover 事件监听器中，我们调用了这个方法，并将翻译结果显示在了一个名为 tooltip 的元素中。在 mouseout 事件监听器中，我们删除了这个元素。

完成浮动翻译器

现在，我们已经成功地开发了一个浮动翻译器。用户可以点击翻译按钮来将当前页面翻译成用户设定的语言。当用户鼠标悬浮在需要翻译的文本上时，翻译结果将会显示在页面上。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Floating Translator</title>
    <script src="floating-translator.js"></script>
  </head>
  <body>
    <p>这是一段需要翻译的中文文本。</p>
    <p>这是另一段需要翻译的中文文本。</p>
    <floating-translator></floating-translator>
  </body>
</html>

在上面的代码中，我们将 floating-translator 元素添加到了页面中，并使用了 Google Cloud Translation API 来实现翻译功能。

总结

在本文中，我们学习了如何使用 Custom Elements 来开发一个浮动翻译器。我们使用 Google Cloud Translation API 来实现了翻译功能，并使用了 mouseover 和 mouseout 事件来显示和隐藏翻译结果。Custom Elements 的使用可以使我们的代码更加模块化和可维护，同时也可以提高代码的复用性。

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