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="jquery/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="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的更多相关文章

  1. jQuery国际化插件 jQuery.i18n.properties 【轻量级】

    jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化. 国际化英文单词为:Internationalization,又称i18n,“i”为单词的第 ...

  2. 使用 jQuery.i18n.properties 实现 Web 前端的国际化

    jQuery.i18n.properties 简介 在介绍 jQuery.i18n.properties 之前,我们先来看一下什么是国际化.国际化英文单词为:Internationalization, ...

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

    jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化. 国际化英文单词为:Internationalization,又称i18n,"i& ...

  4. jQuery之前端国际化jQuery.i18n.properties[转]

    http://www.ibm.com/developerworks/cn/web/1305_hezj_jqueryi18n/ jQuery.i18n.properties是一款轻量级的jQuery国际 ...

  5. 基于jQuery.i18n.properties实现前端网站语言多版本

    我是参考播客做了个demo:http://blog.csdn.net/aixiaoyang168/article/details/49336709 jQuery.i18n.properties采用.p ...

  6. 前端系列——jquery.i18n.properties前端国际化解决方案“填坑日记”

    前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:系统国际化.如果是前后端完全分离的开发模式,要做国际化,真的太简单了,有现成的解决方案,基于Node构建的时下热门的任何一种技术选型都 ...

  7. jquery.i18n.properties前端国际化解决方案“填坑日记”

    但现在的情况是老的项目并没有使用这类架构.说起国际化,博主几年前就做过,在MVC里面实现国际化有通用的解决方案,主要就是通过资源文件的方式定义多语言.最初接到这个任务,并没有太多顾虑,毕竟这种东西有很 ...

  8. 【转】jQuery之前端国际化jQuery.i18n.properties

    jQuery之前端国际化jQuery.i18n.properties 基于jQuery.i18n.properties 实现前端页面的资源国际化 jquery-i18n-properties

  9. jquery.i18n.properties前端国际化方案

    如果新项目要做系统国际化, 时下热门的任何一种技术选型都有成熟的方案,比如: vue + vue-i18n angular + angular-translate react + react-intl ...

随机推荐

  1. MFC窗口去边框、置顶、全屏、激活

    静态移除长提边框非常easy,直接设置"Border"属性为"none"就可以 "Maximize Box", "Minimize ...

  2. Android应用之——微信微博第三方sdk登录分享使用过程中的一些常见问题

    前言 近期在使用第三方登录和分享的过程中遇到了非常多问题,一方面能够归结为自己经验的不足,还有一方面事实上也说明了官方文档的含糊不清.这篇博文不会写关于怎样使用第三方登录分享,由于官方文档已经写明了步 ...

  3. iOS：编译错误[__NSDictionaryM objectAtIndexedSubscript:]: unrecognized selector sent to instance 0xa79e61

    这个意思是,__NSDictionaryM  无法将值传到下标索引对象,言简意赅就是数组越界.可是再看看,这是数组吗?不是,所以.遇到这样的crash,我这里有两种情况: 1.首先看看你 indexP ...

  4. Android开发之大位图压缩水印处理

    我们在发微博或者csdn博文的时候都能够给图片加上一个水印.一个独立的标识,那是怎么实现的呢?先封装一个BitmapTools封装类.该类要解决的问题是一将突破存储至sdcard中,二给图片加上水印. ...

  5. NFS的搭建（sudo apt-get install nfs-kernel-server），TFTP服务器（sudo apt-get install tftpd-hpa tftp-hpa）

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/Osean_li/article/details/53240705 ***************** ...

  6. NEU 1664 传送（最短路基础 堆优化Dijkstra）

    题目描述 小A最近喜欢上一款游戏:游戏把地图分了一些区域,这些区域可能会重叠,也可能不会. 游戏中有一项传送技能,改传送技能只能将在同一区域的两个地方使用.小A可以利用区域中重叠部分来实现从某一区域到 ...

  7. 由GPS坐标计算半径

    在实际应用当中,一般是通过一个个体的编码来查找该编码对应的地区中心的经纬度,然后再根据这些经纬度来计算彼此的距离,从而估算出某些群体之间的大致距离范围(比如酒店旅客的分布范围-各个旅客的邮政编码对应的 ...

  8. Kylin基础教程（二）

    近期先把Kylin教程整理完毕,后续根据大家需求(可能会发起投票),整理其他技术栈知识教程. OK,那么接上一篇文章,感性认知了Kylin之后,我们先来看一下如何部署Kylin吧. 序号也依然沿用上一 ...

  9. css3新增的属性有哪些

    徐先森讲web CSS3新增的属性有哪些: CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: b ...

  10. Java基础——Servlet

    什么是Servlet Servlet是Java Web的三大组件之一,它属于动态资源.Servlet的作用是处理请求,服务器会把接收到的请求交给Servlet来处理,在Servlet中通常需要: l  ...