如何優(yōu)雅的實(shí)現(xiàn)前端國(guó)際化

今天小編會(huì)使用boostrap框架搭建一個(gè)配有中英文切換功能的網(wǎng)頁(yè)，還有就是使用nodejs搭建后臺(tái)服務(wù)，從頭實(shí)現(xiàn)一個(gè)完整的前端國(guó)際化開(kāi)發(fā)項(xiàng)目，內(nèi)容不算很復(fù)雜，很適合前端已入門的胖友們。

01 、前端國(guó)際化概述

港真，自己剛接到這個(gè)需求的時(shí)候，也是不知如何下手，畢竟也沒(méi)經(jīng)驗(yàn)，后面就找了百度，經(jīng)過(guò)一番探索，最終圓滿的完成了任務(wù)，下面就把我的經(jīng)驗(yàn)寫下來(lái)，有需要的朋友拿去，不謝~~~

首先我們先來(lái)普及一下什么是國(guó)際化？國(guó)際化這個(gè)英文單詞為：Internationalization，又稱 i18n，“i”為單詞的第一個(gè)字母，“18”為“i”和“n”之間單詞的個(gè)數(shù)，而“n”代表這個(gè)單詞的最后一個(gè)字母。在計(jì)算機(jī)領(lǐng)域，國(guó)際化是指設(shè)計(jì)能夠適應(yīng)各種區(qū)域和語(yǔ)言環(huán)境的軟件的過(guò)程。在計(jì)算機(jī)領(lǐng)域這塊，大家聽(tīng)起來(lái)或許有些懵逼，不過(guò)大家可以把它理解為一個(gè)頁(yè)面可以使用不同語(yǔ)言進(jìn)行切換顯示的一個(gè)過(guò)程。

經(jīng)過(guò)一番學(xué)習(xí)之后，得知，目前常用的前端國(guó)際化實(shí)現(xiàn)方式有：

1、針對(duì)不同的語(yǔ)言，各寫一套界面。

2、使用配置文件的方式，使用的是同一套界面，根據(jù)語(yǔ)言的不同加載對(duì)應(yīng)的配置文件。

剛開(kāi)始的時(shí)候?yàn)榱吮M快完成任務(wù)，竟然選擇了使用第一種方式，其實(shí)第一種方式的實(shí)現(xiàn)效率是最高的，因?yàn)樵谀銓懲暌粋€(gè)頁(yè)面之后，經(jīng)過(guò)復(fù)制然后把內(nèi)容改成對(duì)應(yīng)的語(yǔ)言就好了。殊不知，當(dāng)你需要修改的頁(yè)面的某個(gè)地方的時(shí)候，你要把復(fù)制的頁(yè)面都一并改了，不然出問(wèn)題了就不好找，還有個(gè)問(wèn)題就是每次切換的時(shí)候都需要重新發(fā)送請(qǐng)求，每次都要重新加載整個(gè)頁(yè)面，對(duì)性能的影響較大，不利于后續(xù)的維護(hù)。

出于以上問(wèn)題的考慮，后面還是使用了第二種方式。最終選擇了jQuery的國(guó)際化插件jQuery.i18n.properties ，它是一款輕量級(jí)的插件，壓縮后僅 4kb，api也比較簡(jiǎn)單，它的國(guó)際化資源文件以“.properties”為后綴，包含了各語(yǔ)言相關(guān)的鍵值對(duì)。

下面就開(kāi)始擼代碼：

02 、前端國(guó)際化實(shí)現(xiàn)

1、首先搭建項(xiàng)目結(jié)構(gòu)：

結(jié)構(gòu)說(shuō)明：

1.1、component： 用來(lái)存放引入的組件，如boostrap

1.2、i18n：存放jquery-i18n-properties插件和國(guó)際化資源配置文件

1.3、imgs：存放相關(guān)圖片

1.4、js：引入的相關(guān)腳本

1.5、server：存放nodeJs實(shí)現(xiàn)的后臺(tái)服務(wù)器，因?yàn)榧虞d國(guó)際化文件需要走服務(wù)

1.6、index.html：國(guó)際化測(cè)試頁(yè)面

index.html的頁(yè)面結(jié)構(gòu)如下：

2、開(kāi)發(fā)步驟說(shuō)明

靜態(tài)頁(yè)面開(kāi)發(fā)完成后，首先就要搭建后臺(tái)的服務(wù)，否則在加載國(guó)際化文件的時(shí)候會(huì)報(bào)錯(cuò)。

2.1、搭建nodeJs后臺(tái)服務(wù)器

它主要的思路是發(fā)送請(qǐng)求的時(shí)候能夠返回對(duì)應(yīng)的內(nèi)容。它監(jiān)聽(tīng)的是localhost的8888端口，

啟動(dòng)node服務(wù)器：

然后瀏覽器訪問(wèn)：http://localhost:8888/

說(shuō)明服務(wù)已經(jīng)啟動(dòng)成功，接下來(lái)就實(shí)現(xiàn)前端國(guó)際化。

2.2、i18n插件的使用

2.2.1、首先定義不同語(yǔ)言的國(guó)際化資源文件：

需要注意的是：不同配置文件中的key必須要一樣，并且key中不能帶空格，不能有重復(fù)的key否則會(huì)被覆蓋。

2.2.2、在頁(yè)面定義需要翻譯的地方，在切換的時(shí)候其實(shí)就是替換它的文本內(nèi)容：

這里需要注意的是，每個(gè)需要翻譯的地方都需要有一個(gè)定義方便后續(xù)定位到它，實(shí)行內(nèi)容替換。

2.2.3、接下來(lái)看具體的實(shí)現(xiàn)切換的過(guò)程：

兩個(gè)地方需要加載國(guó)際化資源文件，一是頁(yè)面加載完畢的時(shí)候：

另外就是點(diǎn)擊中英文切換按鈕的時(shí)候需要重新加載：

下面看看切換效果：

2.2.4、實(shí)現(xiàn)過(guò)程中的幾個(gè)注意點(diǎn)

(1)、之所以使用cookie緩存，是因?yàn)樵谧稣Z(yǔ)言切換的時(shí)候，能記錄你切換后的語(yǔ)言，如果你退出之后，再進(jìn)來(lái)顯示的還是你上次選擇的語(yǔ)言，而不是重新加載默認(rèn)的語(yǔ)言。

(2)、如果是初次訪問(wèn)，默認(rèn)加載的是瀏覽器的語(yǔ)言。使用瀏覽器語(yǔ)言的時(shí)候需要注意自己的設(shè)置，下面用谷歌為例來(lái)說(shuō)說(shuō)瀏覽器語(yǔ)言的設(shè)置問(wèn)題。有的或許有疑問(wèn)就是我瀏覽器設(shè)置了英文，但是頁(yè)面上顯示的仍然是中文。

這里會(huì)有兩種情況：

一種是你之前已經(jīng)訪問(wèn)過(guò)該網(wǎng)站了，所以它會(huì)讀取cookie緩存中的語(yǔ)言，解決辦法是清了cookie里的緩存。

另一種是瀏覽器設(shè)置語(yǔ)言的時(shí)候讀的是排在最上面的語(yǔ)言。

比如上圖你設(shè)置了英文，但是英文排在了第二的位置，所以它讀的是最上面的簡(jiǎn)體中文。

03 、總結(jié)

根據(jù)上面的實(shí)現(xiàn)，我們發(fā)現(xiàn)使用資源配置文件實(shí)現(xiàn)前端國(guó)際化會(huì)有以下優(yōu)缺點(diǎn)：

優(yōu)點(diǎn)：在進(jìn)行語(yǔ)言切換時(shí)，速度會(huì)很快，不會(huì)進(jìn)行整個(gè)頁(yè)面的刷新，適合靜態(tài)頁(yè)面使用。

缺點(diǎn)：當(dāng)頁(yè)面中有動(dòng)態(tài)注入的內(nèi)容時(shí)可能處理起來(lái)比較麻煩。每個(gè)需要翻譯的地方都要加一個(gè)class和name屬性，比較麻煩。

能力有限，如有更好的辦法，歡迎大家分享出來(lái)，一起學(xué)習(xí)。如果文章對(duì)你有幫助，請(qǐng)動(dòng)動(dòng)手指關(guān)注我喲！