so easy 前端簡單實現多語言
來自專欄猿論
12 人贊了文章
每個公司業務不一樣，此解決方案僅做參考 。
Git demo地址
前言
其實現在開發者解決多語言普遍三種解決方案：
第一個是為每個頁面提供每種語言的相關頁面。
第二種是把內容從表現形式中分離出來，做不同語言的內容文件。
第三種是動態翻譯頁面內容。第三種很少見，而且機器翻譯技術還很難達到人們的預期。其實第二種相對來說簡單一點，那麼開搞。
實現
思考
- 翻譯公司給的有的excel有的是json文件，咱們就統一請求json文件吧;
- html中給標籤加個
lang屬性，到時候頁面載入時遍歷所有這些有lang屬性的標籤去實現切換語言; - js里的文字用方法實現轉換語言;
- 把用戶選擇的語言存到cookie里吧，嗯！拿個小本本記下來;
- 做個緩存，請求過的語言文件就不再請求了;
- 暫時就這些吧...
demo
文件目錄
index.html
<!DOCTYPE html><html><meta charset="utf-8"> <title>translation test</title> <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script><script src="js/script.js"></script> <script src="js/index.js"></script> </head> <body> <div> <a href="#" id="enBtn">English</a> <a href="#" id="zhBtn">簡體中文</a> </div> <div><a lang>click here:</a></div> <div><input type="button" value="apply" lang id="applyBtn"></div> </body> </html>
script.js
var dict = {};$(function () { registerWords(); if(getCookieVal("lang")=="en"){ setLanguage("en"); }else if(getCookieVal("lang")=="zh"){ setLanguage("zh"); }else{ setLanguage("en"); }// 切換語言事件 根據自己業務而定 $("#enBtn").bind("click", function () { setLanguage("en"); //這裡也可以寫一些其他操作，比如載入語言對應的css }); $("#zhBtn").bind("click", function () { setLanguage("zh"); });});function setLanguage(lang) { setCookie("lang=" + lang + "; path=/;"); translate(lang);}function getCookieVal(name) { var items = document.cookie.split(";"); for (var i in items) { var cookie = $.trim(items[i]); var eqIdx = cookie.indexOf("="); var key = cookie.substring(0, eqIdx); if (name == $.trim(key)) { return $.trim(cookie.substring(eqIdx + 1)); } } return null;}function setCookie(cookie) { var Days = 30; //此 cookie 將被保存 30 天 var exp = new Date(); //new Date("December 31, 9998"); exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); document.cookie = cookie+ ";expires=" + exp.toGMTString();}function translate(lang) { if(sessionStorage.getItem(lang + "Data") != null){ dict = JSON.parse(sessionStorage.getItem(lang + "Data")); }else{ loadDict(); } $("[lang]").each(function () { switch (this.tagName.toLowerCase()) { case "input": $(this).val(__tr($(this).attr("lang"))); break; default: $(this).text(__tr($(this).attr("lang"))); } });}function __tr(src) { return (dict[src] || src);}function loadDict() { var lang = (getCookieVal("lang") || "en"); $.ajax({ async: false, type: "GET", url: "/lang/"+lang + ".json", success: function (msg) { dict = msg; sessionStorage.setItem(lang + Data, JSON.stringify(dict)); } });}// 遍歷所有lang屬性的標籤賦值function registerWords() { $("[lang]").each(function () { switch (this.tagName.toLowerCase()) { case "input": if($(this).attr("lang")==""){ $(this).attr("lang", $(this).val()); } break; default: if($(this).attr("lang")==""){ $(this).attr("lang", $(this).text()); } } });}
之前弄demo的時候，registerWords函數這裡沒有判斷
因為他賦值的是當前元素的值，這個時候你lang的值就和語言包文件里的key對應不上了
使用方法
html中語言切換：給所有標籤加上lang屬性
__tr()方法可以直接把script.js作為一個插件使用放到項目中
總結
條條大路通羅馬，根據自己的實際需求與業務場景去做即可。
有點倉促，有不足的還請各位指點。
作者：遊魂Andy
鏈接：https://www.imooc.com/article/35737
來源：慕課網
本文原創發佈於慕課網 ，轉載請註明出處，謝謝合作
推薦閱讀：
【重磅】認證作者招募 | 打造個人品牌 so easy ！
十分鐘認識Activiti6.0工作流引擎
人人都會設計模式：03、策略模式--Strategy
Ajax原理一篇就夠了
精通Python爬蟲-03-狩獵大師
推薦閱讀：
※Redux-Saga 漫談
※ajax post 415 Unsupported Media Type 錯誤
※個人前端小知識總結
※graphql-js 淺嘗
※前端思維轉變--從事件驅動到數據驅動