對於中英文頁面的解決方案（IE8）

看了vue的數據雙向綁定原理後對於其中的 '指令的解析'有很深的印象，以爲能夠運用到實際項目中，對目前的公司中的中英文頁面進行改進（兼容IE8）；

github (求★)

中英文頁面歷史版本優缺點分析

1.最開始的時候中英文分別是用兩個html去寫；

a_cn.html

<div class="unitDiv_Cn">
        <label class="labelClass_Cn">防閃頻率：</label>
        <input class="inputClass_Cn" type="text">
    </div>

a_en.html

<div class="unitDiv_En">
        <label class="labelClass_En">Flicker frequency:</label>
        <input class="inputClass_En" type="text">
    </div>

優勢：因爲對同一個詞的中文和英文描述長度不同，能夠分別在兩個html中分別定義各自的class去控制樣式
缺點：

• 文字描述嵌入在html中，不利用統一管理
• 修改代碼繁瑣，改一個問題的時候可能須要修改兩次
• 增大了服務器中的文件體積

2.改進後利用jq同一動態渲染；(這邊主要是經過將須要渲染文字的元素定義好id，再定義好id與文字的映射關係，最後經過jq的選擇器進行統一渲染)

a.html

<div class="unitDiv_En">
    <label class="labelClass_En" id="labFlickerFrequency"></label>
    <input class="inputClass_En" type="text">
</div>

cn.js

...
language.label={
    labFlickerFrequency:'防閃頻率：',
}

en.js

...
language.label={
    labFlickerFrequency:'Flicker frequency：',
}

優勢：

• 將兩個文件合併成同一個文件，減少了服務器中的文件體積
• 因爲合併爲了一個文件，對於代碼的修復，只須要改一次就好
• 剝離出html中的文字描述，統一管理，利用js動態渲染

缺點：

• 合併爲同一個文件後樣式會以英文描述的爲主
  例如：這裏很明顯能看出中文的頁面是按照英文的樣式來渲染的，這樣看起來不太舒服；
  
• 全部文字都是一次性渲染，有些隱藏元素的文字也會進行渲染，影響首屏渲染速度

新版中英文頁面的改進

在改進版本的基礎上，不經過jq的選擇器進行渲染，而是在每一個須要渲染文字的元素上添加自定義屬性，也就是咱們的指令:inf-text='xxx'，再經過相似vue的方式進行初始化

流程：
將每一個dom元素提取出來->
解析指令->
再去數據中查找文字->
進行文字渲染->
刪除自定義屬性->
最後再將dom元素一個個從新渲染到頁面上；
（參考vue源碼的指令解析便可，我這邊爲了知足項目需求，移植的時候簡化了很多，並且兼容了IE8）

inf-class='xxx'指令來控制咱們的樣式
inf-value='xxx'來控制value屬性的中英文（這裏主要是用在input[type=button]上）
inf-title='xxx'來控制title屬性的中英文
inf-alt='xxx' 來控制alt屬性的中英文

源碼就不去解析了（有興趣能夠看看github上的代碼，有註釋，並且代碼也是比較簡單），直接貼使用代碼：

<div id="app">
        <div class="unitDiv">
            <label inf-class="labelClass" inf-title="languageData.lab.a" 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>
    <select  id="switch">
        <option value=0 selected>英文</option>
        <option value=1>中文</option>
    </select>


    <script type="text/javascript" src="languageData.js"></script>
    <script type="text/javascript" src="languageRender.js"></script>
    <script>
        
    var lan=document.getElementById('switch').value;
    var languageObj=getLanguage('module1');
    var languageRenderCtx=new languageRender({
        el: ['app','app2'],
        lan:lan,
        data: {
            languageData: languageObj,
            labelClass:['label_en','label_cn'],
            inputClass:['input_en','input_cn']
        },
        beforeRender:function(){
            this.option.data.languageData.lab.a=['BLC:','白平衡:']
        }
    })
    document.getElementById('switch').onchange=function(){
        languageRenderCtx.setLan(Number(this.value));
    }
        
    </script>

languageData.js:

function getLanguage(moduleName) {
    var data = {};
    if ('module1' == moduleName) {
        data = {
            lab: {
                a: ['Flicker frequency:', '防閃頻率:'],
                b: ['WDR:', '寬動態:'],
                c: ['FaceTargetBrightness:', '人臉目標亮度:'],
                d: ['FaceExposureInterval(s):', '人臉曝光間隔(s):'],
                e: ['IlluminationCondition:', '光照條件:'],
                f: ['HLC:', '背光補償:']
            },
            sel: {
                g: ['Auto', '自動'],
                h: ['Manual', '手動']
            }
        }
    }
    return data;

}

ps:裏面的languageData.lab.a，languageData.lab.b...這種a,b,c...命名方式只是爲了方便演示，真正用的時候確定不能這樣命名

• getLanguage爲獲取文字描述的函數，參數名爲模塊名
• languageRender爲具體的構造器函數
• lan爲0表明英文，1表明中文，這裏根據具體本身的業務需求進行修改
• el:表明的是須要渲染的dom的包裹元素id，只因此我這裏是用數組去表示，由於並非頁面的全部dom都須要文字渲染，並且渲染的原理是對於dom元素二次渲染，爲了減小沒必要要的開銷，用數組去傳入須要渲染的dom的包裹元素id便可el:['app','app2']，若是隻有一個包裹元素內的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沒有包含與被包含的關係）

• 將數據綁定結合起來，只須要手動控制數據便可當即渲染頁面，不用再從新進入。

  languageRenderCtx.set('languageData.lab.a','liuzj')

  同時也提供了統一切換中英文的接口

  document.getElementById('switch').onchange=function(){
      languageRenderCtx.setLan(Number(this.value))
  }

• 利於語言的擴展，例如須要再加入新的語言，只須要在數組中加入便可，而後再經過lan進行選擇

lab: {
        a: ['Flicker frequency:','防閃頻率:','防閃頻率','फ्लैश प्रूफ आवृत्ति'],
    },

新舊版本比較

老版本：

新版本：(一次性渲染)

新版本：（分開渲染）

• 從上面看出改良後的版本速度上貌似也沒快多少，可是功能性方面我的以爲確實方便了很多；
• 從上面能夠看出部分渲染和一次性渲染貌似並無什麼差異，我我的以爲這種狀況適合有更多的隱藏頁面存在的時候性能上應該是提高很多，目前這個頁面我第二次渲染的只有彈出框和格式化頁面
• 咱們能夠分別打印出劃分的模塊的渲染時間，這樣更方便咱們合理的分配渲染順序，也能夠知道哪一個模塊渲染時間長，再下手優化；
  例如：
  模塊1：
  
  模塊2
  
  模塊3
  
  模塊4
  
• 頁面能夠快速切換中英文頁面
  

ps:對於IE8我這邊也試過了，是能夠的，就不放截圖了