网站为了国际化的需要，会使用到语言包。
博主之前用到过的语言包都是依靠后端语言或者模板语言进行的语言包，当然js部分中使用的文案会用到js自己的语言包，不过会通过后端语言动态加载中文or英文的js语言包。
这次尝试用js来打语言包，用到了插件 jquery.i18n.properties ，很明显，使用这个插件需要先加载jquery。
那就来看一下具体代码吧：
js 语言包测试 切换到英文标题
段落内容，balabala
第一屏
第一屏内容
jquery.i18n.properties-1.0.9.js
/****************************************************************************** * jquery.i18n.properties * * Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and * MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses. * * @version 1.0.x * @author Nuno Fernandes * @url www.codingwithcoffee.com * @inspiration Localisation assistance for jQuery (http://keith-wood.name/localisation.html) * by Keith Wood (kbwood{at}iinet.com.au) June 2007 * *****************************************************************************/(function($) {$.i18n = {};/** Map holding bundle keys (if mode: 'map') */$.i18n.map = {}; /** * Load and parse message bundle files (.properties), * making bundles keys available as javascript variables. * * i18n files are named .js, or _ .js or _ _ .js * Where: * The argument is a valid ISO Language Code. These codes are the lower-case, * two-letter codes as defined by ISO-639. You can find a full list of these codes at a * number of sites, such as: http://www.loc.gov/standards/iso639-2/englangn.html * The argument is a valid ISO Country Code. These codes are the upper-case, * two-letter codes as defined by ISO-3166. You can find a full list of these codes at a * number of sites, such as: http://www.iso.ch/iso/en/prods-services/iso3166ma/02iso-3166-code-lists/list-en1.html * * Sample usage for a bundles/Messages.properties bundle: * $.i18n.properties({ * name: 'Messages', * language: 'en_US', * path: 'bundles' * }); * @param name (string/string[], optional) names of file to load (eg, 'Messages' or ['Msg1','Msg2']). Defaults to "Messages" * @param language (string, optional) language/country code (eg, 'en', 'en_US', 'pt_PT'). if not specified, language reported by the browser will be used instead. * @param path (string, optional) path of directory that contains file to load * @param mode (string, optional) whether bundles keys are available as JavaScript variables/functions or as a map (eg, 'vars' or 'map') * @param cache (boolean, optional) whether bundles should be cached by the browser, or forcibly reloaded on each page load. Defaults to false (i.e. forcibly reloaded) * @param encoding (string, optional) the encoding to request for bundles. Property file resource bundles are specified to be in ISO-8859-1 format. Defaults to UTF-8 for backward compatibility. * @param callback (function, optional) callback function to be called after script is terminated */$.i18n.properties = function(settings) { // set up settings var defaults = { name: 'Messages', language: '', path: '', mode: 'vars', cache: false, encoding: 'UTF-8', callback: null }; settings = $.extend(defaults, settings); if(settings.language === null || settings.language == '') { settings.language = $.i18n.browserLang(); } if(settings.language === null) {settings.language='';} // load and parse bundle files var files = getFiles(settings.name); for(i=0; i = 2) { loadAndParseFile(settings.path + files[i] + '_' + settings.language.substring(0, 2) +'.properties', settings); } // 3. with language code and country code (eg, Messages_pt_PT.properties) if(settings.language.length >= 5) { loadAndParseFile(settings.path + files[i] + '_' + settings.language.substring(0, 5) +'.properties', settings); } } // call callback if(settings.callback){ settings.callback(); }};/** * When configured with mode: 'map', allows access to bundle values by specifying its key. * Eg, jQuery.i18n.prop('com.company.bundles.menu_add') */$.i18n.prop = function(key /* Add parameters as function arguments as necessary */) { var value = $.i18n.map[key]; if (value == null) return '[' + key + ']'; // if(arguments.length < 2) // No arguments.// //if(key == 'spv.lbl.modified') {alert(value);}// return value; // if (!$.isArray(placeHolderValues)) {// // If placeHolderValues is not an array, make it into one.// placeHolderValues = [placeHolderValues];// for (var i=2; i asdf 'p1' * test.t2, p1 ==> asdf {0} {1}{1}zxcv * test.t3, p1 ==> This is "a quote" a'{0}'sd{fgh{ij * test.t4, p1 ==> "'{0}'" p1{a} * test.t5, p1 ==> "'{0}'" {1} * test.t6, p1 ==> a {1} b p1 c * test.t6, p1, p2 ==> a p2 b p1 c * test.t6, p1, p2, p3 ==> a p2 b p1 c * test.t7 ==> a quoted \ s tringy x */ var i; if (typeof(value) == 'string') { // Handle escape characters. Done separately from the tokenizing loop below because escape characters are // active in quoted strings. i = 0; while ((i = value.indexOf('\\', i)) != -1) { if (value[i+1] == 't') value = value.substring(0, i) + '\t' + value.substring((i++) + 2); // tab else if (value[i+1] == 'r') value = value.substring(0, i) + '\r' + value.substring((i++) + 2); // return else if (value[i+1] == 'n') value = value.substring(0, i) + '\n' + value.substring((i++) + 2); // line feed else if (value[i+1] == 'f') value = value.substring(0, i) + '\f' + value.substring((i++) + 2); // form feed else if (value[i+1] == '\\') value = value.substring(0, i) + '\\' + value.substring((i++) + 2); // \ else value = value.substring(0, i) + value.substring(i+1); // Quietly drop the character } // Lazily convert the string to a list of tokens. var arr = [], j, index; i = 0; while (i < value.length) { if (value[i] == '\'') { // Handle quotes if (i == value.length-1) value = value.substring(0, i); // Silently drop the trailing quote else if (value[i+1] == '\'') value = value.substring(0, i) + value.substring(++i); // Escaped quote else { // Quoted string j = i + 2; while ((j = value.indexOf('\'', j)) != -1) { if (j == value.length-1 || value[j+1] != '\'') { // Found start and end quotes. Remove them value = value.substring(0,i) + value.substring(i+1, j) + value.substring(j+1); i = j - 1; break; } else { // Found a double quote, reduce to a single quote. value = value.substring(0,j) + value.substring(++j); } } if (j == -1) { // There is no end quote. Drop the start quote value = value.substring(0,i) + value.substring(i+1); } } } else if (value[i] == '{') { // Beginning of an unquoted place holder. j = value.indexOf('}', i+1); if (j == -1) i++; // No end. Process the rest of the line. Java would throw an exception else { // Add 1 to the index so that it aligns with the function arguments. index = parseInt(value.substring(i+1, j)); if (!isNaN(index) && index >= 0) { // Put the line thus far (if it isn't empty) into the array var s = value.substring(0, i); if (s != "") arr.push(s); // Put the parameter reference into the array arr.push(index); // Start the processing over again starting from the rest of the line. i = 0; value = value.substring(j+1); } else i = j + 1; // Invalid parameter. Leave as is. } } else i++; } // Put the remainder of the no-empty line into the array. if (value != "") arr.push(value); value = arr; // Make the array the value for the entry. $.i18n.map[key] = arr; } if (value.length == 0) return ""; if (value.lengh == 1 && typeof(value[0]) == "string") return value[0]; var s = ""; for (i=0; i 0 && parameters[i].match("^#")!="#") { // skip comments var pair = parameters[i].split('='); if(pair.length > 0) { /** Process key & value */ var name = unescape(pair[0]).replace( /^\s\s*/, '' ).replace( /\s\s*$/, '' ); // trim var value = pair.length == 1 ? "" : pair[1]; // process multi-line values while(value.match(/\\$/)=="\\") { value = value.substring(0, value.length - 1); value += parameters[++i].replace( /\s\s*$/, '' ); // right trim } // Put values with embedded '='s back together for(var s=2;s 0) } // END: skip comments } eval(parsed);}/** Make sure namespace exists (for keys with dots in name) */// TODO key parts that start with numbers quietly fail. i.e. month.short.1=Janfunction checkKeyNamespace(key) { var regDot = /\./; if(regDot.test(key)) { var fullname = ''; var names = key.split( /\./ ); for(var i=0; i 0) {fullname += '.';} fullname += names[i]; if(eval('typeof '+fullname+' == "undefined"')) { eval(fullname + '={};'); } } }}/** Make sure filename is an array */function getFiles(names) { return (names && names.constructor == Array) ? names : [names];}/** Ensure language code is in the format aa_AA. */function normaliseLanguageCode(lang) { lang = lang.toLowerCase(); if(lang.length > 3) { lang = lang.substring(0, 3) + lang.substring(3).toUpperCase(); } return lang;}/** Unescape unicode chars ('\u00e3') */function unescapeUnicode(str) { // unescape unicode codes var codes = []; var code = parseInt(str.substr(2), 16); if (code >= 0 && code < Math.pow(2, 16)) { codes.push(code); } // convert codes to text var unescaped = ''; for (var i = 0; i < codes.length; ++i) { unescaped += String.fromCharCode(codes[i]); } return unescaped;}/* Cross-Browser Split 1.0.1(c) Steven Levithan ; MIT LicenseAn ECMA-compliant, uniform cross-browser split method */var cbSplit;// avoid running twice, which would break `cbSplit._nativeSplit`'s reference to the native `split`if (!cbSplit) { cbSplit = function(str, separator, limit) { // if `separator` is not a regex, use the native `split` if (Object.prototype.toString.call(separator) !== "[object RegExp]") { if(typeof cbSplit._nativeSplit == "undefined") return str.split(separator, limit); else return cbSplit._nativeSplit.call(str, separator, limit); } var output = [], lastLastIndex = 0, flags = (separator.ignoreCase ? "i" : "") + (separator.multiline ? "m" : "") + (separator.sticky ? "y" : ""), separator = RegExp(separator.source, flags + "g"), // make `global` and avoid `lastIndex` issues by working with a copy separator2, match, lastIndex, lastLength; str = str + ""; // type conversion if (!cbSplit._compliantExecNpcg) { separator2 = RegExp("^" + separator.source + "$(?!\\s)", flags); // doesn't need /g or /y, but they don't hurt } /* behavior for `limit`: if it's... - `undefined`: no limit. - `NaN` or zero: return an empty array. - a positive number: use `Math.floor(limit)`. - a negative number: no limit. - other: type-convert, then use the above rules. */ if (limit === undefined || +limit < 0) { limit = Infinity; } else { limit = Math.floor(+limit); if (!limit) { return []; } } while (match = separator.exec(str)) { lastIndex = match.index + match[0].length; // `separator.lastIndex` is not reliable cross-browser if (lastIndex > lastLastIndex) { output.push(str.slice(lastLastIndex, match.index)); // fix browsers whose `exec` methods don't consistently return `undefined` for nonparticipating capturing groups if (!cbSplit._compliantExecNpcg && match.length > 1) { match[0].replace(separator2, function () { for (var i = 1; i < arguments.length - 2; i++) { if (arguments[i] === undefined) { match[i] = undefined; } } }); } if (match.length > 1 && match.index < str.length) { Array.prototype.push.apply(output, match.slice(1)); } lastLength = match[0].length; lastLastIndex = lastIndex; if (output.length >= limit) { break; } } if (separator.lastIndex === match.index) { separator.lastIndex++; // avoid an infinite loop } } if (lastLastIndex === str.length) { if (lastLength || !separator.test("")) { output.push(""); } } else { output.push(str.slice(lastLastIndex)); } return output.length > limit ? output.slice(0, limit) : output; }; cbSplit._compliantExecNpcg = /()??/.exec("")[1] === undefined; // NPCG: nonparticipating capturing group cbSplit._nativeSplit = String.prototype.split;} // end `if (!cbSplit)`String.prototype.split = function (separator, limit) { return cbSplit(this, separator, limit);};})(jQuery); 中文语言包 strings_zh.properties
string_title=js 语言包测试string_lang1=标题string_lang2=段落内容，balabalastring_lang3=导航1string_lang4=导航2string_lang5=导航3string_lang6=导航4string_lang7=第一屏string_lang8=第一屏内容string_lang9=切换到英文
英文语言包 strings_en.properties
string_title=js language teststring_lang1=titlestring_lang2=content，balabalastring_lang3=nav1string_lang4=nav2string_lang5=nav3string_lang6=nav4string_lang7=screen1string_lang8=screen contentstring_lang9=change to Chinese
代码布局结构
和后端/模板语言来打语言包，进行语言切换相比：
优点：
1、针对普通的html就可以使用（不需要改成php等）
缺点：
1、需要同时加载中文和英文两套图片，哪怕当前不显示（如果中文和英文的图片不一样的话），耗费了更多的流量
2、针对中文和英文的不同样式也都要写在同一个文件中，不像用后端语言时，中文和英文的样式分成两个文件，需要调用时加载对应的
版权声明：本文为博主原创文章，未经博主允许不得转载。