jquery.i18n.properties的使用讲解与实例-程序员宅基地

技术标签： 国际化  前端  jquery  i18n  properties  

最近在做一个主页时需要用国际化，用HTML+JS，还有jQuery, 于是就选择了jquery.i18n.properties.js。本文介绍的示例还依赖jquery、jquery.json。

原文地址

介绍

jquery.i18n.properties是一款轻量级的国际化插件，采用.properties文件来对javascript文件进行国际化，即根据用户指定的语言和国家编码来解析对应的以".properties"为后缀的文件。

messages.properties
messages_zh_CN.properties
messages_en_US.properties
API

jQuery.i18n.properties相对于其他的插件，只有少量的API，即 . i 18 n . p r o p e r t i e s ( ) 、 .i18n.properties()、 .i18n.properties()、.i18n.prop()、$.i18n.normaliseLanguageCode()等:

jQuery.i18n.properties
选项 描述 类型 可选
name 资源文件的名称 string | [string] 否
language 指定语言编码： （en： 英文， zh： 中文），或者同时指定语言编码和国家编码(例如： zh_CN, en_US)等 string 是
path 资源文件所在的路径 string 否
mode 加载模式： “vars”表示以javascript变量和函数的形式使用文件中的key，“map”表示以Map的方式使用文件中的key，“both”表示可以同时使用两种方式。如果资源文件中的key包含javascript中的关键字，只能使用map。默认值是vars。 string 是
cache 指定浏览器是否缓存资源文件，默认false boolean 是
encoding 指定加载资源文件时的编码格式，默认utf-8 string 是
debug 控制台是否记录记录log boolean 是
async 指定调用callback（回调）函数的方式，false: 所有的资源文件加载请求发送完毕后就调用回调函数， true：所有的资源加载并解析完成后才调用回调函数。默认false boolean 是
namespace 指定资源文件的keys被存放在namespace下，即$.i18n.properties[namespace][key], 使用namespace可以最大限度的减少冲突和重写的概率; 默认为null不使用namespace string 是
callback 方法执行完的回调函数 function 是 
jQuery.i18n.properties({
    name:'Messages', 
    path:'bundle/', 
    mode:'both',
    language:'pt_BR',
    async: true,
    callback: function() {
        $('#content).html($.i18n.prop('msg_hello'));
    }
});
$.i18n.prop(key)

通过key以Map的形式获取资源文件中对应的值

 $('#content).html($.i18n.prop('msg_hello'));
$.i18n.normaliseLanguageCode(settings)
  1. 当settings没有language属性或language属性值不符合规范时，获取浏览器的语言编码，格式化并返回语言编码。
  2. 当settings中language满足要求时，格式化并返回语言编码。
实例

本项目是运行在nginx上的，关于nginx的安装和配置，同学们自行解决^v^

依赖引入
<script src="lib/jquery/jquery-3.2.1.min.js"></script>
<script src="lib/i18n/jquery.json.min.js"></script>
<script src="lib/i18n/jquery.i18n.properties.js"></script>
html
<div>
    <p id="text"></p>
    <button οnclick="switchLang()" id="lang"></button>
</div>
index.js
var LANGUAGE_CODE = "en_US"; //标识语言

function loadProperties(type) {
    jQuery.i18n.properties({
        name: 'strings', // 资源文件名称
        path: 'static/', // 资源文件所在目录路径
        mode: 'map', // 模式：变量或 Map 
        language: type, // 对应的语言
        cache: false,
        encoding: 'UTF-8',
        callback: function () { // 回调方法    
            $('#text').html($.i18n.prop('string_text'));
            $('#lang').html($.i18n.prop('string_lang'));
        }
    });
}

function switchLang() {
    LANGUAGE_CODE = LANGUAGE_CODE == 'zh_CN' ? 'en_US' : 'zh_CN';
    loadProperties(LANGUAGE_CODE);
}

$(document).ready(function () {
    LANGUAGE_CODE = jQuery.i18n.normaliseLanguageCode({}); //获取浏览器的语言     
    loadProperties(LANGUAGE_CODE);
})
资源文件(.properties)文件

strings_en_US.properties:

string_text=Hello world!
string_lang=Chinese

strings_zh_CN.properties:

string_text=你好，世界！
string_lang=英文
运行效果
中文

英文

以上就是实例的所有代码，可以点击这里 下载示例

以上就是本次学习到的知识，本文有些地方参考了他人的文章，如果本文有不对之处欢迎指出。如果这篇文章对你有帮助，欢迎点赞。
也可以发邮件讨论具体细节[email protected]
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37566424/article/details/79070218

智能推荐

vim插件安装及常用技巧_bxbx.vim-程序员宅基地

文章浏览阅读5.2k次。一、插件安装Vundle是vim的一个插件管理器， 同时它本身也是vim的一个插件。插件管理器用于方便、快速的安装、删除、Vim更新插件。mkdir -p ~/.vim/bundlegit clone https://github.com/gmarik/Vundle.vim.git ~/.vim/bundle/Vundle.vim管理器安装完成后，vim ~/.vimrc命令创建.vimrc文件syntax on" tab宽度和缩进同样设置为4set tabstop=4set softta_bxbx.vim

java.lang.ClassNotFoundException：如何解决-程序员宅基地

文章浏览阅读7.2w次，点赞10次，收藏41次。本文适用于当前面临java.lang.ClassNotFoundException挑战的Java初学者。 它将为您提供此常见Java异常的概述，这是一个示例Java程序，可支持您的学习过程和解决策略。 如果您对与更高级的类加载器相关的问题感兴趣，我建议您复习有关java.lang.NoClassDefFoundError的文章系列，因为这些Java异常密切相关。 java.lang..._java.lang.classnotfoundexception:

串口通信数据帧_一帧数据-程序员宅基地

文章浏览阅读1.2k次，点赞9次，收藏17次。不同的设备间建立连接往往需要通信，而串口通信是十分常用的一种。UART串口通信需要两根线来实现，一根用于串口发送，另外一更用于串口接收。UART串口发送或者接收过程中一帧数据包括1位起始位、8位数据位、1位停止位，为了提高数据的可靠性可以在停止位前加上1位奇偶校验位。串口通信虽然十分简单，但是在不同设备间发送的数据往往不止1个字节，往往需要多个字节组成的数据包。当我们按照数据包发送时我们需要考虑到以及，因此我们可以采用定义数据帧的方式解决上述两个问题。_一帧数据

代码编辑快捷键使用说明_改代码快捷键-程序员宅基地

文章浏览阅读1.4k次。1、Ctrl+←或→ ：跳过（左边或右边）一个光标相邻的单词或词组(标点符号相当于一个单词)。点击前光标位置：点击后光标位置：2、Shift+←或→：选中（左边或右边）一个光标相邻的字符。点击前显示：点击后显示： 3、Shift+Ctrl+←或→：选中（左边或右边）一个光标相邻的单词或词组(标点符号相当于一个单词)。点击前显示：点击后显示：4、Home/End：光标定位到当前行的行头/行尾。点击前:点击Home后:点击End后:5、Ctrl+Home/End：从光标所在位置直接回到当前文件开头/结尾。点击前_改代码快捷键

【课上笔记】第七章 树与森林_树和森林的区别-程序员宅基地

树是一个有n个有限数据元素的集合，其中有一个根节点，并且每个节点可以有多个子节点。树的深度与查找有关，可通过改进合并算法来减少树的深度，提高算法效率。

【信贷风控30分钟精通39】风控策略体系搭建2-程序员宅基地

文章浏览阅读938次，点赞23次，收藏21次。反欺诈策略是为防范恶意客户采取欺诈行为谋取利益而制订的策略，目的是通过对欺诈行为的识别，遏制欺诈风险，为金融机构止损。根据欺诈的不同维度，欺诈的分类目前，应对欺诈风险的有效措施包括反欺诈规则和反欺诈模型。

随便推点

看不见的“网” ,一文读懂阿里云基础设施网络_阿里云网络基线理解-程序员宅基地

文章浏览阅读553次。编者按：在这个万物智联的时代，无论是在线网络购物，还是网络强国、数字中国建设，都离不开一张“看不见的网”——基础设施网络。2009年，首届双11每秒交易订单创建峰值400；2021年，双11每秒交易订单创建峰值58.3万，12年交易数字量猛增的背后，是阿里云在庞大分布式系统上计算和IO能力的飞跃，更离不开阿里云基础设施底层网络技术的支撑。图｜阿里云全球基础设施网络系统作为阿里云基础设施的重要组成部分，阿里云基础设施网络团队负责整个阿里云全球基础设施网络，包括大规模高性能数据中心网络，全球数据中心互联_阿里云网络基线理解

TCP/UDP常见端口参考_怎么查看端口映射的是tcp还是udp-程序员宅基地

文章浏览阅读1.7k次。端口列表一览端口号码 / 层 名称 注释 1 tcpmux TCP 端口服务多路复用 5 rje 远程作业入口 7 echo Echo 服务 9 discard 用于连接测试的空服务 11 systat 用于列举连接了的端口的系统状态 13 daytime 给请求主机发送日期和时间 17 qotd 给连接了的主机发送每日格言 18 msp 消息发送协议 19 _怎么查看端口映射的是tcp还是udp

优化微信小程序音频播放，实现多音频同时播放，互不干扰。_微信小游戏 inneraudiocontext 数量限制-程序员宅基地

文章浏览阅读1.1w次。_微信小游戏 inneraudiocontext 数量限制

android JSBridge 漏洞挖掘_adnroid jsbridge 不安全的资源引用-程序员宅基地

文章浏览阅读825次。一、概述1. JSBridge介绍什么是JSBridge主要是给 JavaScript 提供调用 Native 功能的接口，让混合开发中的前端部分可以方便地使用 Native 的功能（例如：地址位置、摄像头）。而且 JSBridge 的功能不止调用 Native 功能这么简单宽泛。实际上，JSBridge 就像其名称中的Bridge的意义一样，是 Native 和非 Native 之间的桥梁，它的核心是构建 Native 和非 Native 间消息通信的通道，而且这个通信的通道是双向的。双向通信的通_adnroid jsbridge 不安全的资源引用

OpenCV+Mediapipe+UDP+Unity挥手电子书翻页_unity opencv 虚拟翻书-程序员宅基地

文章浏览阅读2k次，点赞13次，收藏43次。OpenCV+Mediapipe+UDP+Unity挥手翻页_unity opencv 虚拟翻书

【vue运行项目报错】vue前端项目，安装依赖报错，运行不成功解决方案_前端项目运行不了-程序员宅基地

文章浏览阅读861次。vue前端运行别人的项目_前端项目运行不了

推荐文章

热门文章

相关标签