1.定义资源文件:language_en.js
com.xrz.I18N = {
"index": {
"bottom": {
"menu_home": "HOME",
"menu_cart": "CART"
},
"top": {
"label_allBalance": "我的总资产(元)",
"label_allEarnamount": "历史总收益(元)",
"label_myProduct": "我的理财产品",
"label_balance": "理财专户余额",
"label_safeCard": "我的安全卡",
"label_tradeLog": "交易记录"
}
}
};
2.国际化处理:i18n.js
var com = com || {};
com.zte = com.zte || {};
com.zte.I18N = com.zte.I18N || {
messages: undefined,
__getLauguages: function () {
var languages = navigator.languages;
if (!languages || languages.length==0) {
var lan = navigator.language;
var lan1 = lan.substring(0, lan.indexOf('-'));
languages = [lan, lan1];
}
languages = languages.concat("");// default language
return languages;
},
// file: "layout", "resource"
// language: "zh-CN"
__getFileUri: function (file, language) {
var dir = document.head.getAttribute('data-i18n-path');
if (!dir)
dir = ".";
if (language)
language = "." + language;
else
language = "";
var filesSufix = file == "layout" ? ".css" : ".js";
return dir + "/" + file + language + filesSufix;
},
__getLayoutCssFileUri: function (language) {
return this.__getFileUri("layout", language);
},
__getResourceFileUri: function (language) {
return this.__getFileUri("resource", language);
},
__loadFiles: function () {
var languages = this.__getLauguages();
console.debug("User language list:", languages);
var me = this;
var index = 0;
recursionLoad("script");
recursionLoad("link");
function recursionLoad(tag, index) {
if (!index)
index = 0;
if (index >= languages.length)
return;
var lan = languages[index];
function errorHandler() {
console.warn("File not found:", s.href || s.src);
recursionLoad(tag, ++index);
}
function linkerrorHandler() {
console.log(this.sheet, arguments);
if (this.sheet.cssRules && this.sheet.cssRules.length > 0)
return;
console.warn("File not found or it is empty:", s.href || s.src);
recursionLoad(tag, ++index);
}
function isIEorEdge() {
var str = navigator.appVersion;
return str.indexOf("MSIE") > 0 || str.indexOf("Trident") > 0 || str.indexOf("Edge") > 0;
}
var s = document.createElement(tag);
if (tag == 'link') {
s.rel = "stylesheet";
s.type = "text/css";
s.href = me.__getLayoutCssFileUri(lan);
if (isIEorEdge())
s.onload = linkerrorHandler;// error event of <link> not fired in IE
else
s.onerror = errorHandler;
}
else {
s.src = me.__getResourceFileUri(lan);
s.onerror = errorHandler;
}
console.warn("Try to load File:", s.src || s.href);
document.head.appendChild(s);
}
},
__stringToJson: function (str) {
try {
return eval(str);
}
catch (e) {
console.error(e);
console.info("Can NOT convert to JSON:", str);
}
return null;
},
getMessage: function (key, params) {
var variable = "this.messages." + key;
var message = this.__stringToJson(variable);
if (message && params)
for (var i = 0; i < params.length; i++) {
var param = params[i];
var re = new RegExp('\\{' + (i + 1) + '\\}', 'g');
message = message.replace(re, param);
}
return message;
},
//
__process: function () {
var me = this;
$('[data\-i18n\-key]').each(function (i, e) {
var element = $(e);
var key = element.attr('data-i18n-key');
var params = me.__stringToJson(element.attr('data-i18n-params'));
var message = me.getMessage(key, params);
console.log(key + ":", message);
element.html(message);
}
);
},
__processWhenReady: function () {
if (this.messages)
this.__process();
else
window.setTimeout('com.zte.I18N.__processWhenReady()', 20);
},
init: function () {
this.__loadFiles();
var me = this;
var preonreadystatechange = document.onreadystatechange;
document.onreadystatechange = function () {
console.log("ready state: ", this.readyState);
if (preonreadystatechange)
preonreadystatechange();
if (this.readyState == 'complete') {
if (me.messages)
me.__process();
else {
me.__processWhenReady();
}
}
}
}
}
;
com.zte.I18N.init();
3.页面调用:
<a href="javascript:void(0)" class="active" data-i18n-key="index.bottom.menu_home"></a>