首页 > 代码库 > Web前端国际化之jQuery.i18n.properties

Web前端国际化之jQuery.i18n.properties

2024-10-04 14:59:40   213人阅读

Web前端国际化之jQuery.i18n.properties

jQuery.i18n.properties介绍

       国际化是如今Web应用程序开发过程中的重要一环，jQuery.i18n.properties是一款轻量级的jQuery国际化插件，能在不正确后端做不论什么更改的条件下，轻松简易的实现Web前端的国际化。

与其它国际化工具相比，jQuery.i18n.properties插件具有简单、易用、高内聚低耦合的特点。

      国际化英文单词为：internationalization。又称i18n，"i"为单词的第一个字母，"18"为"i"和"n"之间单词的个数，而"n"代表这个单词的最后一个字母。

jQuery.i18n.properties採用.properties文件对JavaScript进行国际化。jQuery.i18n.properties插件首先载入默认的资源文件（strings.properties），然后载入针对特定语言环境的资源文件（strings_zh.properties）。这就保证了在未提供某种语言的翻译时，默认值始终有效。

开发者能够JavaScript变量或Map的方式从资源管理器中通过key获取资源。

其有几个突出的特点：

       1、 按顺序载入默认资源文件和指定语言环境的资源文件，保证默认值始终可用

       2、未指定语言时默认使用浏览器语言

       3、能够使用占位符

       4、资源文件里key支持命名空间

       5、支持跨行的值

jQuery.i18n.properties使用

      jQuery.i18n.properties的API设计也非常精简和易懂，仅仅有几个经常使用的API，载入配置API：jQuery.i18n.properties()；获取资源API【支持占位符的使用】：jQuery.i18n.prop()。获取浏览器语言：jQuery.i18n.browserLang()。

     jQuery.i18n.properties(settings)该方法载入资源文件。当中settings是配置载入选项的一系列键值对。技术分享

步骤（以HTML为例）：

1、引入脚本文件

<script type="text/javascript" src="http://www.mamicode.com/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/js/jquery.i18n.properties-min-1.0.9.js"></script>
2、编写前端代码

<body>
    <label data-locale="hupu_username">用户名：</label><input type="text">
    <label data-locale="hupu_password">密码：</label><input type="password">
 </body>

3、编写国际化运行脚本

<script type="text/javascript">
	loadProperties();
	function loadProperties() {
		 $.i18n.properties({
			 name:‘hupu-lang‘,
			 path:‘i18n/‘,
			 mode:‘map‘,
			 language:$.i18n.browserLang(),
			 callback:function(){
				$("[data-locale]").each(function(){
					$(this).html($.i18n.prop($(this).data("locale")));
				});
			 }
		 });
	 }
</script>

      眼下最新版本号为1.2.0。开源地址：https://github.com/jquery-i18n-properties/jquery-i18n-properties。想了解很多其它的童鞋能够自己上去看看源代码，这对个人能力提升还是有莫大帮助。本人就点到为止。酱紫编程才会有情趣。


Web前端国际化之jQuery.i18n.properties


联系
我们