国际化

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>