基于jQuery.i18n.properties插件实现前端页⾯国际化
⼀、简介
在介绍 jQuery.i18n.properties 之前，我们先来看⼀下什么是国际化。国际化英⽂单词为：Internationalization，⼜称
i18n，“i”为单词的第⼀个字母，“18”为“i”和“n”之间单词的个数，⽽“n”代表这个单词的最后⼀个字母。在计算机领域，国际化是指设计能够适应各种区域和语⾔环境的软件的过程。
jQuery.i18n.properties 是⼀款轻量级的 jQuery 国际化插件。与 Java ⾥的资源⽂件类似，jQuery.i18n.properties 采⽤
.properties ⽂件对 JavaScript 进⾏国际化。jQuery.i18n.properties 插件根据⽤户指定的（或浏览器提供的）语⾔和国家编码（符合 ISO-639 和 ISO-3166 标准）来解析对应的以“.properties”为后缀的资源⽂件。
利⽤资源⽂件实现国际化是⼀种⽐较流⾏的⽅式，例如 Android 应⽤就可以采⽤以语⾔和国家编码命名的资源⽂件来实现国际化。jQuery.i18n.properties 插件中的资源⽂件以“.properties”为后缀，包含了区域相关的键值对。我们知道，Java 程序也可以使⽤以 .properties 为后缀的资源⽂件来实现国际化，因此，
当我们要在 Java 程序和前端 JavaScript 程序中共享资源⽂件时，这种⽅式就显得特别有⽤。jQuery.i18n.properties 插件⾸先加载默认的资源⽂件（例如：strings.properties），然后加载针对特定语⾔环境的资源⽂件（例如：strings_zh.properties），这就保证了在未提供某种语⾔的翻译时，默认值始终有效。开发⼈员可以以 JavaScript 变量（或函数）或 Map 的⽅式使⽤资源⽂件中的 key。rties 插件⾸先加载默认的资源⽂件（例如：strings.properties），然后加载针对特定语⾔环境的资源⽂件（例如：strings_zh.properties），这就保证了在未提供某种语⾔的翻译时，默认值始终有效。开发⼈员可以以 JavaScript 变量（或函数）或 Map 的⽅式使⽤资源⽂件中的key。
⼆、jQuery.i18n.properties API
jQuery.i18n.properties 的 API ⾮常简单，只有少数⼏个 API，即 jQuery.i18n.properties()、jQuery.i18n.prop()、
jQuery.i18n.browserLang()。当然，和其他 jQuery 插件⼀样，我们也可以采⽤ $.i18n.properties()、$.i18n.prop() 和
$.i18n.browserLang() 的形式使⽤这⽤这些 API。
jQuery.i18n.properties(settings)
unblockedscriptures 怎么读
该⽅法加载资源⽂件，其中 settings 是配置加载选项的⼀系列键值对，各配置项的具体描述如表 1 所⽰。
表 1. settings
选项描述类型可
选？
name资源⽂件的名称，例如 strings 或 [strings1,strings2]，前者代表⼀个资源⽂件，后者代表资源⽂件数组。String
或
String[]
否
pat⽂件所在⽬录的路径String是
mode加载模式：“vars”表⽰以 JavaScript 变量或函数的形式使⽤资源⽂件中的 Key，“map”表⽰以 Ma
p 的⽅loan debt
式使⽤资源⽂件中的 Key，“both”表⽰可以同时使⽤两种⽅式。如果资源⽂件中的 Key 包含 JavaScript
jquery下载文件插件的关键字，则只能采⽤“map”。默认值是“vars”。
String是
language ISO-639 指定的语⾔编码（如：“en”表⽰英⽂、“zh”表⽰中⽂），或同时使⽤ ISO-639 指定的语⾔编码
和 ISO-3166 指定的国家编码（如：“en_US”，“zh_CN”等）。如果不指定，则采⽤浏览器报告的语⾔编
码。
String是cache指定浏览器是否对资源⽂件进⾏缓存，默认为 false。boolean是encoding加载资源⽂件时使⽤的编码。默认为 UTF-8。String是
jQuery.i18n.properties() 的使⽤⽅法如清单 1 所⽰。清单 1. jQuery.i18n.properties() ⽤法
jQuery.i18n.prop(key)
该⽅法以 map 的⽅式使⽤资源⽂件中的值，其中 key 指的是资源⽂件中的 key 。当 key 指定的值含有占位符时，可以使⽤
jQuery.i18n.prop(key,var1,var2 … ) 的形式，其中 var1,var2 …对各占位符依次进⾏替换。例如资源⽂件中有“msg_hello= 您好 {0}，今天是{1}。”的键值对，则我们可以采⽤“jQuery.i18n.prop( ‘ msg_hello ’ , ’⼩明’ , ’星期⼀’ );”的形式使⽤ msg_hello 。jQuery.i18n.browserLang() ⽤于获取浏览浏览器的语⾔信息，这⾥不再单独介绍。
三、具体实现国际化的思路
1.⾸次进⼊浏览器，前端页⾯会根据浏览器设置的语⾔来显⽰对应的语⾔，⼀般⼤陆地区显⽰的简体中⽂(zh-CN)，港澳台地区会显⽰繁体中⽂（zh-TW/zh-HK..），国外则是英⽂(en\en-US)，如何查看或者设置浏览器语⾔？？打开浏览器-设置-⾼级设置-语⾔即可看到，拿⾕歌为例。
encoding 加载资源⽂件时使⽤的编码。默认为 UTF-8。String 是callback
代码执⾏完成时运⾏的回调函数
function
是
选项描述
类型可选？ 1 2 3 4 5 6 7 8 9 10
jQuery.i18n.properties({
name:'strings',// 资源⽂件名称
path:'bundle/',// 资源⽂件所在⽬录路径
mode:'both',// 模式：变量或 Map
language:'pt_PT',// 对应的语⾔
cache:false,
encoding: 'UTF-8',
callback: function() {// 回调⽅法 }});
代码会根据浏览器的语⾔，将浏览器语⾔保存到cookie中，看清楚，⼀定要存到cookie中，不能存到session，原因是session⼀旦关闭了浏览器就会消失，⽽cookie不会，会根据你设置的时间保留起来（主要⽬的是为了下次登录仍然显⽰cookie保存的语⾔）
2.然后，前端页⾯(⼀般在头部)应该有个下拉框，选择是简体中⽂、繁体中⽂、英⽂等，绑定选择事件，选择某个后就会刷新浏览器中的cookie，⾃动刷新页⾯后，语⾔显⽰也会随之改变。
四、如何实现？
1.引⼊jquery和i18n插件（jQuery.i18n.properties）还有cookie插件（ kie.js）以及我们的language.js（该js是⾃⼰定义）
<script type="text/javascript" src="resources/lib/jquery-1.7.1.min.js">
</script>
<script type="text/javascript" src="resources/lib/jquery.i18n.properties-1.0.9.js">
</script>
插件的⽬录结构应该是这样的，下⾯还有对应的en（英⽂），zh-CN(简体中⽂)的⽂件包，下⾯有对应的properties⽂件，
2.html代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title class="i18n" name='title'></title>
<meta id="i18n_pagename" content="index-common">
斐波那契数列递归算法c语言
<meta name="viewport" content="width=device-width">
<meta name="keywords" content="" />
<meta name="description" content=""/>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="lan">
<div class="lan1"><label class="i18n" name="lan"></label></div>
<div class="lan2">
<select id="language">
<option value="zh-CN">中⽂简体</option>
<option value="zh-TW">中⽂繁體</option>
<option value="en">English</option>
</select>
</div>
</div>
linux下cp命令的用法<br>
<hr>
<div><label class="i18n" name="hellomsg1"></label><label class="i18n" name="hellomsg2"></label></div><br> <div><label class="i18n" name="commonmsg1"></label><label class="i18n" name="commonmsg2"></label></div><br> <div>
<input type="search" class="i18n-input" selectname="searchPlaceholder" selectattr="placeholder">
</div>
<script src="js/jquery.js "></script>
<script src="kie.js"></script>
<!-- 加载语⾔包⽂件 -->
<script src="js/jquery.i18n.properties.js"></script>
<script src="js/language.js"></script>
</body>
</html>
language.js代码如下：
/**
* 获取浏览器语⾔类型
* @return {string} 浏览器国家语⾔
*/
var getNavLanguage = function(){
if(navigator.appName == "Netscape"){
var navLanguage = navigator.language;
return navLanguage;
}
return false;
}
/**
* 设置语⾔类型：默认为中⽂
*/
var i18nLanguage = "zh-CN";
/*
设置⼀下⽹站⽀持的语⾔种类
*/
var webLanguage = ['zh-CN', 'zh-TW', 'en'];
/**
* 执⾏页⾯i18n⽅法
* @return
*/
var execI18n = function(){
/*
获取⼀下资源⽂件名
*/
var optionEle = $("#i18n_pagename");
if (optionEle.length < 1) {
console.log("未到页⾯名称元素，请在页⾯写⼊\n <meta id=\"i18n_pagename\" content=\"页⾯名(对应语⾔包的语⾔⽂件名)\">"); return false;
};
var sourceName = optionEle.attr('content');
sourceName = sourceName.split('-');
/*
⾸先获取⽤户浏览器设备之前选择过的语⾔类型
*/
if ($.cookie('userLanguage')!=undefined||$.cookie('userLanguage')!=null||$.cookie('userLanguage')!="") {
i18nLanguage = $.cookie('userLanguage');
console.log(i18nLanguage);
} else{
// 获取浏览器语⾔
var navLanguage = getNavLanguage();
console.log(navLanguage);
if (navLanguage) {
// 判断是否在⽹站⽀持语⾔数组⾥
var charSize = $.inArray(navLanguage, webLanguage);
if (charSize > -1) {
i18nLanguage = navLanguage;
// 存到缓存中
$.cookie('userLanguage',navLanguage, { expires: 30})
};
} else{
console.log("not navigator");
return false;
}
}
/* 需要引⼊ i18n ⽂件*/
if ($.i18n == undefined) {
console.log("请引⼊i18n js ⽂件")
return false;
};
/*
这⾥需要进⾏i18n的翻译
*/
jQuery.i18n.properties({
name : sourceName, //资源⽂件名称
path : 'i18n/' + i18nLanguage +'/', //资源⽂件路径
mode : 'map', //⽤Map的⽅式使⽤资源⽂件中的值
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论