魔鬼字典 JavaScript 笔记 代码比较多乱第3/3页

下面是详细讲解“魔鬼字典 JavaScript 笔记 代码比较多乱第3/3页”的完整攻略。

1. 了解魔鬼字典的功能

魔鬼字典是一个基于 JavaScript 实现的词典工具，可以帮助用户查询单词的翻译、同义词、反义词和例句等信息。该工具的主要功能包括：

• 解析用户输入的单词，并根据单词的不同词性展示不同的内容。
• 可以查询单词的翻译、同义词、反义词和例句等信息，并显示在页面上。
• 用户可以通过键盘上的方向键或鼠标滚轮来浏览词典的内容。

2. 代码结构与工作流程

魔鬼字典的代码比较多，但是结构相对清晰，大致分为以下几个部分：

• HTML 结构：用于呈现页面内容，包含输入框、待显示的单词信息和词条列表等。
• 样式表：用于控制页面的样式。
• JavaScript：主要负责单词解析与查询、页面内容的更新和键盘事件的监听等功能。

JavaScript 的工作流程如下：

• 获取用户的输入，判断输入是否为空，为空则不做任何操作。
• 解析用户输入的单词，获取单词的基本信息，包括单词本身、音标、词性等。
• 利用第三方 API 查询单词的翻译、同义词、反义词和例句等信息，获取数据后更新页面内容。
• 监听键盘事件，当用户按下方向键或鼠标滚轮时，更新词条列表的显示。

3. 示例一：查询单词翻译

以下是查询单词翻译的 JavaScript 代码示例：

const queryWord = async (word) => {
  try {
    const response = await fetch(`https://api.shanbay.com/bdc/search/?word=${word}`);
    const result = await response.json();
    const { cn_definition } = result.data;
    return cn_definition.defn;
  } catch (error) {
    console.log(error);
  }
};

const showTranslation = async (word) => {
  const translation = await queryWord(word);
  const translationElem = document.querySelector('.translation');
  translationElem.innerHTML = translation;
};

首先定义了一个 queryWord 函数，用于查询单词的翻译。函数调用了第三方 API 获取数据，并返回查询结果中的中文定义。

接下来定义了一个 showTranslation 函数，用于将查询到的翻译显示在页面上。该函数获取查询结果后，找到页面中的 .translation 元素，并将翻译内容插入到元素的 HTML 中。

最后，当用户输入要查询的单词后，调用 showTranslation 函数，并将单词作为参数传递进去，即可实现显示单词翻译的功能。

4. 示例二：更新词条列表

以下是更新词条列表的 JavaScript 代码示例：

const updateSugList = (suggestions, activeIndex = 0) => {
  const sugsElem = document.querySelector('.suggestions');
  sugsElem.innerHTML = suggestions
    .map((sugg, i) => `<li class="${i === activeIndex ? 'active' : ''}">${sugg}</li>`)
    .join('');
};

const onInputKeyUp = async (event) => {
  const inputValue = event.target.value.trim();
  if (inputValue.length < 1) {
    return;
  }
  const suggestions = await getSuggestions(inputValue);
  if (suggestions.length > 0) {
    updateSugList(suggestions);
  }
};

首先定义了一个 updateSugList 函数，用于更新词条列表的显示。该函数接收一个词条列表和一个可选参数 activeIndex，用于标识当前活动的词条。

该函数找到页面中的 .suggestions 元素，并将词条列表展示在该元素中。使用了 map 函数将每个词条转化为一个 <li> 元素，同时根据 activeIndex 判断当前是否为活动状态，如果是则添加 active 类名。

其次定义了一个 onInputKeyUp 函数，用于监听输入框的键盘事件。在该函数中，获取用户输入的文本内容，并去掉首尾空格。然后调用第三方 API 查询并获取与输入文本相关的词条列表，并将查询结果传递给 updateSugList 函数来更新词条列表的显示。

当用户输入完成之后，在输入框中按下方向键或滚动鼠标时，更新 activeIndex 的值，并重新调用 updateSugList 函数以改变词条列表中活动元素的样式。