用JavaScript+jquery手写一个简单的多语言

1. 新建一个language.js文件

  /* -----------------------------------------------------
    全局做语言替换
----------------------------------------------------- */

$(document).ready(function () {
  var chang = function () {
    var abc = zh
    var str = location.search || localStorage.getItem('lang')
    localStorage.setItem('lang', str)
    if (str.indexOf('lang=en') !== -1) {
      abc = en
    }
    let elements = $("[abc]")
    for (let i = 0; i < elements.length; i++) {
      let keys = $(elements[i]).attr('abc').split('.')
      let text = abc
      keys.map(i => {
        text = text[i]
      })
      $(elements[i]).text(text || '')
    }
  }()
  /* -----------------------------------------------------
     语言选择
----------------------------------------------------- */
  $('#langType').click(function () {
    if (this.innerHTML === '中文') {
      this.innerHTML = 'English'
      localStorage.setItem('lang', 'lang=zh')
      chang()
    } else {
      this.innerHTML = '中文'
      localStorage.setItem('lang', 'lang=en')
      chang()
    }
  })
})

获取所有拥有abc这个属性名的元素，然后将这个元素下面的内容全部替换成json中定义好的内容。

2. 新建语言的json文件，如下zhData.json,enData.json

zhData({
  "title": "你好，是我标题",
  "quick": "快速连接",
  "contactUs": "联系我们",
  "address": "浙江杭州",
  "daohang": {
    "Profile": "首页",
    "About": "关于我们"
  }
})

3. 在index.html页面中引入json文件和js文件

  <script>
    var zh, en
    function zhData (data) {
      zh = data
    }
    function enData (data) {
      en = data
    }
  </script>
  <script src="static/js/lang/zhData.json?cb=zhData"></script>
  <script src="static/js/lang/enData.json?cb=enData"></script>
  <script src="static/js/language.js"></script>

这里一定要在引用json文件之前，先定义zhData的方法，否者报错。

4. 在用到多语言的地址直接添加一个abc的属性，并设置成我们再json文件中定义的值就行。

<a class="nav-link js-scroll-trigge" href="about-us.html" abc="daohang.About"></a>