无后端完成在线翻译功能

在线翻译

纯前端 百度翻译API localStorage本地存储 完成提取文本中的生词，并返回单词的翻译结果

项目内容

之前背单词的时候发现，直接背单词的话太枯燥，直接阅读英文书籍、报纸又有太多的单词不认识， 就想能够做个demo，直接检查出 一个英文文本中的 生词，并翻译出来。

本demo有下列内容

• 前端界面
• 用localStorage存储用户已近掌握的单词
• 利用百度翻译API翻译单词

项目演示

所以项目本身不需要服务器，编写玩静态资源后可以直接托管在GitHub Page上（GitHub真是伟大的网站）

在线地址

操作演示：

（无法加载GIF可以自行打开该链接）

代码逻辑

代码仓库 目前项目正处于初级阶段，所以简陋，还有许多未添加的功能

目录结构

.
├── README.md
├── css
│   └── style.css
├── index.html
└── js├── getTrans.js├── getVocabulariesFromText.js└── static├── jQuery.min.js└── md5.js

其中

js/static

目录下 一个提供jQuery，另一个用于百度翻译要求的MD5加密

localStorage

从项目网站所在的便签也打开控制台，观察localStorage

我把把所有单词分为已知know，正在学习learn和未知。并把已知的单词存储在localStorage。 这样做的好处是不需要服务器，坏处是用户换个浏览器之前的内容就没了

前端页面

分为三个部分：

• 输入框，用来等待用户输入文本
• 提交按钮，点击后开始翻译文本框中的内容
• 用来显示翻译结果的表格

js代码流程

为提交按钮绑定onClick时间

当用户点击提交按钮后

• 获得输入框中的文本
• 用正则表达式提取其中的英语单词
• 对提取到的单词做两个处理
• • 去除重复的单词
• • 去除已经学会的单词
• 利用百度翻译API翻译单词
• 将返回的结果渲染到页面

仓库的代码都有注释，就不多说废话了

结语

项目还很简陋，有时间再完善下。

更多专业前端知识，请上 【猿2048】www.mk2048.com