如何優(yōu)雅的實(shí)現(xiàn)前端國(guó)際化-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)公司長(zhǎng)期為成百上千家客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù);打造開(kāi)放共贏平臺(tái),與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為洛寧企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì),洛寧網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

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

港真,自己剛接到這個(gè)需求的時(shí)候,也是不知如何下手,畢竟也沒(méi)經(jīng)驗(yàn),后面就找了百度,經(jīng)過(guò)一番探索,最終圓滿的完成了任務(wù),下面就把我的經(jīng)驗(yàn)寫(xiě)下來(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ǔ)言,各寫(xiě)一套界面。

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

剛開(kāi)始的時(shí)候?yàn)榱吮M快完成任務(wù),竟然選擇了使用第一種方式,其實(shí)第一種方式的實(shí)現(xiàn)效率是最高的,因?yàn)樵谀銓?xiě)完一個(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):

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

結(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)如下:
如何優(yōu)雅的實(shí)現(xiàn)前端國(guó)際化

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ù)器

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

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

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

啟動(dòng)node服務(wù)器:
如何優(yōu)雅的實(shí)現(xiàn)前端國(guó)際化

然后瀏覽器訪問(wèn):http://localhost:8888/
如何優(yōu)雅的實(shí)現(xiàn)前端國(guó)際化
說(shuō)明服務(wù)已經(jīng)啟動(dòng)成功,接下來(lái)就實(shí)現(xiàn)前端國(guó)際化。

2.2、i18n插件的使用

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

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

如何優(yōu)雅的實(shí)現(xiàn)前端國(guó)際化
需要注意的是:不同配置文件中的key必須要一樣,并且key中不能帶空格,不能有重復(fù)的key否則會(huì)被覆蓋。

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

如何優(yōu)雅的實(shí)現(xiàn)前端國(guó)際化
這里需要注意的是,每個(gè)需要翻譯的地方都需要有一個(gè)定義方便后續(xù)定位到它,實(shí)行內(nèi)容替換。

2.2.3、接下來(lái)看具體的實(shí)現(xiàn)切換的過(guò)程:
如何優(yōu)雅的實(shí)現(xiàn)前端國(guó)際化

如何優(yōu)雅的實(shí)現(xiàn)前端國(guó)際化
兩個(gè)地方需要加載國(guó)際化資源文件,一是頁(yè)面加載完畢的時(shí)候:
如何優(yōu)雅的實(shí)現(xiàn)前端國(guó)際化
另外就是點(diǎn)擊中英文切換按鈕的時(shí)候需要重新加載:
如何優(yōu)雅的實(shí)現(xiàn)前端國(guó)際化
下面看看切換效果:
如何優(yōu)雅的實(shí)現(xiàn)前端國(guó)際化

如何優(yōu)雅的實(shí)現(xiàn)前端國(guó)際化
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ǔ)言。

如何優(yōu)雅的實(shí)現(xiàn)前端國(guó)際化
比如上圖你設(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)注我喲!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前標(biāo)題:如何優(yōu)雅的實(shí)現(xiàn)前端國(guó)際化-創(chuàng)新互聯(lián)
文章鏈接:http://muchs.cn/article34/cedcse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供軟件開(kāi)發(fā)、搜索引擎優(yōu)化、微信公眾號(hào)Google、App開(kāi)發(fā)手機(jī)網(wǎng)站建設(shè)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作