新手学写多语言（国际化）

前言

这个系列主要是记录一下最近研究的多语言配置，主要供新手学习使用，大牛可以不用看了

目录

• JQuery实现
• 简单的Vue实现 没有切换语言功能

JQuery实现

懒得看的同学可以直接 点这里

基本思路

• 布局时就给需要多语言的标签加个属性
• 通过同步的ajax引入语言包
• 判断用户语言类型
• 循环遍历DOM,修改innerHTML

布局准备

    <h2 data-lang data-lang-id="title">simple Translation</h2>
复制代码

引入语言包

function loadDict() {
    $.ajax({
        type: "get",
        url: "./language.json",
        dataType: "json",
        async: false, //同步加载文件
        success: function(response) {
            window.langData = response //挂载到全局对象下
        }
    });

}
复制代码

简单的语言包模板

[{
        "ID": "title",
        "Chinese": "simple Translation",
        "English": "simple Translation"
    },
    {
        "ID": "content",
        "Chinese": "这是一个简单的页面翻译工具，或者叫国际化工具。主要功能就是为网站提供多语言支持",
        "English": "This is exmple page for simple Translation which a simple tools to translate your web Page"
    },
    {
        "ID": "li1",
        "Chinese": "使用简单",
        "English": "easy to use and learn"
    }]
复制代码

判断用户语言类型

//传入langCode，实现用户可以自己切换语言
function getUserLanguage(langCode) {
    var lang = navigator.language || navigator.userLanguage;
    var result = langCode ? langCode : lang.toLocaleLowerCase().substr(0, 2);
    //这里可以根据你的语言包自己自定义
    var obj = {
        "zh": "Chinese",
        "en": "English",
        "de": "Germany",
        "ru": "Russia",
        "fr": "France",
        "ko": "Korea",
        "pt": "Portague",
        "ja": "Japanese",
        "es": "Spanish",
        "it": "Italy"
    }

    return !obj[result] ? "Chinese" : obj[result]
}
复制代码

循环遍历DOM

function translate(langCode) {
    var lang = getUserLanguage(langCode),
        dict = window.langData,
        len = window.langData.length
    $('[data-lang]').each(function() {
        var id = $(this).attr('data-lang-id'),
            tag = this.tagName.toLowerCase()
        for (var i = 0; i < len; i++) {
            console.log(dict[i][lang])
            if (dict[i]['ID'] == id) {
                if (dict[i][lang] == null) { break }
                if (tag == 'input') { $(this).val(dict[i][lang]); break; }
                $(this).html(dict[i][lang])
            }
        }
    });
}
复制代码

这里应该都能看懂，唯一容易出问题的地方就是同步加载语言那里，我使用了JQuery 1.8.3,是支持同步的，如果不支持，你可以把改成原生ajax或者干脆改成一个js文件

Vue的简单实现

由于目前需要的功能还没有切换语言，所以写了一个一次性改变语言的功能

基本思路

• 准备语言包JS
• 在main.js里引入，判断语言，同时挂载到Vue对象下
• 在各个组件中直接调取

准备语言包

还是不喜欢用json格式，因为ajax请求总是异步的，不好控制 我用了这个模板

 const lang={
  //中文简体
  zhj:{
    tabBar:{//底栏
      a:"获得粉丝",
      b:"获得点赞",
      c:"购买VIP",
      d:"更多"
    }
   }
  }
  export default lang
复制代码

引入并加载

引入很简单import lang from './assets/js/lang' 然后，我把它挂载到了根Vue对象中

new Vue({
  el: '#app',
  router,
  components: { App },
  render:h => h(App),
  created() {
    // 载入多语言
    this._intiLang()
  },
  data(){
    return{
      lang:{}
    }
  },
  methods: {
    getUserLang(){ //获取用户语言
      var lang = navigator.language||navigator.userLanguage;
      var result=lang.toLocaleLowerCase().substr(0,2);
      if(result=='zh'){
          if(lang.toLocaleLowerCase()=='zh-cn'){//中文简体
              result="zhj"
          }else{
              result="zhf" //中文繁体
          }
      }
      return result
    },
    _intiLang(){
      let langName=this.getUserLang()
      let data = lang[langName] ?  lang.en : lang[langName]
      this.lang=data
    },
    changeLang(type){ //提取多语言的内容
      return !this.lang[type]?'lang':this.lang[type]
    }
  },
})

复制代码

子组件中调用

<template>
    <p>tabBarName.a</p>
    <p>tabBarName.b</p>
    <p>tabBarName.c</p>
    <p>tabBarName.d</p>
</template>
<script>
export default {
  name: 'Gfooter',
  data () {
    return {
      tabBarName:this.$root.changeLang('tabBar')
     }
    }
  }
 </script>
复制代码

这样就实现了一个简单的多语言，在子组件中只要通过this.$root.changeLang()这个函数来取值就行了。当然这个方法还有很多不足，适用面也很窄。下一步准备去研究i18n,如果抽得出时间，我打算自己写一个vue插件

转载于:https://juejin.im/post/5c626a946fb9a04a027ad4e4