摘要：看了的數據雙向綁定原理后對于其中的指令的解析有很深的印象，覺得可以運用到實際項目中，對目前的公司中的中英文頁面進行改進兼容求中英文頁面歷史版本優缺點分析最開始的時候中英文分別是用兩個去寫防閃頻率優點由于對同一個詞的中文和英文描述長度不一樣，

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

github (求★)

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

a_cn.html

    

        防閃頻率：
        
    

a_en.html

    

        Flicker frequency:
        
    

優點：由于對同一個詞的中文和英文描述長度不一樣，可以分別在兩個html中分別定義各自的class去控制樣式
缺點：

文字描述嵌入在html中，不利用統一管理

修改代碼繁瑣，改一個問題的時候可能需要修改兩次

增大了服務器中的文件體積

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

a.html

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上的代碼，有注釋，而且代碼也是比較簡單），直接貼使用代碼：

    

        

            
            
        
        

            
            
        
        

            
            
        
        

            
            
        
        

            
            
        
        

            
            
        
    
    

        
            
            
        
    
    
        英文
        中文
    


    
    
    

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我這邊也試過了，是可以的，就不放截圖了