JavaScriptCatalog使用方法及示例

发布时间：2024-01-20 12:25:05

JavaScriptCatalog 是一个用于国际化和本地化 JavaScript 应用程序的库。它提供了一组工具和函数，用于管理和加载多语言字符串的目录。

JavaScriptCatalog 的使用方法如下：

1. 引入 JavaScriptCatalog 库：

   <script src="js/js-catalog.js"></script>

2. 初始化语言目录：

   var catalog = new JavaScriptCatalog('en'); // 指定默认语言
   catalog.loadCatalog('js/i18n', {
     fallback: 'en', // 指定默认的后备语言
     cacheEnabled: true // 是否启用缓存
   }).then(function() {
     // 语言目录加载完成后，可以开始使用
   });

3. 使用翻译函数：

   var gettext = catalog.gettext;
   
   var translatedString = gettext('Hello, World!');
   console.log(translatedString);

输出结果将会是已翻译的字符串，例如 "你好，世界！"。

4. 使用带变量的翻译函数：

   var sprintf = catalog.sprintf;
   
   var name = 'John';
   var translatedString = sprintf('Hello, %s!', name);
   console.log(translatedString);

输出结果将会是已翻译的字符串，例如 "你好，John！"。

5. 设置当前语言：

   catalog.setLanguage('zh-CN');

这将会改变当前的语言为中文简体。

6. 动态更新语言目录：

   catalog.loadCatalog('js/i18n', {
     fallback: 'en',
     cacheEnabled: true,
     update: true // 设置为true以启用动态更新
   });

这将会定期异步加载和更新语言目录，以保持与服务器上的最新版本同步。

下面是一个完整的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScriptCatalog 示例</title>
  <script src="js/js-catalog.js"></script>
</head>
<body>
  <button onclick="changeLanguage('en')">English</button>
  <button onclick="changeLanguage('zh-CN')">中文</button>
  <p id="translated-string"></p>

  <script>
    var catalog = new JavaScriptCatalog('en');
    catalog.loadCatalog('js/i18n', {
      fallback: 'en',
      cacheEnabled: true
    }).then(startApp);

    function startApp() {
      updateUI();

      function changeLanguage(language) {
        catalog.setLanguage(language);
        updateUI();
      }

      function updateUI() {
        var gettext = catalog.gettext;

        var translatedString = gettext('Hello, World!');
        document.getElementById('translated-string').textContent = translatedString;
      }
    }
  </script>
</body>
</html>

这个示例展示了如何在一个简单的 HTML 页面中使用 JavaScriptCatalog 实现多语言支持。用户可以通过点击按钮来切换语言，并且页面上的翻译文本会实时更新。