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. windows、linux劫持技术

    windows系统以下能够利用detours劫持 realse  模式劫持,调试的程序不能够 函数劫持能够实现的效果. 函数的劫持原理 我们怎样实现-detours detours是微软亚洲研究院出品 ...

  2. 遗传奥秘的伟大揭秘者:J.Watson

    J.Watson的近照: 人们公认,揭秘生命体的遗传奥秘(DNA)是二十世纪最伟大的科技成果之中的一个,或许就是人类最伟大的科技进步(而不是"之中的一个"). 上世纪是人类做出伟大 ...

  3. ROS-参数

    前言:参数的用法. 一.参数常用命令 命令 功能 rosparam list 参数列表 rosparam get 获取参数 rosparam set  设置参数 rosparam load 加载参数 ...

  4. JQuery (总结)

    延迟触发事件 Ajax异步请求数据 Jquery事件: Focus获得焦点 blur失去焦点 Change内容在变化的时候 Click点击事件 ---------------------------- ...

  5. 服务端 | Nodejs 学习笔记(一)

    Node.js 前言: 2009年面世 nodejs.org 官网 https://www.npmjs.com/ 模块社区 github.com 仓库 stackoverflow.com  问答社区 ...

  6. SQL where 条件顺序对性能的影响有哪些

    经常有人问到oracle中的Where子句的条件书写顺序是否对SQL性能有影响,我的直觉是没有影响,因为如果这个顺序有影响,Oracle应该早就能够做到自动优化,但一直没有关于这方面的确凿证据.在网上 ...

  7. 关于CR0寄存器

    开始的时候,我认为CR0.WP如果被置位,那么内存的页面只读属性将会失效,导致可以被写入数据. 这几天正好碰到一个问题,查看了资料才发现,之前的理解不完整. 引用Intel手册中的一句话: CR0.W ...

  8. Win10 八步打通 Nuget 发布打包

    我们可以使用Nuget 下载你所需要的资源包还可以将自己封装好的各种控件包 工具包 等上传nuget 我们只需要几步就完成你要发布的包. 第一步:编译你的控件 anycpu debug/release ...

  9. js在当前日期基础上,加1天 3天 7天 15天

    需求 点击保障期的天数 根据起始时间算出结束时间 代码 //点击保障期触发的方法 periodChange(val,id){ this.activeNumperiod=val this.submitD ...

  10. JVM 原理

    0 引言  JVM一直是java知识里面进阶阶段的重要部分,如果希望在java领域研究的更深入,则JVM则是如论如何也避开不了的话题,本系列试图通过简洁易读的方式,讲解JVM必要的知识点. 1 运行流 ...