Asp.net專案基於jQuery.i18n.properties 實現前端頁面的資源國際化
| 主題 | 概要 |
|---|---|
| JS | 前端頁面，多語言 |
| 編輯 | 時間 |
| 新建 | 20171011 |
| 序號 | 參考資料 |
| 1 | https://github.com/jquery-i18n-properties/jquery-i18n-properties |
| 2 | http://blog.csdn.net/aixiaoyang168/article/details/49336709 |
| 3 | http://www.cnblogs.com/landeanfen/p/7581609.html |
任何技術的引進都是為了解決問題，要想給一個好好執行的網站，支援多語言，如果設計的時候沒進行相應設計，調整起來是相當麻煩的。
假設有一個導航欄控制元件：
為了把它做成中英文兩套系統，使用者登入的時候，根據他習慣的語言進行載入。
權宜的做法是一個控制元件，寫兩份程式碼，if-else進行判斷。
這不但產生了大量的重複程式碼，而且以後要同時維護兩份程式碼，如果每個控制元件，每個頁面都這樣處理，是給自己找罪受，十分不可取的。
這裡也用網上廣泛使用的jQuery.i18n.properties進行處理。
引進jQuery.i18n.properties
jQuery.i18n.properties在github上的地址：
https://github.com/jquery-i18n-properties/jquery-i18n-properties
所謂引進，就是把它的jquery.i18n.properties.js檔案複製下來，並引用到我們的頁面內。
為此，我在我們的Scripts資料夾下，新建個i18n_properties目錄：
用來存放js檔案和翻譯檔案：
language.extensions.js是我們自己的js，zh-cn,eu-us分別是對應中文網站和英文網站。
Zh-ch下，現在只有兩個.properties，一個公共的翻譯項，一個是特定頁面的翻譯項，比如現在這個Navgrey.properties表示導航控制元件的翻譯項。
在頁面中引進這兩個指令碼進行使用：
使用jQuery.i18n.properties
在要進行多語言切換在頁面，新增一個隱藏域：
<input type="hidden" id="i18n_pagename" value="<%=_sysUser.CurrentLanguage%>" name="Common-Navgrey"/>其中，value表示使用者登入時喜好的語言，name是表示當前頁面用到的.properties檔案，比如，上面Common-Navgrey表示用到了Common.properties和Navgrey.properties兩個檔案。
Js中解析這個語言選項，和資原始檔陣列：
var optionEle = $("#i18n_pagename");
if (optionEle.length < 1) {
console.log("Unknown i18n_pagename");
return false;
};
var sourceName = optionEle.attr('name');
sourceName = sourceName.split('-');
var optionLang = optionEle.attr('value');
自定義標記
為了讓js判斷以什麼方式處理翻譯，以及賦值什麼內容，需要給需要進行多語言處理的元素自定義兩個屬性作為標記。
假設為data-i18nclassname和data-i18npropname：
data-i18nclassname="I18nHtmlText" data-i18npropname='Common-Nav-H1-Home'這裡使用到了html5支援的以data-開始的自定義屬性，data-i18nclassname指定以什麼方式處理， data-i18npropname指定要賦值的內容。
這可能不好理解，舉例說明：
還是以這個導航控制元件來說，假設有一級標題公告和新聞，注意它們後面有個倒三角圖示：
可以看到，它其實是個a標籤，“公告”後面還接了一個span。
同理，新聞標題，“新聞”後面也接了一個span。
而公告下面的二級標題：
是在文字的左側有個小三角。
Span是在“未讀公告”的前面。
換句話說，data-i18nclassname指示了span是在前面還是後面，data-i18npropname指示了是表示新聞還是公告。
這個控制元件只有兩種型別的data-i18nclassname, ”I18nHtmlText”,”I18nHtmlTextLeftArr”。每種型別js中定義一種處理方式，用簡單工廠方法。
基類，傳入的是當前選擇的元素：
/*
I18n的型別基類，不同的型別有不同的處理方式
*/
function I18nClassBase(select) {
this.select = select;
}
I18nClassBase.prototype.doI18n = function() {}
一級標題類，把小三角append到屬性值的後面：
/*
處理Html文字型別的i18n
*/
function I18nHtmlTextClass(select) {
this.select = select;
}
I18nHtmlTextClass.prototype = new I18nClassBase(this.select);
I18nHtmlTextClass.prototype.doI18n = function() {
var propNam = "";
try {
propName = $(this.select).data(I18nGlobalConst.I18nPropName());
var propValue = $.i18n.prop(propName);
var child = $(this.select).children();
$(this.select).empty().append(propValue).append(child);
} catch (ex) {
console.log("I18n propName[" + propName + "] failed");
console.log(ex);
}
}
二級標題類，把屬性值append到小三角的後面：
function I18nHtmlTextLeftArrClass(select) {
this.select = select;
}
I18nHtmlTextLeftArrClass.prototype = new I18nClassBase(this.select);
I18nHtmlTextLeftArrClass.prototype.doI18n = function() {
var propNam = "";
try {
propName = $(this.select).data(I18nGlobalConst.I18nPropName());
var propValue = $.i18n.prop(propName);
var child = $(this.select).children();
$(this.select).empty().append(child).append(propValue);
} catch (ex) {
console.log("I18n propName[" + propName + "] failed");
console.log(ex);
}
}
簡單工廠：
/*
簡單工廠，例項每種I18n的處理型別
*/
function I18nFactory(className, select) {
switch (className) {
case I18nGlobalConst.I18nHtmlText():
return new I18nHtmlTextClass(select);
case I18nGlobalConst.I18nHtmlTextLeftArr():
return new I18nHtmlTextLeftArrClass(select);
default:
return new I18nClassBase(select);
}
}
其它語言轉來客串js的，有強迫症，把常量用閉包封裝到一個類中：
var I18nGlobalConst = (function() {
var i18nHtmlText = 'I18nHtmlText';
var i18nHtmlTextLeftArr = 'I18nHtmlTextLeftArr';
var i18nPropName = 'i18npropname';
var i18nPathRoot = '/Scripts/i18n_properties/';
var constants = {};
constants.I18nHtmlText = function() {
return i18nHtmlText;
}
constants.I18nPropName = function() {
return i18nPropName;
}
constants.I18nPathRoot = function() {
return i18nPathRoot;
}
constants.I18nHtmlTextLeftArr = function() {
return i18nHtmlTextLeftArr;
}
return constants;
})();
執行入口函式：
/**
* 執行頁面i18n方法
* @return
*/
var execI18n = function() {
/*
獲取一下資原始檔名
*/
var optionEle = $("#i18n_pagename");
if (optionEle.length < 1) {
console.log("Unknown i18n_pagename");
return false;
};
var sourceName = optionEle.attr('name');
sourceName = sourceName.split('-');
var optionLang = optionEle.attr('value');
/* 需要引入 i18n 檔案*/
if ($.i18n == undefined) {
console.log("Please reference i18n js file")
return false;
};
/*
這裡需要進行i18n的翻譯
*/
jQuery.i18n.properties({
name: sourceName, //資原始檔名稱
path: I18nGlobalConst.I18nPathRoot() + optionLang + '/', //資原始檔路徑
mode: 'map', //用Map的方式使用資原始檔中的值
//language: optionLang,
callback: function() { //載入成功後設定顯示內容
console.log('Init i18n');
try {
$('[data-i18nclassname]').each(function() {
var className = $(this).data('i18nclassname');
new I18nFactory(className, this).doI18n();
});
} catch (ex) {
console.log(ex);
}
console.log('Finish init i18n');
}
});
}
可以看到，回撥的時候，如果有新的型別，比如三級標題，四級標題等加進來，這裡不用改一行程式碼，只要寫對應的子類就行了。
載入完頁面後執行：
$(function() {
execI18n();
});
完整程式碼：
/*
全域性常量
*/
var I18nGlobalConst = (function() {
var i18nHtmlText = 'I18nHtmlText';
var i18nHtmlTextLeftArr = 'I18nHtmlTextLeftArr';
var i18nPropName = 'i18npropname';
var i18nPathRoot = '/Scripts/i18n_properties/';
var constants = {};
constants.I18nHtmlText = function() {
return i18nHtmlText;
}
constants.I18nPropName = function() {
return i18nPropName;
}
constants.I18nPathRoot = function() {
return i18nPathRoot;
}
constants.I18nHtmlTextLeftArr = function() {
return i18nHtmlTextLeftArr;
}
return constants;
})();
/*
I18n的型別基類，不同的型別有不同的處理方式
*/
function I18nClassBase(select) {
this.select = select;
}
I18nClassBase.prototype.doI18n = function() {}
/*
處理Html文字型別的i18n
*/
function I18nHtmlTextClass(select) {
this.select = select;
}
I18nHtmlTextClass.prototype = new I18nClassBase(this.select);
I18nHtmlTextClass.prototype.doI18n = function() {
var propNam = "";
try {
propName = $(this.select).data(I18nGlobalConst.I18nPropName());
var propValue = $.i18n.prop(propName);
var child = $(this.select).children();
$(this.select).empty().append(propValue).append(child);
} catch (ex) {
console.log("I18n propName[" + propName + "] failed");
console.log(ex);
}
}
function I18nHtmlTextLeftArrClass(select) {
this.select = select;
}
I18nHtmlTextLeftArrClass.prototype = new I18nClassBase(this.select);
I18nHtmlTextLeftArrClass.prototype.doI18n = function() {
var propNam = "";
try {
propName = $(this.select).data(I18nGlobalConst.I18nPropName());
var propValue = $.i18n.prop(propName);
var child = $(this.select).children();
$(this.select).empty().append(child).append(propValue);
} catch (ex) {
console.log("I18n propName[" + propName + "] failed");
console.log(ex);
}
}
/*
簡單工廠，例項每種I18n的處理型別
*/
function I18nFactory(className, select) {
switch (className) {
case I18nGlobalConst.I18nHtmlText():
return new I18nHtmlTextClass(select);
case I18nGlobalConst.I18nHtmlTextLeftArr():
return new I18nHtmlTextLeftArrClass(select);
default:
return new I18nClassBase(select);
}
}
/**
* 執行頁面i18n方法
* @return
*/
var execI18n = function() {
/*
獲取一下資原始檔名
*/
var optionEle = $("#i18n_pagename");
if (optionEle.length < 1) {
console.log("Unknown i18n_pagename");
return false;
};
var sourceName = optionEle.attr('name');
sourceName = sourceName.split('-');
var optionLang = optionEle.attr('value');
/* 需要引入 i18n 檔案*/
if ($.i18n == undefined) {
console.log("Please reference i18n js file")
return false;
};
/*
這裡需要進行i18n的翻譯
*/
jQuery.i18n.properties({
name: sourceName, //資原始檔名稱
path: I18nGlobalConst.I18nPathRoot() + optionLang + '/', //資原始檔路徑
mode: 'map', //用Map的方式使用資原始檔中的值
//language: optionLang,
callback: function() { //載入成功後設定顯示內容
console.log('Init i18n');
try {
$('[data-i18nclassname]').each(function() {
var className = $(this).data('i18nclassname');
new I18nFactory(className, this).doI18n();
});
} catch (ex) {
console.log(ex);
}
console.log('Finish init i18n');
}
});
}
$(function() {
execI18n();
});
Properties檔案
按名值對這樣儲存，比如，英文：
對應的中文：
把值賦到data-i18npropname屬性中，data-i18npropname=’Common-Nav-H1-Notice’，根據當前登入的語言，就可顯示是“公告“還是”Notice”。
IIS填坑
參考http://www.cnblogs.com/landeanfen/p/7581609.html
主要在web.config中配置IIS對.properties的支援。
相關文章
- 使用spring實現資源國際化Spring
- 基於react-intl實現手動國際化切換React
- 前端系列——jquery.i18n.properties前端國際化解決方案“填坑日記”前端jQuery
- springMVC專案國際化(i18n)實現方法SpringMVC
- vux UI 專案國際化UXUI
- 對於購物中心HTML前端頁面的最佳化HTML前端
- SpringBoot專案國際化Spring Boot
- 中工國際通過IFSApplication實現基於微信的移動化管理APP
- Xamarin.FormsShell基礎教程（7）Shell專案關於頁面的介紹ORM
- Android實現國際化Android
- 專案：IT資源共享資源（登入前端）<1>前端
- 小程式國際化實現方式
- Vue+Django 旅遊網專案 首頁前端實現VueDjango前端
- 最全面的前端資源分享前端
- Java模組化的國際化實現- GunnarJava
- 配置CLion管理Qt專案國際化支援QT
- Android中的資源與國際化!Android
- 總承包專案管理——專案管理的國際化之路（轉）專案管理
- 記一次ASP.NET MVC效能優化(實際專案中)ASP.NETMVC優化
- ASP.NET設計國際電子商務專案中的本地化支援ASP.NET
- 5分鐘前端國際化前端
- 基於SpringBoot的國際化應用Spring Boot
- 基於 flow.ci 實現 PHP 專案自動化持續整合PHP
- winForm 國際化的簡單實現ORM
- 前端基礎（四）：前端國際規範收集前端
- java國際資源化檔案配置j2se+j2eeJava
- asp.net mvc簡單實現基於Razor的分頁控制元件ASP.NETMVC控制元件
- 前端多專案模組化實踐前端
- 基於Vue3+TS的Monorepo前端專案架構設計與實現VueMono前端架構
- 記錄--前端實現檔案預覽(word、excel、pdf、ppt、xmind、 音影片、圖片、文字) 國際化前端Excel
- 基於EF Core儲存的國際化服務
- golang 開源專案彙總（基於網際網路架構分類）Golang架構
- springboot頁面國際化Spring Boot
- 利用基於samba服務的cifs檔案系統實現共享資源Samba
- 基於資源的HTTP Cache的實現介紹HTTP
- Go語言專案實戰：基於開源資料的成語查詢Go
- 關於利用jQuery實現愛奇藝裡面的滑鼠移入改變當前頁面的功能的實現原理jQuery
- 基於vue2.0實現仿百度前端分頁效果（一）Vue前端