so easy 前端实现多语言

原创 youhun 教程 前端 281阅读 2018-05-17 16:40:13 举报

​ 每个公司业务不一样,此解决方案仅做参考 。

Git demo地址

前言

其实现在开发者解决多语言普遍三种解决方案:

第一个是为每个页面提供每种语言的相关页面。
第二种是把内容从表现形式中分离出来,做不同语言的内容文件。
第三种是动态翻译页面内容。第三种很少见,而且机器翻译技术还很难达到人们的预期。

其实第二种相对来说简单一点,那么开搞。

实现

思考

  • 翻译公司给的有的excel有的是json文件,咱们就统一请求json文件吧;
  • html中给标签加个lang属性,到时候页面加载时遍历所有这些有lang属性的标签去实现切换语言;
  • js里的文字用方法实现转换语言;
  • 把用户选择的语言存到cookie里吧,嗯!拿个小本本记下来;
  • 做个缓存,请求过的语言文件就不再请求了;
  • 暂时就这些吧...

demo

文件目录

index.html

script.js

之前弄demo的时候,registerWords函数这里没有判断
但是我们的项目自己封装的路由去动态加载页面。每次进来都会重新赋值,这会导致问题。

因为他赋值的是当前元素的值,这个时候你lang的值就和语言包文件里的key对应不上了

使用方法

html中语言切换:给所有标签加上lang属性
js中语言切换:使用__tr()方法

可以直接把script.js作为一个插件使用放到项目中

总结

条条大路通罗马,根据自己的实际需求与业务场景去做即可。

有点仓促,有不足的还请各位小哥哥小姐姐指点。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复