对于中英文页面的解决方案（IE8）

看了vue的数据双向绑定原理后对于其中的’指令的解析’有很深的印象，觉得可以运用到实际项目中，对目前的公司中的中英文页面进行改进（兼容IE8）；github (求★)中英文页面历史版本优缺点分析1.最开始的时候中英文分别是用两个html去写；优点：由于对同一个词的中文和英文描述长度不一样，可以分别在两个html中分别定义各自的class去控制样式缺点：文字描述嵌入在html中，不利用统一管理修改代码繁琐，改一个问题的时候可能需要修改两次增大了服务器中的文件体积2.改进后利用jq同一动态渲染；(这边主要是通过将需要渲染文字的元素定义好id，通过jq的选择器进行统一渲染)优点：将两个文件合并成同一个文件，减小了服务器中的文件体积由于合并为了一个文件，对于代码的修复，只需要改一次就好剥离出html中的文字描述，统一管理，利用js动态渲染缺点：合并为同一个文件后样式会以英文描述的为主 例如：这里很明显能看出中文的页面是按照英文的样式来渲染的，这样看起来不太舒服；所有文字都是一次性渲染，有些隐藏元素的文字也会进行渲染，影响首屏渲染速度新版中英文页面的改进在改进版本的基础上，不通过jq的选择器进行渲染，而是在每个需要渲染文字的元素上添加自定义属性，也就是我们的指令:inf-text=‘xxx’，再通过类似vue的方式进行初始化流程：将每个dom元素提取出来->解析指令->再去数据中查找文字->进行文字渲染->删除自定义属性->最后再将dom元素一个个重新渲染到页面上；（参考vue源码的指令解析即可，我这边为了满足项目需求，移植的时候简化了不少，而且兼容了IE8）inf-class=‘xxx’指令来控制我们的样式inf-value=‘xxx’来控制value属性的中英文inf-title=‘xxx’来控制title属性的中英文inf-alt=‘xxx’ 来控制alt属性的中英文源码就不去解析了（有兴趣可以看看github上的代码，有注释，而且代码也是比较简单），直接贴使用代码： <div id=“app”> <div class=“UnitDiv”> <label inf-class=“labelClass” inf-text=“languageData.lab.a”></label> <input inf-class=“inputClass” type=“text” inf-value=“inputClass”> </div> <div class=“UnitDiv”> <label inf-class=“labelClass” inf-text=“languageData.lab.b”></label> <input inf-class=“inputClass” type=“text” inf-value=“inputClass”> </div> <div class=“UnitDiv”> <label inf-class=“labelClass” inf-text=“languageData.lab.c”></label> <input inf-class=“inputClass” type=“text” inf-value=“inputClass”> </div> <div class=“UnitDiv”> <label inf-class=“labelClass” inf-text=“languageData.lab.d”></label> <input inf-class=“inputClass” type=“text” inf-value=“inputClass”> </div> <div class=“UnitDiv”> <label inf-class=“labelClass” inf-text=“languageData.lab.e”></label> <input inf-class=“inputClass” type=“text” inf-value=“inputClass”> </div> <div class=“UnitDiv”> <label inf-class=“labelClass” inf-text=“languageData.lab.f”></label> <input inf-class=“inputClass” type=“text” inf-value=“inputClass”> </div> </div> <div id=“app2”> <select> <option value=“0” inf-text=‘languageData.sel.g’></option> <option value=“1” inf-text=‘languageData.sel.h’></option> </select> </div> var lan=0; var languageObj=getLanguage(‘module1’,lan); new languageRender({ el: [‘app’,‘app2’], data: { languageData: languageObj, labelClass:[’label_en’,’label_cn’][lan], inputClass:[‘input_en’,‘input_cn’][lan] } })ps:里面的languageData.lab.a，languageData.lab.b…这种a,b,c…命名方式只是为了方便演示，真正用的时候肯定不能这样命名lan为0代表英文，1代表中文，这里根据具体自己的业务需求进行修改getLanguage为获取文字描述的函数，第一个参数名为模块名，第二个参数为语言选择languageRender为具体的构造器函数el:代表的是需要渲染的dom的包裹元素id，只所以我这里是用数组去表示，因为并不是页面的所有dom都需要文字渲染，而且渲染的原理是对于dom元素二次渲染，为了减少不必要的开销，用数组去传入需要渲染的dom的包裹元素id即可，如果只有一个包裹元素内的dom需要渲染可以直接填id名,即el:‘app’data为的数据容器对象，languageData为语言文字对象，其余的根据自己的需求进行填写，这里我们也只是需要动态控制class即可；优点：这样我们就做到了中英文和样式的动态渲染这里我还另外增加了一个beforeRender的hook函数，可以更好的实现页面文字的定制修改例如： new languageRender({ … beforeRender:function(){ this.data.languageData.lab.a=[‘BLC’,‘白平衡’][lan] } })如果整个页面需要渲染文字的dom元素太多，而且有些dom的最开始是隐藏的（弹框），我们可以进行懒加载加快首屏渲染速度，等首屏渲染好了后，再new languageRender函数继续渲染即可（当然这个dom是和已经渲染的dom没有包含与被包含的关系）后续改进思路将数据绑定结合起来，这里目前只用到了指向解析，所以在进行中英文切换的时候需要重新进入页面初始化；如果将数据绑定结合起来后，只需要手动控制数据即可立即渲染页面，不用再重新进入。