今天小編會使用boostrap框架搭建一個配有中英文切換功能的網(wǎng)頁，還有就是使用nodejs搭建后臺服務，從頭實現(xiàn)一個完整的前端國際化開發(fā)項目，內(nèi)容不算很復雜，很適合前端已入門的胖友們。
成都創(chuàng)新互聯(lián)公司長期為成百上千家客戶提供的網(wǎng)站建設(shè)服務，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為洛寧企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計，洛寧網(wǎng)站改版等技術(shù)服務。擁有10年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。01 、前端國際化概述
港真，自己剛接到這個需求的時候，也是不知如何下手，畢竟也沒經(jīng)驗，后面就找了百度，經(jīng)過一番探索，最終圓滿的完成了任務，下面就把我的經(jīng)驗寫下來，有需要的朋友拿去，不謝~~~
首先我們先來普及一下什么是國際化？國際化這個英文單詞為：Internationalization，又稱 i18n，“i”為單詞的第一個字母，“18”為“i”和“n”之間單詞的個數(shù)，而“n”代表這個單詞的最后一個字母。在計算機領(lǐng)域，國際化是指設(shè)計能夠適應各種區(qū)域和語言環(huán)境的軟件的過程。在計算機領(lǐng)域這塊，大家聽起來或許有些懵逼，不過大家可以把它理解為一個頁面可以使用不同語言進行切換顯示的一個過程。
經(jīng)過一番學習之后，得知，目前常用的前端國際化實現(xiàn)方式有：
1、針對不同的語言，各寫一套界面。
2、使用配置文件的方式，使用的是同一套界面，根據(jù)語言的不同加載對應的配置文件。
剛開始的時候為了盡快完成任務，竟然選擇了使用第一種方式，其實第一種方式的實現(xiàn)效率是最高的，因為在你寫完一個頁面之后，經(jīng)過復制然后把內(nèi)容改成對應的語言就好了。殊不知，當你需要修改的頁面的某個地方的時候，你要把復制的頁面都一并改了，不然出問題了就不好找，還有個問題就是每次切換的時候都需要重新發(fā)送請求，每次都要重新加載整個頁面，對性能的影響較大，不利于后續(xù)的維護。
出于以上問題的考慮，后面還是使用了第二種方式。最終選擇了jQuery的國際化插件jQuery.i18n.properties ，它是一款輕量級的插件，壓縮后僅 4kb，api也比較簡單，它的國際化資源文件以“.properties”為后綴，包含了各語言相關(guān)的鍵值對。
下面就開始擼代碼：
02 、前端國際化實現(xiàn)
1、首先搭建項目結(jié)構(gòu)：
結(jié)構(gòu)說明：
1.1、component： 用來存放引入的組件，如boostrap
1.2、i18n：存放jquery-i18n-properties插件和國際化資源配置文件
1.3、imgs：存放相關(guān)圖片
1.4、js：引入的相關(guān)腳本
1.5、server：存放nodeJs實現(xiàn)的后臺服務器，因為加載國際化文件需要走服務
1.6、index.html：國際化測試頁面
index.html的頁面結(jié)構(gòu)如下：
2、開發(fā)步驟說明
靜態(tài)頁面開發(fā)完成后，首先就要搭建后臺的服務，否則在加載國際化文件的時候會報錯。
2.1、搭建nodeJs后臺服務器
它主要的思路是發(fā)送請求的時候能夠返回對應的內(nèi)容。它監(jiān)聽的是localhost的8888端口，
啟動node服務器：
然后瀏覽器訪問：http://localhost:8888/
說明服務已經(jīng)啟動成功，接下來就實現(xiàn)前端國際化。
2.2、i18n插件的使用
2.2.1、首先定義不同語言的國際化資源文件：
需要注意的是：不同配置文件中的key必須要一樣，并且key中不能帶空格，不能有重復的key否則會被覆蓋。
2.2.2、在頁面定義需要翻譯的地方，在切換的時候其實就是替換它的文本內(nèi)容：
這里需要注意的是，每個需要翻譯的地方都需要有一個定義方便后續(xù)定位到它，實行內(nèi)容替換。
2.2.3、接下來看具體的實現(xiàn)切換的過程：
兩個地方需要加載國際化資源文件，一是頁面加載完畢的時候：
另外就是點擊中英文切換按鈕的時候需要重新加載：
下面看看切換效果：
2.2.4、實現(xiàn)過程中的幾個注意點
(1)、之所以使用cookie緩存，是因為在做語言切換的時候，能記錄你切換后的語言，如果你退出之后，再進來顯示的還是你上次選擇的語言，而不是重新加載默認的語言。
(2)、如果是初次訪問，默認加載的是瀏覽器的語言。使用瀏覽器語言的時候需要注意自己的設(shè)置，下面用谷歌為例來說說瀏覽器語言的設(shè)置問題。有的或許有疑問就是我瀏覽器設(shè)置了英文，但是頁面上顯示的仍然是中文。
這里會有兩種情況：
一種是你之前已經(jīng)訪問過該網(wǎng)站了，所以它會讀取cookie緩存中的語言，解決辦法是清了cookie里的緩存。
另一種是瀏覽器設(shè)置語言的時候讀的是排在最上面的語言。
比如上圖你設(shè)置了英文，但是英文排在了第二的位置，所以它讀的是最上面的簡體中文。
03 、總結(jié)
根據(jù)上面的實現(xiàn)，我們發(fā)現(xiàn)使用資源配置文件實現(xiàn)前端國際化會有以下優(yōu)缺點：
優(yōu)點：在進行語言切換時，速度會很快，不會進行整個頁面的刷新，適合靜態(tài)頁面使用。
缺點：當頁面中有動態(tài)注入的內(nèi)容時可能處理起來比較麻煩。每個需要翻譯的地方都要加一個class和name屬性，比較麻煩。
能力有限，如有更好的辦法，歡迎大家分享出來，一起學習。如果文章對你有幫助，請動動手指關(guān)注我喲！
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
重慶分公司
重慶分公司
