jquery.i18n.properties的使用讲解与实例

这篇文章发表于 2021年11月05日,星期五,13:48
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,即.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指定浏览器是否缓存资源文件,默认falseboolean
encoding指定加载资源文件时的编码格式,默认utf-8string
debug控制台是否记录记录logboolean
async指定调用callback(回调)函数的方式,false: 所有的资源文件加载请求发送完毕后就调用回调函数, true:所有的资源加载并解析完成后才调用回调函数。默认falseboolean
namespace指定资源文件的keys被存放在namespace下,即$.i18n.properties[namespace][key], 使用namespace可以最大限度的减少冲突和重写的概率; 默认为null不使用namespacestring
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 onclick="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=英文
运行效果
中文

英文

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


以上就是本次学习到的知识,本文有些地方参考了他人的文章,如果本文有不对之处欢迎指出。如果这篇文章对你有帮助,欢迎点赞👍。