文章目录
  1. 1. Defined
  2. 2. Main()
    1. 2.1. 缺陷
    2. 2.2. 主要思路
    3. 2.3. 目录树
    4. 2.4. 关键代码
  3. 3. EOF
  4. 4. Update-07/12/2016

Defined

项目中有个小要求, 面向的用户主要是英语和西班牙语.
也没有搞过, 本来还以为需要写多页面= =

Main()

缺陷

只能实现固定的文字替换, 动态替换这个功能如果有需求则后续更新~

主要思路

利用html5自定义标签 + ajax + json字典传输回调进行实时无刷新替换语言,
所以主要难点就是数据模式设置和json处理了

目录树

1
2
3
4
5
6
-langs
|-en_US.json
|-es_ES.json
|-zh_CN.json
-js
|-main.js

关键代码

  1. HTML with data-* DIY tags

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!-- 语言切换选项 -->
    <ul class="dropdown-menu" role="menu">
    <li><a data-lang="chinese" href="#">[中文]Chinese</a></li>
    <li><a data-lang="english" href="#">[English]English</a></li>
    <li><a data-lang="spanish" href="#">[Español]Spanish</a></li>
    </ul>
    <!-- 显示内容 -->
    <div id="search">
    <h2 data-locale="title">Watch Search</h2>
    <div class="form-group">
    <label data-locale="label">Option: </label>
    <select class="form-control">
    <option data-opt="username" selected="selected" data-locale="op-1">Username</option>
    <option data-opt="imei" data-locale="op-2">Watch IMEI</option>
    <option data-opt="phone_number" data-locale="op-3">Phone number</option>
    </select>
    </div>
    </div>
  2. JavaScript伪代码(with jQuery)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//	变量设置
var xxx = $('xxx'),
/* codes */
yyy = $('yyy');
// 语言设置的主要代码
function langSet(lang) {
var dataSearch = data['tab-search'];
$(tabSearch).find('h2').html(dataSearch['title']);
$(tabSearch).find('label').text(dataSearch['label'] + ': ');
$(tabSearch).find('option').each(function (index, ele) {
$(ele).text(dataSearch['section']['op-' + index]);
});
}

(function lanToggle() {
// click事件绑定, 用于语言切换
$('.dropdown-menu').each(function (index, element) {
$(element).find('a').bind('click', function () {
var lang = $(this).attr('data-lang');
langCha(lang);
//当前语言文字更换,例如显示当前语言: Language(English)
langSet(lang); //渲染
});
});
})();

3.en_US.json

1
2
3
4
5
6
7
8
9
10
11
12
{
"tab-search": {
"description": "json格式和命名, 比如这个是en_US.json, 其他的则是zh_CN.json .etc",
"title": "Watch Search",
"label": "Option",
"section": {
"op-0": "Username",
"op-1": "Watch IMEI",
"op-2": "Phone number"
}
}
}

EOF

本来想直接用jQuery的插件的, 然而用了半天发现这个有点问题, 从segment falut中找了一下方法, 就直接写了, 讲道理构造json和data-* 还是很花时间的.
贴个自己的项目地址https://github.com/a1exlism/kidee, 欢迎fork~

Update-07/12/2016

最近在学ES6, 看到一个Template String 也能实现i18n => https://gist.github.com/DenisIzmaylov/dbd7e85f384016e3e07a](https://gist.github.com/DenisIzmaylov/dbd7e85f384016e3e07a)
这个translate思路可以的~

文章目录
  1. 1. Defined
  2. 2. Main()
    1. 2.1. 缺陷
    2. 2.2. 主要思路
    3. 2.3. 目录树
    4. 2.4. 关键代码
  3. 3. EOF
  4. 4. Update-07/12/2016