現(xiàn)在web前端也是一個非常熱門的行業(yè)，想要學習web前端開發(fā)的同學請看這里北京web前端國際化 ，通過對如何優(yōu)雅的實現(xiàn)前端國際化?? 的了解，希望以上信息可以幫助到您

1.如何優(yōu)雅的實現(xiàn)前端國際化

今天小編會使用boostrap框架搭建一個配有中英文切換功能的網(wǎng)頁，還有就是使用nodejs搭建后臺服務，從頭實現(xiàn)一個完整的前端國際化開發(fā)項目，內容不算很復雜，很適合前端已入門的胖友們。01 、前端國際化概述港真，自己剛接到這個需求的時候，也是不知如何下手，畢竟也沒經(jīng)驗，后面就找了百度，經(jīng)過一番探索，最終圓滿的完成了任務，下面就把我的經(jīng)驗寫下來，有需要的朋友拿去，不謝~~~首先我們先來普及一下什么是國際化？國際化這個英文單詞為：，又稱 i18n，“i”為單詞的*個字母，“18”為“i”和“n”之間單詞的個數(shù)，而“n”代表這個單詞的*一個字母。在計算機領域，國際化是指設計能夠適應各種區(qū)域和語言環(huán)境的軟件的過程。在計算機領域這塊，大家聽起來或許有些懵逼，不過大家可以把它理解為一個頁面可以使用不同語言進行切換顯示的一個過程。經(jīng)過一番學習之后，得知，目前常用的前端國際化實現(xiàn)方式有：1、針對不同的語言，各寫一套界面。2、使用配置文件的方式，使用的是同一套界面，根據(jù)語言的不同加載對應的配置文件。剛開始的時候為了盡快完成任務，竟然選擇了使用*種方式，其實*種方式的實現(xiàn)效率是*的，因為在你寫完一個頁面之后，經(jīng)過復制然后把內容改成對應的語言就好了。殊不知，當你需要修改的頁面的某個地方的時候，你要把復制的頁面都一并改了，不然出問題了就不好找，還有個問題就是每次切換的時候都需要重新發(fā)送請求，每次都要重新加載整個頁面，對性能的影響較大，不利于后續(xù)的維護。出于以上問題的考慮，后面還是使用了第二種方式。最終選擇了jQuery的國際化插件jQuery.i18n. ，它是一款輕量級的插件，壓縮后僅 4kb，api也比較簡單，它的國際化資源文件以“.”為后綴，包含了各語言相關的鍵值對。下面就開始擼代碼：02 、前端國際化實現(xiàn)1、首先搭建項目結構：結構說明：1.1、component： 用來存放引入的組件，如boostrap1.2、i18n：存放jquery-i18n-插件和國際化資源配置文件1.3、imgs：存放相關圖片1.4、js：引入的相關腳本1.5、server：存放nodeJs實現(xiàn)的后臺服務器，因為加載國際化文件需要走服務1.6、index.html：國際化測試頁面index.html的頁面結構如下：2、開發(fā)步驟說明靜態(tài)頁面開發(fā)完成后，首先就要搭建后臺的服務，否則在加載國際化文件的時候會報錯。2.1、搭建nodeJs后臺服務器它主要的思路是發(fā)送請求的時候能夠返回對應的內容。它監(jiān)聽的是localhost的8888端口，啟動node服務器：然后瀏覽器訪問： 、總結根據(jù)上面的實現(xiàn)，我們發(fā)現(xiàn)使用資源配置文件實現(xiàn)前端國際化會有以下優(yōu)缺點：優(yōu)點：在進行語言切換時，速度會很快，不會進行整個頁面的刷新，適合靜態(tài)頁面使用。缺點：當頁面中有動態(tài)注入的內容時可能處理起來比較麻煩。每個需要翻譯的地方都要加一個class和name屬性，比較麻煩。能力有限，如有更好的辦法，歡迎大家分享出來，一起學習。如果文章對你有幫助，請動動手指關注我喲！

看了以上有關如何優(yōu)雅的實現(xiàn)前端國際化??的講解，如果還有什么疑問可以直接來電咨詢