такой простой интерфейс для достижения многоязычности

внешний интерфейс JavaScript Excel

Бизнес каждой компании отличается, это решение только для справки.

Демонстрационный адрес Git

предисловие

На самом деле, у разработчиков есть три распространенных решения для решения многоязычности:

Во-первых, предоставить каждой странице соответствующие страницы на каждом языке. Второй — отделить контент от формы представления и сделать файлы контента на разных языках. В-третьих, динамически переводить содержимое страницы. Третий встречается редко, и технология машинного перевода изо всех сил пытается оправдать ожидания.

На самом деле, второй вид относительно прост, так что начинайте с него.

выполнить

думать

  • Некоторые файлы excel и некоторые файлы json предоставляются переводческой компанией, давайте единообразно запрашивать файлы json;
  • добавить тег в htmllangсвойства, когда страница загружается, она проходит через все этиlangтег атрибута для переключения языков;
  • Текст в js использует метод для преобразования языка;
  • Сохраните язык, выбранный пользователем, в файле cookie, а! Возьмите небольшой блокнот и запишите его;
  • Сделайте кеш, и запрашиваемый языковой файл больше не будет запрашиваться;
  • Это пока все...

demo

Каталог файлов

index.html

<!DOCTYPE html>
<html>
<meta charset="utf-8">  
<title>translation test</title>  
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="js/script.js"></script>  
<script src="js/index.js"></script>  
</head>  
  
<body>  
    <div>  
        <a href="#" id="enBtn">English</a>  
        <a href="#" id="zhBtn">简体中文</a>  
    </div>  
    <div><a lang>click here:</a></div>  
    <div><input type="button" value="apply" lang id="applyBtn"></div> 
</body>  
  
</html>

script.js

var dict = {};

$(function () {
  registerWords();
  if(getCookieVal("lang")=="en"){
    setLanguage("en");
  }else if(getCookieVal("lang")=="zh"){
    setLanguage("zh");
  }else{
    setLanguage("en");
  }
  
// 切换语言事件 根据自己业务而定
  $("#enBtn").bind("click", function () {
    setLanguage("en");
    //这里也可以写一些其他操作，比如加载语言对应的css
  });

  $("#zhBtn").bind("click", function () {
    setLanguage("zh");
  });

});

function setLanguage(lang) {
  setCookie("lang=" + lang + "; path=/;");
  translate(lang);
}

function getCookieVal(name) {
  var items = document.cookie.split(";");
  for (var i in items) {
    var cookie = $.trim(items[i]);
    var eqIdx = cookie.indexOf("=");
    var key = cookie.substring(0, eqIdx);
    if (name == $.trim(key)) {
      return $.trim(cookie.substring(eqIdx + 1));
    }
  }
  return null;
}

function setCookie(cookie) {
  var Days = 30; //此 cookie 将被保存 30 天
  var exp = new Date(); //new Date("December 31, 9998");
  exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
  document.cookie = cookie+ ";expires=" + exp.toGMTString();
}

function translate(lang) {
  if(sessionStorage.getItem(lang + "Data") != null){
    dict = JSON.parse(sessionStorage.getItem(lang + "Data"));
  }else{
    loadDict();
  }

  $("[lang]").each(function () {
    switch (this.tagName.toLowerCase()) {
      case "input":
        $(this).val(__tr($(this).attr("lang")));
        break;
      default:
        $(this).text(__tr($(this).attr("lang")));
    }
  });
}

function __tr(src) {
  return (dict[src] || src);
}

function loadDict() {
  var lang = (getCookieVal("lang") || "en");
  $.ajax({
    async: false,
    type: "GET",
    url: "/lang/"+lang + ".json",
    success: function (msg) {
      dict = msg;
      sessionStorage.setItem(lang + 'Data', JSON.stringify(dict));
    }
  });

}

// 遍历所有lang属性的标签赋值
function registerWords() {
  $("[lang]").each(function () {
    switch (this.tagName.toLowerCase()) {
      case "input":
        if($(this).attr("lang")==""){
          $(this).attr("lang", $(this).val());
        }
        break;
      default:
        if($(this).attr("lang")==""){
          $(this).attr("lang", $(this).text());
        }
    }
  });
}

Когда я получил демо раньше,registerWordsФункция здесь не оценивается Но наш проект сам инкапсулирует маршрут для динамической загрузки страницы. Он переназначается каждый раз, когда приходит, что вызывает проблемы.

Поскольку он присваивает значение текущему элементу, на этот раз выlangЗначение такое же, как в файле языкового пакетаkeyне может соответствовать

инструкции

Переключение языков в html: добавить во все тегиlangАтрибуты Переключение языка в js: используйте__tr()метод

можно напрямую поставитьscript.jsИспользуйте его как плагин и вставьте в проект

Суммировать

Все дороги ведут в Рим, просто делайте это в соответствии с вашими реальными потребностями и бизнес-сценариями.

Немного поспешил, подскажите, если есть недостатки.

Категории