需要依赖的插件

jquery.i18n.js

国际化配置文件

i18n_cn.json
i18n_en.json

配置文件例子

  1. {
  2.         "menu_donload": "下载",
  3.     "menu_measure": "测量条件",
  4.     "menu_usage_video": "使用方法视频",
  5.     "menu_window": "窗口",
  6.     "menu_help_versioninfo": "版本信息"
  7. }

HTML使用

使用自定义属性 i18n 添加到 Dom 上

<div i18n="menu_donload" index="4">下载</div>
<div i18n="menu_measure" index="5">测量条件</div>
<div i18n="menu_usage_video" index="6">使用方法视频</div>
<div i18n="menu_window" index="7">窗口</div>
<div i18n="menu_help_versioninfo" index="8">版本信息</div>

js 使用

var defaultLang = "cn"
    function languageSelect(defaultLang){
        $("[i18n]").i18n({
            defaultLang: defaultLang,
            filePath: "./i18n/",
            filePrefix: "i18n_",
            fileSuffix: "",
            forever: true,
            callback: function(res) {}
        });
    }
    languageSelect(defaultLang);

看源码

  • 首先是一个立即执行函数里面的第一句话是使用 $.fn.extend 使用jq的extend方法自定义方法 可以使用 $.方法名，来调用。
  • 取缓存
  • 找后台拿到配置文件，进行查找自定义的属性之后替换 ```javascript /*!

(function($) { // 使用jq的extend方法自定义方法 可以使用 $.方法名,来调用 $.fn.extend({ i18n: function(options) { var defaults = { lang: “”, defaultLang: “”, filePath: “/i18n/“, filePrefix: “i18n_”, fileSuffix: “”, forever: true, callback: function() {} };

        function getCookie(name) {
            var arr = document.cookie.split('; ');
            for (var i = 0; i < arr.length; i++) {
                var arr1 = arr[i].split('=');
                if (arr1[0] == name) {
                    return arr1[1];
                }
            }
            return '';
        };

        function setCookie(name, value, myDay) {
            var oDate = new Date();
            oDate.setDate(oDate.getDate() + myDay);
            document.cookie = name + '=' + value + '; expires=' + oDate;
        };

        var options = $.extend(defaults, options);

        if (getCookie('i18n_lang') != "" && getCookie('i18n_lang') != "undefined" && getCookie('i18n_lang') != null) {
            defaults.defaultLang = getCookie('i18n_lang');
        } else if (options.lang == "" && defaults.defaultLang == "") {
            throw "defaultLang must not be null !";
        };

        if (options.lang != null && options.lang != "") {
            if (options.forever) {
                setCookie('i18n_lang', options.lang);
            } else {
                $.removeCookie("i18n_lang");
            }
        } else {
            options.lang = defaults.defaultLang;
        };

        var i = this;
        $.getJSON(options.filePath + options.filePrefix + options.lang + options.fileSuffix + ".json", function(data) {
            var i18nLang = {};
            if (data != null) {
                i18nLang = data;
            }

            $(i).each(function(i) {
                var i18nOnly = $(this).attr("i18n-only");
                if ($(this).val() != null && $(this).val() != "") {
                    if (i18nOnly == null || i18nOnly == undefined || i18nOnly == "" || i18nOnly == "value") {
                        $(this).val(i18nLang[$(this).attr("i18n")])
                    }
                }
                if ($(this).html() != null && $(this).html() != "") {
                    if (i18nOnly == null || i18nOnly == undefined || i18nOnly == "" || i18nOnly == "html") {
                        $(this).html(i18nLang[$(this).attr("i18n")])
                    }
                }
                if ($(this).attr('placeholder') != null && $(this).attr('placeholder') != "") {
                    if (i18nOnly == null || i18nOnly == undefined || i18nOnly == "" || i18nOnly == "placeholder") {
                        $(this).attr('placeholder', i18nLang[$(this).attr("i18n")])
                    }
                }
            });
            options.callback();
        });
    }
});

})(jQuery);

```