详解使用jquery.i18n.properties 实现web前端国际化

简介

Web应用程序的国际化是现代Web设计中常见的任务之一。可访问性和用户体验绝不应该受到语言障碍的限制。 jquery.i18n.properties 是一个易于使用，灵活且完全客户端实现的Web前端国际化解决方案。它基于 jQuery 并支持使用语言包文件，在不同的语言和区域中切换。

如何使用

步骤一：引入jQuery和jquery.i18n.properties

在实现国际化之前，请确保在头部引入 jQuery 和 jquery.i18n.properties 两个 JavaScript 文件。可以通过 CDN 访问以下 JavaScript 文件，也可以从GitHub的jquery.i18n.properties库下载javascript文件。

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-40oAfNp3d9zO/Vix3qbJGYw8mZFONJTEFXJYqazoXsKhz/6+fFQpb/KPiOaXrJy3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/jquery.i18n/1.1.1/jquery.i18n.min.js"></script>

步骤二：编写语言文件

新建一个属性文件，命名为“message.properties”。在该文件中添加键值对，用于在 Web 应用程序中显示字符串。其中，属性键是要显示的文本的唯一ID，属性值是对应的文本字符串，如下所示。

在英文语种下的message.properties文件，如下所示：

title=jQuery.i18n.properties 示例
greeting=欢迎使用 jquery.i18n.properties!

在中文语种下的message.properties文件，如下所示：

title=jQuery.i18n.properties Example
greeting=Welcome to the jQuery.i18n.properties example!

步骤三：初始化 jquery.i18n.properties

使用以下代码初始化 jquery.i18n.properties。在该代码中，sample 包含了所有的配置信息，包括默认语言和语言文件存放位置。

var sample = {};
sample.current_lang = 'zh'; // 将 app 设置为默认语言
// 定义 language 文件的路径
sample.properties_file_path = '/i18n/resources/sample/sample'; 
// 初始化 jquery.i18n.properties
$.i18n.properties({
    name: sample.properties_file_path,
    path: sample.properties_file_path,
    mode: 'both',
    language: sample.current_lang
});

其中，name 表示定义 properties 文件的名称，例如 sample。path 设置 properties 文件的路径， mode 设置全局模式为改写， language 设置当前使用的语言。

步骤四：在 HTML 中使用

在 HTML 中使用将在 Multilingual 浏览器上显示的文本字符串时，使用编写的键值，如下所示：

<div>
    <h2 id="title"></h2>
    <p id="greet"></p>
</div>

在 JavaScript 中使用 Properties 键来渲染键值，如下所示：

$('#title').text($.i18n.prop('title')); 
$('#greet').text($.i18n.prop('greeting'));

示例一

下面是一个简单的示例，演示如何在Web前端应用程序中切换语言。

• HTML文件

<div class="jumbotron">
  <h1 id="title"></h1>
  <p id="info"></p>
  <p id="greet"></p>
  <hr>
  <button class="btn btn-primary" id="switch-language">切换语言</button>
</div>

• JavaScript文件

var app = {};
app.current_lang = 'cn';
app.properties_file_path = '/i18n/resources/sample/message';
$.i18n.properties({
    name: app.properties_file_path,
    path: app.properties_file_path,
    mode: 'both',
    language: app.current_lang //默认语言
});

$('#title').text($.i18n.prop('title'));
$('#info').text($.i18n.prop('info'));
$('#greet').text($.i18n.prop('greeting'));

$('#switch-language').on('click', function() {
    if (app.current_lang === 'cn') {
        app.current_lang = 'en';
    } else {
        app.current_lang = 'cn';
    }
    $.i18n.properties({
        name: app.properties_file_path,
        path: app.properties_file_path,
        mode: 'both',
        language: app.current_lang
    }, function() {
        $('#title').text($.i18n.prop('title'));
        $('#info').text($.i18n.prop('info'));
        $('#greet').text($.i18n.prop('greeting'));
    });
});

示例二

以下示例演示如何使用多个 properties 文件。

• HTML文件

<div class="jumbotron">
  <h1 id="title"></h1>
  <p id="info"></p>
  <p id="greet"></p>
  <hr>
  <button class="btn btn-primary" id="switch-language">切换语言</button>
</div>

• JavaScript文件

var app = {};
app.current_lang = 'cn';
app.properties_file_path = '/i18n/resources/sample/';
$.i18n.properties({
    name:'message', 
    path: app.properties_file_path,
    mode: 'both',
    language: app.current_lang //默认语言
});

$('#title').text($.i18n.prop('title'));
$('#info').text($.i18n.prop('info'));
$('#greet').text($.i18n.prop('greeting'));

$('#switch-language').on('click', function() {
    if (app.current_lang === 'cn') {
        app.current_lang = 'en';
    } else {
        app.current_lang = 'cn';
    }
    $.i18n.properties({
        name:'message', 
        path: app.properties_file_path,
        mode: 'both',
        language: app.current_lang
    }, function() {
        $('#title').text($.i18n.prop('title'));
        $('#info').text($.i18n.prop('info'));
        $('#greet').text($.i18n.prop('greeting'));
    });
});