共计 2920 个字符，预计需要花费 8 分钟才能阅读完成。
看了 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 没有包含与被包含的关系）
后续改进思路
将数据绑定结合起来，这里目前只用到了指向解析，所以在进行中英文切换的时候需要重新进入页面初始化；如果将数据绑定结合起来后，只需要手动控制数据即可立即渲染页面，不用再重新进入。
