無後端完成在線翻譯功能

在線翻譯

純前端 + 百度翻譯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翻譯單詞
• 將返回的結果渲染到頁面

倉庫的代碼都有註釋，就很少說廢話了

結語

項目還很簡陋，有時間再完善下。