jQuery前端多语言拓展方案

原创
2016/09/25 12:00
阅读数 1.2K

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的博客提供了一个静态服务器,不能用后端脚本。

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部