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

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

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

// 多國語系文字庫
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');
});


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



Chinese 中文 English 英文 Korean 한국어
: