由于頁面假設設定均使用 Unicode 字符集,于是一般不用考慮 GB2312/BIG5 字符集問題,偉大的 Unicode 字符集已經涵蓋了繁體字的字符了(UTF-8 編碼)。
怎么在頁面調用這個功能呢?很簡單,首先引入下面 Js(注意還依賴 Function.prototype.delegate(), 下面會提及):
然后綁定按鈕事件,我們簡單地使用 onclick 綁定來全局函數 window.toChinese(el)、window.toSimpleChinese(el)。el 是按鈕元素。
js 代碼中比較長的兩個字符串變量分別是簡體中文和繁體中文,他們切換沒有什么神奇之處,只是所有文本經過這些變量一一對應即可。當然這里只是常用的繁簡對應,而且是機械的,有些特殊的翻譯需要聯系上下文的,這種高級轉換不在此討論之列。
首先我們看看變量函數 translate,執行它會通過遞歸遍歷完整個 DOM(可以說比較笨的方法)
轉換 DOM 內容,我們第一時間想到的可能是 el.innerHTML,但其實大可不必,而且遞歸的時候不太方便。不妨再想想看,我們其實只需要對文本轉換即可,DOM API 能夠判斷 文本節點(node.nodeType == 3),然后可讀可寫的 data 屬性就是設置文本的(textNode.data),由此我們就是完成到繁體的切換。節點其他屬性 title、alt、value 也是同樣原理。另外,if (("||BR|HR|TEXTAREA|".indexOf("|" + node.tagName + "|")) > 0)continue; 是排除某些節點的方法,其思路比較特別,可以多借鑒下。
至于 coverntFn 是一函數參數。通過根函數 translateText(text, isBig5) 新生成兩個函數 :var traditionalized = translateText.delegate(null, true), simplized = translateText.delegate(null, false);
Function.prototype.delegate() 方法如下。
繁簡的轉換基本如此了。值得一提的是,瀏覽器其實替我們識別語言環境的變量,主要是 navigator.userLanguage || navigator.language。這個變量在服務端也可以獲取,頭讀取:Request.ServerVariables("http_accept_language")。
最后我們還通過 cookie 來保存語言狀態。
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com