在線翻譯
純前端 + 百度翻譯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翻譯單詞
- 將返回的效果襯着到頁面
堆棧的代碼都有解釋，就不多說空話了
結語
項目還很大略，有時候再完美下。
