i18n實現前端國際化(例項)
阿新 • • 發佈：2019-02-11
在今日的需求中需要利用 i18n 這個框架來實現前端的國家化操作，下圖是實現效果：
點選選擇框實現網頁上語言的切換：
下面開始實現過程：
- 所需工具：
- jquery-3.3.1.js 下載地址：jquery
- jquery.i18n.properties.js jquery.i18n.properties.js - 搭建專案目錄如下：
其中：language.js為自定義的js檔案，用於實現頁面邏輯，strings_en_US.properties
和strings_en_ZH.properties檔案為語言檔案。 - 首先我們在
index.html中寫上一定的測試頁面程式碼，如下所示：
<!doctype html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>國際化樣例</title - 下面我們在兩個語言中分別定義需要顯示的文字：
strings_en_ZH.properties檔案：username=使用者名稱： password=密碼: lan_zh=中文 lan_en=英文strings_en_US.properties檔案：username=User Name： password=Password: lan_zh=Chinese lan_en=English
- 最後我們在
language.js中實現點選事件和切換方法，程式碼如下：
var LANGUAGE_Index = "zh_CN"; //標識語言
jQuery(document).ready(function () {
// alert("頁面載入時呼叫的方法");
LANGUAGE_Index = jQuery.i18n.normaliseLanguageCode({}); //獲取瀏覽器的語言
loadProperties(LANGUAGE_Index);
});
$(".lan_select").change(function () {
if (($(".lan_select").val() === "英文") || ($(".lan_select").val() === "English")) {
LANGUAGE_Index = "en_US";
} else {
LANGUAGE_Index = "zh_CN";
}
loadProperties(LANGUAGE_Index);
});
function loadProperties(type) {
jQuery.i18n.properties({
name: 'strings', // 資原始檔名稱
path: 'Languages/', // 資原始檔所在目錄路徑
mode: 'map', // 模式：變數或 Map
language: type, // 對應的語言
cache: false,
encoding: 'UTF-8',
callback: function () { // 回撥方法
$('.lan_zh').html($.i18n.prop('lan_zh'));
$('.lan_en').html($.i18n.prop('lan_en'));
$('.username').html($.i18n.prop('username'));
$('.password').html($.i18n.prop('password'));
}
});
}