JS多语言设计方案

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

先看DEMO：JS多语言设计方案（带记忆效果）

于是第一次尝试，我写了一个语言包（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>

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还很差，正在努力学习中。分享一下自己实践的项目，大家一起进步。

Lin Says:
2009-11-10, 9:09 AM

缓存数组长度对提高效率很有效
http://blogs.sun.com/greimer/resource/loop-test.html

Kevin Says:
2009-11-10, 10:20 AM

确实，看了JS优化文章，建议用局部变量缓存对象属性和函数指针，在大数据量的循环中，的确可以提高不少效率！

双色球 Says:
2009-11-16, 2:07 AM

大数据量的循环中，的确可以提高不少效率！

双色球 Says:
2009-11-16, 2:08 AM

分享一下自己实践的项目，大家一起进步。

cp Says:
2009-11-17, 3:19 PM

测试飞信class类错误？

James Says:
2009-11-19, 4:39 PM

这种写法还是不过优雅，个人感觉，使用语言配置文件是OK，但是不要使用数字做为key，还是用英文缩写作为key，这样以后方便些，再者不建议使用标记class为langs然后使用DOM操作进行语言的变更，性能不高，可以借鉴tinyMCE的做法，在初始化的时候，初始化语言设置。
关于use case的思考：用户是否需要动态的变更语言设置？