今天小編會使用boostrap框架搭建一個配有中英文切換功能的網頁，還有就是使用nodejs搭建后臺服務落剪，從頭實現一個完整的前端國際化開發(fā)項目，內容不算很復雜，很適合前端已入門的胖友們吠撮。
01 、前端國際化概述
港真讲竿，自己剛接到這個需求的時候，也是不知如何下手弄屡，畢竟也沒經驗题禀，后面就找了百度，經過一番探索膀捷，最終圓滿的完成了任務迈嘹，下面就把我的經驗寫下來，有需要的朋友拿去全庸，不謝~~~
首先我們先來普及一下什么是國際化秀仲？國際化這個英文單詞為：Internationalization，又稱 i18n壶笼，“i”為單詞的第一個字母神僵，“18”為“i”和“n”之間單詞的個數，而“n”代表這個單詞的最后一個字母覆劈。在計算機領域保礼，國際化是指設計能夠適應各種區(qū)域和語言環(huán)境的軟件的過程。在計算機領域這塊责语，大家聽起來或許有些懵逼炮障，不過大家可以把它理解為一個頁面可以使用不同語言進行切換顯示的一個過程。
經過一番學習之后坤候，得知胁赢，目前常用的前端國際化實現方式有：
1、針對不同的語言白筹，各寫一套界面智末。
2、使用配置文件的方式遍蟋，使用的是同一套界面吹害，根據語言的不同加載對應的配置文件。
剛開始的時候為了盡快完成任務虚青，竟然選擇了使用第一種方式它呀，其實第一種方式的實現效率是最高的，因為在你寫完一個頁面之后，經過復制然后把內容改成對應的語言就好了纵穿。殊不知下隧，當你需要修改的頁面的某個地方的時候，你要把復制的頁面都一并改了谓媒，不然出問題了就不好找淆院，還有個問題就是每次切換的時候都需要重新發(fā)送請求，每次都要重新加載整個頁面句惯，對性能的影響較大土辩，不利于后續(xù)的維護。
出于以上問題的考慮抢野，后面還是使用了第二種方式拷淘。最終選擇了jQuery的國際化插件jQuery.i18n.properties ，它是一款輕量級的插件指孤，壓縮后僅 4kb启涯，api也比較簡單，它的國際化資源文件以“.properties”為后綴恃轩，包含了各語言相關的鍵值對结洼。
下面就開始擼代碼：
02 、前端國際化實現
1叉跛、首先搭建項目結構：
結構說明：
1.1松忍、component： 用來存放引入的組件，如boostrap
1.2昧互、i18n：存放jquery-i18n-properties插件和國際化資源配置文件
1.3挽铁、imgs：存放相關圖片
1.4、js：引入的相關腳本
1.5敞掘、server：存放nodeJs實現的后臺服務器叽掘，因為加載國際化文件需要走服務
1.6、index.html：國際化測試頁面
index.html的頁面結構如下：
2玖雁、開發(fā)步驟說明
靜態(tài)頁面開發(fā)完成后更扁，首先就要搭建后臺的服務，否則在加載國際化文件的時候會報錯赫冬。
2.1浓镜、搭建nodeJs后臺服務器
它主要的思路是發(fā)送請求的時候能夠返回對應的內容。它監(jiān)聽的是localhost的8888端口劲厌，
啟動node服務器：
然后瀏覽器訪問：http://localhost:8888/
說明服務已經啟動成功膛薛，接下來就實現前端國際化。
2.2补鼻、i18n插件的使用
2.2.1哄啄、首先定義不同語言的國際化資源文件：
需要注意的是：不同配置文件中的key必須要一樣雅任，并且key中不能帶空格，不能有重復的key否則會被覆蓋咨跌。
2.2.2沪么、在頁面定義需要翻譯的地方，在切換的時候其實就是替換它的文本內容：
這里需要注意的是锌半，每個需要翻譯的地方都需要有一個定義方便后續(xù)定位到它禽车，實行內容替換。
2.2.3刊殉、接下來看具體的實現切換的過程：
兩個地方需要加載國際化資源文件殉摔，一是頁面加載完畢的時候：
另外就是點擊中英文切換按鈕的時候需要重新加載：
下面看看切換效果：
2.2.4、實現過程中的幾個注意點
(1)冗澈、之所以使用cookie緩存钦勘，是因為在做語言切換的時候，能記錄你切換后的語言亚亲，如果你退出之后，再進來顯示的還是你上次選擇的語言腐缤，而不是重新加載默認的語言捌归。
(2)、如果是初次訪問岭粤，默認加載的是瀏覽器的語言惜索。使用瀏覽器語言的時候需要注意自己的設置，下面用谷歌為例來說說瀏覽器語言的設置問題剃浇。有的或許有疑問就是我瀏覽器設置了英文巾兆，但是頁面上顯示的仍然是中文。
這里會有兩種情況：
一種是你之前已經訪問過該網站了虎囚，所以它會讀取cookie緩存中的語言角塑，解決辦法是清了cookie里的緩存。
另一種是瀏覽器設置語言的時候讀的是排在最上面的語言淘讥。
比如上圖你設置了英文圃伶，但是英文排在了第二的位置，所以它讀的是最上面的簡體中文蒲列。
03 窒朋、總結
根據上面的實現，我們發(fā)現使用資源配置文件實現前端國際化會有以下優(yōu)缺點：
優(yōu)點：在進行語言切換時蝗岖，速度會很快侥猩，不會進行整個頁面的刷新，適合靜態(tài)頁面使用抵赢。
缺點：當頁面中有動態(tài)注入的內容時可能處理起來比較麻煩欺劳。每個需要翻譯的地方都要加一個class和name屬性唧取，比較麻煩。
能力有限杰标，如有更好的辦法兵怯，歡迎大家分享出來，一起學習腔剂。如果文章對你有幫助媒区，請動動手指關注我喲干奢！
