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

       之前做过一个项目，项目要求中英文实现，如果是在动态网站中要实现起来已经很简单了，公司有现成的东西，但这个项目是纯静态的，所有没发用到以前的框架，所有我根据网上查阅的资料，自己做了一个用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，然后读取的方式。