自己設計讓網頁支援多國語系的架構

首先我們要把問題釐清,支援多國語系最基本的概念就是,畫面上的文字要被替換。

於是我們先建立一個用來被替換的多國語系字典檔
這邊先簡單用物件來當範例

// 多國語系文字庫
var gLib = {
"0000": {
"CHT": "Traditional Chinese (繁體中文)",
"ENU": "English (English)",
"KOR": "Korean (한국어)"
},
"0001": {
"CHT": "語言",
"ENU": "Language",
"KOR": "언어"
},
"0002": {
"CHT": "選擇語言:",
"ENU": "Select your language:",
"KOR": "언어를 선택하세요 :"
}
}

有了多國語系文字庫之後,我想要建立一個管理器來存取這個文字庫,我希望這個管理器僅保有我指定語言的部分,並且提供取用的 get function

// 文字庫管理器
var gTxtLib = {
resource: undefined,
set: function(lib, lang) {
var result = undefined;
if (typeof lib == 'object') {
result = {};
for (var id in lib) {
var txtObj = lib[id];
result[id] = (lang in txtObj ? txtObj[lang] : undefined);
}
}
this.resource = result;
},
has: function(id) {
return (this.resource != undefined && id in this.resource);
},
get: function(id) {
if (this.has(id)) return this.resource[id];
return '---';
}
};

這個管理器透過 gTxtLib.set(lib, lang) 暫存一組指定語系的文字物件在 resource
以我的範例來說會是這樣一個物件,如果選取"CHT",gTxtLib.resource 會是

{
"0000": "Traditional Chinese (繁體中文)",
"0001": "語言",
"0002": "選擇語言:"
}

然後透過 gTxtLib.get(id) 從中取用文字

那再來,我們為了要找到什麼地方要換成什麼,所以畫面上所有文字必須被某個區塊裝起來,並且有標籤,有編號。如下範例:

<p>
<span class="txtRsc" data-tid="0002"></span>
<select id="lang_select">
<option value="CHT">Chinese 中文</option>
<option value="ENU">English 英文</option>
<option value="KOR">Korean 한국어</option>
</select>
</p>
<p>
<span class="txtRsc" data-tid="0001"></span>
<span>: </span>
<span class="txtRsc" data-tid="0000"></span>
</p>

我們的標籤就是定義 class 含有 "txtRsc"
然後編號在 data-tid="xxxx"

接著我們根據標籤找到區塊,根據編號去拿對應的文字填上去,就結束了。

// 置換畫面上的文字
function updateUIText() {
$('.txtRsc').each(function(index, element) {
var $self = $(element), 
this_id = $self.data('tid');
if (gTxtLib.has(this_id)) $self.html(gTxtLib.get(this_id.toString()));
});
}

最後補上初始化動作

// 頁面ready初始化
$(document).ready(function() {
$('#lang_select').change(function() {
gTxtLib.set(gLib, $(this).val());
updateUIText();
}).trigger('change');
});


<><><> 範例結果 <><><>




:



留言

這個網誌中的熱門文章

javascript - 樂透 lottery - 號碼產生器

HTML - WebSocket Sample - with PHP Server