静态网站的中英文等多语言切换

       之前做过一个项目，项目要求中英文实现，如果是在动态网站中要实现起来已经很简单了，公司有现成的东西，但这个项目是纯静态的，所有没发用到以前的框架，所有我根据网上查阅的资料，自己做了一个用JS实现中英文翻译的功能。然后有另外一个项目也是这种情况，我就想有没有其他的更方便的方式，搜索了一下，发现我的方法还算不错的，贴出来分享分享。

        大致思路很简单，首先要有对应的中英文资源文件，我这里的资源文件用的是XML格式。

<?xml version="1.0" encoding="utf-8" ?>
<Doc>
<Public>
<Back>Back</Back>
<Submit>Submit</Submit>
<Config>Configuration</Config>
<netconfig>Network Parameter</netconfig>
<update>Upgrade/Configuration</update>
<ioparameter>I/O Parameter</ioparameter>
<IOData>I/O Data</IOData>
<SerialDevice>Serial Device</SerialDevice>

<?xml version="1.0" encoding="utf-8" ?>
<Doc>
<Public>
<Back>返回</Back>
<Submit>确定</Submit>
<Config>配置</Config>
<netconfig>网络参数</netconfig>
<update>升级/配置</update>
<ioparameter>I/O参数</ioparameter>
<IOData>I/O数据</IOData>
<IntelligentDevice>智能设备</IntelligentDevice>
<SerialDevice>串口设备</SerialDevice>

在每个页面中的每个需要中英文切换的标签元素中加入id。
<th id="ChnnlNO">通道号</th>
<th data-priority="2" id="OriginalValue">原始值</th>
<th data-priority="1" id="ConvertedValue">换算值</th>
<th data-priority="3" id="ChnnlType">通道类型</th>
<th data-priority="4" id="ChnnlName">通道名称</th>
<th data-priority="5" id="ReferRange">参考范围</th>
然后在页面的初始化中加入对应的翻译的js

$(function () {
var langpath = "../" + dir + lang + ".xml";//资源文件路径
TranslateElementsAsy(document, 'SPAN', 'innerHTML', langpath);
TranslateElementsAsy(document, 'INPUT', 'value', langpath);
TranslateElementsAsy(document, 'th', 'innerHTML', langpath);
});
TranslateElementsAsy() 有两种实现方式：一种是直接通过ajax查找获得资源文件，下载到本地之后查找其中对应的元素，获得id对应的值，缺点：每执行一次方法就下载一次资源文件。

两外一种，基本思路也是这样，用到了一点闭包，优点是在每个页面只下载一次xml资源文件。

function TranslateElementsAsy(targetDocument, tag, propertyToSet, path) { //方法一
$.ajax({
url: path,
type: 'get',
async: false,
success: function (data) {
var e = targetDocument.getElementsByTagName(tag);
for (var i = 0 ; i < e.length ; i++) {
var sKey
sKey = e[i].getAttribute('id');
if (sKey) {
var s = getString(path, sKey, data);
if (s) {
eval('e[i].' + propertyToSet + ' = s');
}
}
}
}
});
}
function TranslateElementsAsy(targetDocument, tag, propertyToSet, path) { //方法二
var e = targetDocument.getElementsByTagName(tag);
for (var i = 0 ; i < e.length ; i++) {
var sKey
sKey = e[i].getAttribute('id');
if (sKey) {
var s = getString(path, sKey, CachedLangugeXMlFile.attachSearchCache(false, path));
if (s) {
eval('e[i].' + propertyToSet + ' = s');
}
}
}
}
function getString(path, req_name, xmlDoc) {
//解析XML
//var oError = xmlDoc.parseError;
var nodeName = xmlDoc.getElementsByTagName(req_name);
if (nodeName[0] == null || nodeName[0] == "undefined") {
return null;
} else {
return nodeName[0].childNodes[0].nodeValue;
}
}

var CachedLangugeXMlFile = function () { //采用闭包，获取资源文件内容，并缓存，下次再执行就不用下载
var cache = null;
return {
attachSearchCache: function (asy, path) {
if (cache != null) {
return cache;
}
$.ajax({
url: path,
type: 'get',
async: asy,
success: function (data) {
cache = data;
}
});
return cache;
},
clearSearchCache: function () {

}
}
}();

自己亲测可用，，另外每个页面的都采用哪种语言这个是小问题，自己想办法去获得当前的语言类型，然后选择资源文件吧，，可用通过get传参的方式，也可以通过保存在cookie，然后读取的方式。