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

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

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

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