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.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 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=英文

运行效果

中文

image

英文

image

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

---

以上就是本次学习到的知识，本文有些地方参考了他人的文章，如果本文有不对之处欢迎指出。
<a href="mailTo:106125829@qq.com">1061225829@qq.com</a>

原文地址