摘要：看了的數(shù)據(jù)雙向綁定原理后對(duì)于其中的指令的解析有很深的印象，覺(jué)得可以運(yùn)用到實(shí)際項(xiàng)目中，對(duì)目前的公司中的中英文頁(yè)面進(jìn)行改進(jìn)兼容求中英文頁(yè)面歷史版本優(yōu)缺點(diǎn)分析最開(kāi)始的時(shí)候中英文分別是用兩個(gè)去寫防閃頻率優(yōu)點(diǎn)由于對(duì)同一個(gè)詞的中文和英文描述長(zhǎng)度不一樣，

看了vue的數(shù)據(jù)雙向綁定原理后對(duì)于其中的"指令的解析"有很深的印象，覺(jué)得可以運(yùn)用到實(shí)際項(xiàng)目中，對(duì)目前的公司中的中英文頁(yè)面進(jìn)行改進(jìn)（兼容IE8）；

github (求★)

1.最開(kāi)始的時(shí)候中英文分別是用兩個(gè)html去寫；

a_cn.html

    

        防閃頻率：
        
    

a_en.html

    

        Flicker frequency:
        
    

優(yōu)點(diǎn)：由于對(duì)同一個(gè)詞的中文和英文描述長(zhǎng)度不一樣，可以分別在兩個(gè)html中分別定義各自的class去控制樣式
缺點(diǎn)：

文字描述嵌入在html中，不利用統(tǒng)一管理

修改代碼繁瑣，改一個(gè)問(wèn)題的時(shí)候可能需要修改兩次

增大了服務(wù)器中的文件體積

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

a.html

cn.js

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

en.js

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

優(yōu)點(diǎn)：

將兩個(gè)文件合并成同一個(gè)文件，減小了服務(wù)器中的文件體積

由于合并為了一個(gè)文件，對(duì)于代碼的修復(fù)，只需要改一次就好

剝離出html中的文字描述，統(tǒng)一管理，利用js動(dòng)態(tài)渲染

缺點(diǎn)：

合并為同一個(gè)文件后樣式會(huì)以英文描述的為主
例如：這里很明顯能看出中文的頁(yè)面是按照英文的樣式來(lái)渲染的，這樣看起來(lái)不太舒服；

所有文字都是一次性渲染，有些隱藏元素的文字也會(huì)進(jìn)行渲染，影響首屏渲染速度

在改進(jìn)版本的基礎(chǔ)上，不通過(guò)jq的選擇器進(jìn)行渲染，而是在每個(gè)需要渲染文字的元素上添加自定義屬性，也就是我們的指令:inf-text="xxx"，再通過(guò)類似vue的方式進(jìn)行初始化

流程：
將每個(gè)dom元素提取出來(lái)->
解析指令->
再去數(shù)據(jù)中查找文字->
進(jìn)行文字渲染->
刪除自定義屬性->
最后再將dom元素一個(gè)個(gè)重新渲染到頁(yè)面上；
（參考vue源碼的指令解析即可，我這邊為了滿足項(xiàng)目需求，移植的時(shí)候簡(jiǎn)化了不少，而且兼容了IE8）

inf-class="xxx"指令來(lái)控制我們的樣式
inf-value="xxx"來(lái)控制value屬性的中英文（這里主要是用在input[type=button]上）
inf-title="xxx"來(lái)控制title屬性的中英文
inf-alt="xxx" 來(lái)控制alt屬性的中英文

源碼就不去解析了（有興趣可以看看github上的代碼，有注釋，而且代碼也是比較簡(jiǎn)單），直接貼使用代碼：

    

        

            
            
        
        

            
            
        
        

            
            
        
        

            
            
        
        

            
            
        
        

            
            
        
    
    

        
            
            
        
    
    
        英文
        中文
    


    
    
    

languageData.js:

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

}

ps:里面的languageData.lab.a，languageData.lab.b...這種a,b,c...命名方式只是為了方便演示，真正用的時(shí)候肯定不能這樣命名

getLanguage為獲取文字描述的函數(shù)，參數(shù)名為模塊名

languageRender為具體的構(gòu)造器函數(shù)

lan為0代表英文，1代表中文，這里根據(jù)具體自己的業(yè)務(wù)需求進(jìn)行修改

el:代表的是需要渲染的dom的包裹元素id，只所以我這里是用數(shù)組去表示，因?yàn)椴⒉皇琼?yè)面的所有dom都需要文字渲染，而且渲染的原理是對(duì)于dom元素二次渲染，為了減少不必要的開(kāi)銷，用數(shù)組去傳入需要渲染的dom的包裹元素id即可el:["app","app2"]，如果只有一個(gè)包裹元素內(nèi)的dom需要渲染可以直接填id名,即el:"app"

data為的數(shù)據(jù)容器對(duì)象，languageData為語(yǔ)言文字對(duì)象，其余的根據(jù)自己的需求進(jìn)行填寫，這里我們也只是需要?jiǎng)討B(tài)控制class即可；

優(yōu)點(diǎn)：

這樣我們就做到了中英文和樣式的動(dòng)態(tài)渲染

這里我還另外增加了一個(gè)beforeRender的hook函數(shù)，可以更好的實(shí)現(xiàn)頁(yè)面文字的定制修改

例如：

    new languageRender({
        ...
        beforeRender:function(){
            this.data.languageData.lab.a=["BLC","白平衡"][lan]
        }
    })

如果整個(gè)頁(yè)面需要渲染文字的dom元素太多，而且有些dom的最開(kāi)始是隱藏的（彈框），我們可以進(jìn)行懶加載加快首屏渲染速度，等首屏渲染好了后，再new languageRender函數(shù)繼續(xù)渲染即可（當(dāng)然這個(gè)dom是和已經(jīng)渲染的dom沒(méi)有包含與被包含的關(guān)系）

將數(shù)據(jù)綁定結(jié)合起來(lái)，只需要手動(dòng)控制數(shù)據(jù)即可立即渲染頁(yè)面，不用再重新進(jìn)入。

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

同時(shí)也提供了統(tǒng)一切換中英文的接口

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

利于語(yǔ)言的擴(kuò)展，例如需要再加入新的語(yǔ)言，只需要在數(shù)組中加入即可，然后再通過(guò)lan進(jìn)行選擇

lab: {
        a: ["Flicker frequency:","防閃頻率:","防閃頻率","????? ????? ???????"],
    },

老版本：

新版本：(一次性渲染)

新版本：（分開(kāi)渲染）

從上面看出改良后的版本速度上貌似也沒(méi)快多少，但是功能性方面?zhèn)€人覺(jué)得確實(shí)方便了不少；

從上面可以看出部分渲染和一次性渲染貌似并沒(méi)有什么差別，我個(gè)人覺(jué)得這種情況適合有更多的隱藏頁(yè)面存在的時(shí)候性能上應(yīng)該是提升不少，目前這個(gè)頁(yè)面我第二次渲染的只有彈出框和格式化頁(yè)面

我們可以分別打印出劃分的模塊的渲染時(shí)間，這樣更方便我們合理的分配渲染順序，也可以知道哪個(gè)模塊渲染時(shí)間長(zhǎng)，再下手優(yōu)化；
例如：
模塊1：

模塊2

模塊3

模塊4

頁(yè)面可以快速切換中英文頁(yè)面

ps:對(duì)于IE8我這邊也試過(guò)了，是可以的，就不放截圖了