Translater.JS 巧用 HTML 注释翻译页面，是不是很酷？

[jaywcjlove]

translater.js

这是一个利用 HTML 注释的页面翻译解决方案。对于少量的静态页面，这种解决方案显得更简单。它没有依赖，压缩只有只有(~2kb)。

Translater.js 官网

• 支持 IMG 文本 切换
• 支持 URL 加载语言
• 支持本地缓存选择

作为模块安装

$ npm install translater.js

传统使用方法

<div>
    这里是中文
    <!--{jp}ここは日本語です-->
    <!--{en}Here is English-->
</div>
<script src="../dist/translater.min.js" type="text/javascript"></script>
<script type="text/javascript">
var tran = new Translater({
    lang:"jp"
});
</script>

切换语言方法通过超链接

<a href="javascript:tran.setLang('default');">English</a>
<a href="javascript:tran.setLang('jp');">日本語</a>
<a href="javascript:tran.setLang('cn');">中文</a> 

可以通过 URL 穿参数设置语言

http://127.0.0.1:9005/test/test.html?lang=jp

文本翻译添加

<div>
    这里是中文
    <!--{jp}ここは日本語です-->
    <!--{en}Here is English-->
</div>

图片切换

<img alt="images" src="../img/imgae.jpg" data-lang-cn="../img/imgae_cn.jpg" data-lang-jp="../img/imgae_jp.jpg" />

[jaywcjlove]

@murmur 嗯，我只是实现了我的一个想法。只是在工作中，用到翻译，只是简单的解决翻译问题，不是为了替换常规的翻译 方法，你想多了。😄

[domty]

这东西的思路感觉就和响应式布局似得。
先把所有数据都下载下来，再按具体情况选择显示哪部分。

问题就是有可能把用户并不需要的代码等也下载了，会占用更多的带宽和流量。

[exoticknight]

写过类似的，不过语言表加载的是 json ，可以结合异步来加载再翻译。
无依赖，同样适合小项目。
github ： https://github.com/exoticknight/i18n.js

[jaywcjlove]

@exoticknight 木有文档 :-O

[jaywcjlove]

@domty 是滴。存在总会是有理由的。

[exoticknight]

@jaywcjlove 的确。因为觉得就是个自己用的小工具……我还是修改一下再加文档吧……

[pine]

总觉得有点不妥，觉得这种还是放在后端比较合适，如果是一段文字，也是用 xhr 请求，如果实在极小的地方就用标签切换不就好了 为什么用注释呢，注释还是仅仅与代码相关而与内容无关的吧。。

[jaywcjlove]

@pine 也没有什么不妥，总有用得着的地方。比如： http://jaywcjlove.github.io/hotkeys/ 放到 Github 用起来很方便咯😄 。