基於JavaScript純前端的國際化解決方案

前言
本文討論瞭基於純前端的國際化多語言的解決方案,不依賴於任何後臺技術。即隻用HTML + JavaScript來實現國際化的方案。該方案參考瞭FCKEditor的實現機制,其實很多富文本編輯器都采用瞭類似的思路。

實現方式
1. 將各國語言翻譯好之後放在一個js文件裡以JSON格式保存,或者每個語言一個js文件也可以,比如zh-CN.js,en-US.js等。
2. 將所有需要翻譯的文字用span標簽包起來,並且設置一個自定義屬性”localeString”, 並將內容的英文值賦值給該屬性,來標志該span標簽裡面的內容需要翻譯,比如hello world.。
3. JavaScript載入後首先判斷瀏覽器的語言,然後遍歷頁面找到所有帶有”localeString”屬性的span標簽,然後使用用戶的語言的對應的值將該值替換掉。比如上面的hello,在語言js中找到hello對應的值“你好時間。”來替換掉”hello world.”
這裡要註意的是”localeString”是自定義屬性,你可以用任何名字都可以,它的值就是每個內容在js文件裡的key瞭,比如:{“hello”: “你好世界。”},下面是翻譯文件的一個簡單的例子:

  langText = {
    "name": "姓名",
    "password": "密碼" www.aiwalls.com
  }
HTML的代碼片段:

  <span localeString="name">Name</span><input type="text" id="username" />
  <span localeString="password">Password</span><input type="password" id="password" />
下面是替換span標簽裡面內容的JavaScript代碼:

  /**
 * Translate the text in the HTML.
 * @param {dom} domObj An dom object under which text will be translated.
 * @param {string} sTag The HTML tag name in which text will be translated, usually "span".
 */
function translatePage(domObj, sTag) {
  var e = domObj.getElementsByTagName(sTag);
  var currentLangText = sapLang.getCurrentLangText();
  var E,s;
  for (var i = 0; i < e.length; i++) {
    if (E = e[i].getAttribute('iLikeLang')) {
      if (currentLangText[E]) {
        e[i].innerHTML = currentLangText[E];
      }
    }
  }
}

translatePage(document, 'span');

發佈留言