jQuery前端多语言拓展方案

2019独角兽企业重金招聘Python工程师标准>>>

0.基本思路

使用jQuery根据不同字典替换元素的原有文本，以达到多语言的效果。

首先，字典是一个json文件。

之后，通过ajax获取不同的字典，替换文本。

1.实现源码

;(function($){
    $.extend({
        langto: function(url){
            $.getJSON(url,function(data){
                $('.langto').each(function(){
                    var text = data[$(this).text()];
                    if (text != null){
                        $(this).text(text);
                    }
                });
            });
        }
    });
})(jQuery);

很简短的一个函数拓展，命名为langto，从函数实现可以看用到了langto的CSS类。

当获取字典成功时，查找字典中与langto类元素的文本一致时替换之。

 

2.应用场景

首先是提供字典的JSON文件，这个完全可以是静态文件，例如lang/zh-CN.json：

{
  "File": "文件",
  "Edit": "编辑"
}

以及lang/en-US.json:

{
  "File": "It's File",
  "Edit": "Edit it"
}

这样的文件根据语言可以多个，利用文件名区分。

HTML元素类似下面：

<ul>
  <li class="langto">File</li>
  <li class="langto">Edit</li>
</ul>

使用时调用langto来替换文本（需要先载入jQuery）：

$.langto('/lang/'+navigator.language+'.json');

最好确保在所有需要翻译的元素（例如通过Ajax加载的其他元素）都载入后再调用，不然后加载的不能被翻译。记住，langto是接收一个url的，所以你可以采用另外的对照关系来获得字典文件。比如获取html元素的lang属性值，然后更具lang的属性值得到字典的url也是可行的。

3.总结

其实很多后端框架早就实现了多语言功能，我这么做反而多了一个HTTP请求，不过少了后端的处理。

这里还有个问题，就是需要确保所有需要翻译的元素都加载完在调用langto。

最后说说我为什么写这么一个jQuery拓展。因为github.io的博客提供了一个静态服务器，不能用后端脚本。

转载于:https://my.oschina.net/chaosannals/blog/751317