基于 jQuery.i18n.properties 对老项目实现国际化

公司之前的项目都是以中文为主,随着业务的增长,现需要支持国际化,但是由于项目并没有使用三大框架,所以没有与之配套的成熟的解决方案,遂找到了一款轻量化的基于jQuery的国际化插件jQuery.i18n.properties

引用一段对jQuery.i18n.properties的介绍

jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化。
国际化英文单词为:Internationalization,又称i18n,“i”为单词的第一个字母,“18”为“i”和“n”之间单词的个数,而“n”代表这个单词的最后一个字母。jQuery.i18n.properties采用.properties文件对JavaScript进行国际化。jQuery.i18n.properties插件首先加载默认的资源文件(strings.properties),然后加载针对特定语言环境的资源文件(strings_zh.properties),这就保证了在未提供某种语言的翻译时,默认值始终有效。

首先先展示一下目录结构:
基于 jQuery.i18n.properties 对老项目实现国际化_第1张图片

1.下载所需要的文件

  • jQuery.i18n.properties.js
  • jQuery.js

2.准备 index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title class="i18n" name="title">title>
    
    <meta id="i18n_page" content="index">
    <meta name="viewport" content="width=device-width">
    <meta name="keywords" content="" />
    <meta name="description" content=""/>
head>
<body>
    <div>
      <label class="i18n" name="lang">label>
      <select id="language">
        <option value="zh_CN">简体中文option>
        <option value="en">Englishoption>
      select>
    div>
    <div>
      <div>
        <label class="i18n" name="name">label>
        <input type="text" id="input-name" class="i18n-attr" attrName="namePlaceholder" i18nAttr="placeholder">
      div>
      <div>
        <label class="i18n" name="age">label>
        <input type="text" id="input-age" class="i18n-attr" attrName="agePlaceholder" i18nAttr="placeholder">
      div>
    div>

    <script src="jquery-3.4.1.min.js">script>        
    
    <script src="jquery.i18n.properties.js">script>
    <script src="language.js">script>
body>
html>
<style>
  div {
    margin-top: 20px;
  }
  label {
    display: inline-block;
    width: 100px;
  }
  input {
    width: 200px;
  }
style>

3.准备 language.js

// 默认语言
let defaultLanguage = 'zh_CN'

const translate = () => {

  // 如果缓存中有语言类型则选用缓存中的语言
  defaultLanguage = localStorage.getItem('language') || defaultLanguage
  // 将默认的语言值进行选中
  $('#language option[value=' + defaultLanguage + ']').attr('selected', true);
  // 获取资源文件
  let sourceName = $('#i18n_page').attr('content');

  // 执行 i18n 翻译
  jQuery.i18n.properties({
    name : sourceName, // 资源文件名称
    path : defaultLanguage + '/', // 资源文件路径
    mode : 'map', // 用 Map 的方式使用资源文件中的值
    language : defaultLanguage,
    callback : function() { // 资源文件加载成功之后的回调
      // 替换页面文本
      let element = $('.i18n');
      element.each(function() {
        // 根据 i18n 元素的 name 获取内容写入
        $(this).html($.i18n.prop($(this).attr('name')));
      });
      // 替换元素的属性
      let attrElement = $(".i18n-attr");
      attrElement.each(function() {
        let i18nAttr = $(this).attr('i18nAttr');
        if (!i18nAttr) {
          i18nAttr = 'value';
        };
        $(this).attr(i18nAttr, $.i18n.prop($(this).attr('attrName')));
      });
    }
  });
}

$(function(){

  // 页面加载先执行一遍翻译
  translate()

  // 选择语言时触发的事件
  $("#language").on('change', function() {
    let language = $(this).children('option:selected').val()
    localStorage.setItem('language', language)
    translate()
  });

});

4.准备对应的语言文件

  • 中文(zh_CN)
    title=国际化
    lang=语言
    name=姓名
    age=年龄
    namePlaceholder=请输入姓名
    agePlaceholder=请输入年龄
    
  • 英语(en)
    title=i18n
    lang=language
    name=name
    age=age
    namePlaceholder=please enter your name
    agePlaceholder=please enter your age
    

准备完毕就可以开始运行了,但是在本地直接打开index.html是会报错的,这时候我们需要一个webServer容器(.properties文件需要通过webServer才能访问),选择ApacheNodeTomcatNginx都可以。这里我选择的是Tomcat,将整个文件夹放到webapps目录下,启动Tomcat即可访问。如果报Cannot read property 'length' of undefined的错,就要注意一下资源文件的路径是不是传错了(path参数)。

接下来来看一下效果图:

  • 中文
    基于 jQuery.i18n.properties 对老项目实现国际化_第2张图片

  • 英文
    基于 jQuery.i18n.properties 对老项目实现国际化_第3张图片

体验链接:http://39.107.83.60:9001/i18n/index.html

参考文章:https://blog.csdn.net/aixiaoyang168/article/details/49336709

你可能感兴趣的:(JavaScript,jQuery,js,jquery)