公司目前碰到一个项目,客户是美国CDC,因为考虑到中方与美方的合作机构,所以需要设计出多版本语言切换。要求前台实现。因为语言包不需要经常修改没必要入库操作,所以将语言包写在一个配置文件里面是最好的(自我感觉)。

先看DEMOJS多语言设计方案(带记忆效果)

于是第一次尝试,我写了一个语言包(JS文件):

message.en={ 
    "1": "Application Form for Project Activity", 
    "2": "Project Name:", 
    "3": "National Level:", 
    "4": "Provincial Level:", 
    "5": "Implementing Unit (NCAIDS division, provincial unit, or other):", 
    "6": "Project ID #:" 
} 
 
message.chs={ 
    "1": "项目活动申请表", 
    "2": "项目名称:", 
    "3": "国家级单位:", 
    "4": "省级单位:", 
    "5": "项目执行单位(注明性艾中心科室,省级单位,或其他):", 
    "6": "项目活动序号:" 
} 


然后给需要替换的语言包文字

<p class="LANGS">Form Submission Date:</p>
然后通过获取 具有class="LANGS"的对象,组成数组集合。
var oLangArea = document.getElementsByTagName("p");


然后循环遍历oLangArea数组,进行语言替换,刚开始觉得很不错。后来,由于疏忽漏掉一个元素,结果BUG就出来了。
因为这种方案是按oLangArea数组的自然顺序排序的,比如在2:National Level:的前面加入一个元素,这样2以后的顺序都需要更改,项目中有43个语言块,结果带来了大量的重复劳动力...于是最后放弃了这种做法。

第二种解决方案

顺利的解决了上面的问题,但是需要多添加一些HTML代码,语言包不变。
HTML代码如下:

<p class="LANGS" id="L7">Form Submission Date:</p>


 JS代码如下:

for(var i=0;i<=oLangArea.length;i++){ 
    j = (oLangArea[i].getAttribute("id")).substring(1); 
    oLangArea[i].innerHTML = eval('message.'+lang+'['+j+']'); 
} 


可以看出来这个可以适应以后的语言包顺序更改。只需要在相应位置加入HTML代码,然后在语言包中指定对应多语言。通过ID来绑定,效率方面应该比第一种方案要低一些,但是少量的语言包应该不会有多大的差别,且JS语言包已经载入,细微的效率差别,却换来了长期的可维护性。

以上是个人愚见,因为JS还很差,正在努力学习中。分享一下自己实践的项目,大家一起进步。