国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

在 React 項目中使用 React-intl 實現(xiàn)多語言支持

Mr_zhang / 1938人閱讀

摘要:最近在項目中添加了語言國際化的功能。項目地址是雅虎的語言國際化開源項目的一部分,通過其提供的組件和可以與綁定。你當(dāng)然可以使用的方式引用,但是,這樣有前途么創(chuàng)建配置文件這里,我們將文件命名為和,代表中文和美式英語的配置包。

最近在項目中添加了語言國際化的功能。

語言國際化,也有人說成是語言本地化,其實就是為Web App添加多語言,我們的項目當(dāng)前包含了中文版和英文版,按理來說『逐字替換』也不是多大事兒,但是,這么Low的做法,有錢途嗎?

一開始的時候,我考慮的是傳統(tǒng)的為整個項目添加config文件,根據(jù)不同的語言和地區(qū),加載不同的config文件,就能夠達(dá)到界面語言切換的目的。當(dāng)然,也正是因為這個想法太過于幼稚,所以才被稱為『一開始』的想法。語言的國際化不僅僅是將界面上的UI文字翻譯成另一種語言,還包括了日期&時間顯示,數(shù)字顯示(英文環(huán)境下每隔3位一個逗號:1,000),量詞的顯示(一個蘋果是apple,兩個蘋果就應(yīng)該是apples),甚至還有一個字符串中間插了一個變量的情況("今天午飯吃了{(lán)count}個雞腿")...

所以這并不只是一個簡單的字符替換問題,并且,我們要很方便的導(dǎo)出一個目錄,放到word或者page當(dāng)中,給到其他同事對照著進(jìn)行翻譯工作,這個非常重要!!難道你要讓產(chǎn)品經(jīng)理直接在代碼里改么?或者你想一個一個搜索替換?不考慮清楚就干的話,相信我,You"ll pay for this。

作為一個有追求的代碼家,你肯定不希望在index.html當(dāng)中增加一行

React-intl
項目地址:https://github.com/yahoo/reac...

React-intl是雅虎的語言國際化開源項目FormatJS的一部分,通過其提供的組件和API可以與ReactJS綁定。上面這句話援引了官方文檔的說辭,主要表達(dá)的是,這是一個很屌的開源項目,有大團(tuán)隊支持,使用量也很大,不會太坑爹,你們放心用。雖然雅虎都快被收購了。

React-intl提供了兩種使用方法,一種是引用React組建,另一種是直接調(diào)取API,官方更加推薦在React項目中使用前者,只有在無法使用React組件的地方,才應(yīng)該調(diào)用框架提供的API,事實上,我在項目的過程中真的遇到了無法使用組件的情況,這個我會另外寫一篇文章來描述。

React-intl提供的React組件有如下幾種:

包裹在需要語言國際化的組建的最外層,為包含在其中的所有組建提供包含id和字符串的鍵值對。(如:"homepage.title":"Hommily";

日期時間

a. 用于格式化日期,能夠?qū)⒁粋€時間戳格式化成不同語言中的日期格式。

傳入時間戳作為參數(shù):

輸出結(jié)果:

4/5/2016

b. 用于格式化時間,效果與相似。

傳入時間戳作為參數(shù):

輸出結(jié)果:

1:09 AM

c. 通過這個組件可以顯示傳入組件的某個時間戳和當(dāng)前時間的關(guān)系,比如 “ 10 minutes ago"。

傳入時間戳作為參數(shù):

輸出結(jié)果:

now

10秒之后的輸出結(jié)果:

10 seconds ago

1分鐘之后的輸出結(jié)果:

1 minute ago
數(shù)字量詞

a. 這個組件最主要的用途是用來給一串?dāng)?shù)字標(biāo)逗號,比如10000這個數(shù)字,在中文的語言環(huán)境中應(yīng)該是1,0000,是每隔4位加一個逗號,而在英語的環(huán)境中是10,000,每隔3位加一個逗號。

傳入數(shù)字作為參數(shù):

輸出結(jié)果:

1,000

b. 這個組件可用于格式化量詞,在中文的語境中,其實不太會用得到,比如我們說一個雞腿,那么量詞就是‘個’,我們說兩個雞腿,量詞還是‘個’,不會發(fā)生變化。但是在英文的語言環(huán)境中,描述一個蘋果的時候,量詞是apple,當(dāng)蘋果數(shù)量為兩個時,就會變成apples,這個組件的作用就在于此。

傳入組件的參數(shù)中,value為數(shù)量,其他的為不同數(shù)量時對應(yīng)的量詞,在下面的例子中,一個的時候量詞為message,兩個的時候量詞為messages。實際上可以傳入組件的量詞包括 zero, one, two, few, many, other 已經(jīng)涵蓋了所有的情況。


傳入組件的量詞參數(shù)可以是一個字符串,也可以是一個組件,我們可以選擇傳入組件,就可以實現(xiàn)量詞的不同語言的切換。

輸出結(jié)果:

messages
字符串的格式化

a. 這個組件用于格式化字符串,是所有的組件中使用頻率最高的組件,因為基本上,UI上面的每一個字符串都應(yīng)該用這個組件替代。這個組件的功能豐富,除了可以根據(jù)配置輸出不同語言的簡單字符串之外,還可以輸出包含動態(tài)變化的參數(shù)的復(fù)雜字符串,具體的用法在后面的例子中會慢慢敘述。

比如我們在locale配置文件中寫了如下內(nèi)容:

const app = {
    greeting:"Hello Howard!",
}

export default app;

使用這個組件的時候,我們這么寫:

id指代的是這個字符串在locale配置文件中的屬性名,description指的是對于這個位置替代的字符串的描述,便于維護(hù)代碼,不寫的話也不會影響輸出的結(jié)果,當(dāng)在locale配置文件中沒有找到這個id的時候,輸出的結(jié)果就是defaultMessage的值。

輸出的結(jié)果:

Hello, Howard!

b. 這個組件的用法和完全相同,唯一的不同就是輸出的字符串可以包含HTML標(biāo)簽,但是官方不太推薦使用這個方法,如果可以想辦法用的話,就不應(yīng)該使用這個組件,我揣測應(yīng)該是性能方面不如,這個組件的用法我就不舉例了。

Well,到此為止,已經(jīng)把React-intl提供的所有組件介紹完了,下面就給大家介紹一下具體如何去使用吧。

React-intl 使用步驟

(本文例子運(yùn)行在OSX環(huán)境,Window操作方法的終端在安裝的時候要注意用管理員身份運(yùn)行)

1. 安裝React-intl

假設(shè)你已經(jīng)在你的系統(tǒng)中安裝了node.js和npm,如果你還不知道這兩個是什么東西,請自行百度,對,在百度都能找到答案。

打開終端,進(jìn)入項目根目錄,輸入以下指令安裝React-intl:

npm install react-intl -save

注意:為了兼容Safari各個版本,需要同時安裝 intl,intl在大部分的『現(xiàn)代』瀏覽器中是默認(rèn)自帶的,但是Safari和IE11以下的版本就沒有了,這里需要留個心眼。

安裝intl需要在終端中輸入以下指令:

npm install intl --save

這里還有一個注意:由于React-intl的每一個組件的使用方法大同小異,和ReactJS的語法完全一致,所以我就僅僅描述如何使用這個組件的用法,借此拋磚引玉,相信看完之后已經(jīng)足夠幫助你迅速的去使用這個開源框架了。

2. 引用React-intl
import { FormattedMessage } from "react-intl"; 

由于我使用的是ES6 的語法,所以是支持直接引用組件的。你當(dāng)然可以使用ES5的方式引用,但是,這樣有前途么?

require ReactIntl from "react-intl";
3. 創(chuàng)建locale配置文件

這里,我們將文件命名為zh_CN.js和en_US.js,代表中文和美式英語的配置包。

在zh_CN.js編寫如下代碼:

const zh_CN = {
            hello:"你好,方浩!",
            superHello:"你好,{ someone } !"
        }
export default zh_CN;    

在en_US.js編寫如下代碼:

const en_US = {
            hello:"Hello, Howard!",
            superHello:"Hello, { someone } !"
        }    
export default en_US;

于是,我們就創(chuàng)建好了locale文件,但是,在實際的項目中配置文件不會這么簡單,您可能需要根據(jù)業(yè)務(wù)需求按照不同的頁面或者不同的功能塊創(chuàng)建不同的文件樹,然后用模塊化的方法將不同的配置文件進(jìn)行組織,已達(dá)成你的目標(biāo),這里我也就沒能力逼逼太多了。

你可能想問,{ someone } 是什么鬼?其實悟性高一些的話就應(yīng)該已經(jīng)猜到,這個應(yīng)該就是前面提到過的在字符串中插入動態(tài)參數(shù)的用法,事實上也是這樣的。

4. 使用

使用 組件包裹住需要您需要進(jìn)行語言國際化的組件,用法和React-redux的差不多,當(dāng) 包裹住某個組件的時候,這個組件本身和組件內(nèi)部包含的子組件就可以獲得所有React-intl提供的接口以及在 中引入的locale配置文件的內(nèi)容。

import React from "react";
import { render } from "react-dom";
//引入locale配置文件,具體路徑根據(jù)實際情況填寫
import zh_CN from "./zh_CN";
import en-US from "./en-US";
//如果瀏覽器沒有自帶intl,則需要在使用npm安裝intl之后添加如下代碼
import intl from "intl";
addLocaleDate([...en,...zh]);

...
...

render(    
        
            
        ,    
        document.getElementById("container")
);

需要傳遞兩個參數(shù):

locale是傳遞需要國際化的語言的縮寫,通過這個參數(shù)可以確定格式化日期,數(shù)字,量詞的時候按照哪一種語言的規(guī)則,這個是規(guī)則是intl提供的,一般瀏覽器會內(nèi)置這個庫,但是在Safari和IE11之前需要自己安裝,安裝的方法前面已經(jīng)提及,請自己翻閱。

messages是用于傳遞剛剛我們在第3步中定義的配置文件的,從示例代碼中我們可以看出,首先我們使用Import語句引入了配置文件,然后將配置文件的內(nèi)容傳遞給了messages這個參數(shù),此時組件中的所有組件都可以拿到配置文件中的內(nèi)容了。

那個跳起來的同學(xué),請先坐下,我猜你是想問,是不是每次都要手動修改這兩個參數(shù)以適配不同語言呢?

其實不然,我們完全可以按照下面的做法自動識別當(dāng)前瀏覽器的語言:

chooseLocale(){
    switch(navigator.language.split("_")[0]){
        case "en":
            return "en_US";
            break;
        case "zh":
            return "zh_CN";
            break;
        ...
        ...
        ...
        default:
            return "en_US";
            break;
    }
}
render(    
        
            
        ,    
        document.getElementById("container")
);

您還需要知道的是,是可以嵌套使用的,也就是說,在一個內(nèi)部還可以有N個,這個功能的實際意義就是可以在英文網(wǎng)站中嵌套一個中文的或者德語的或者法語的板塊,應(yīng)用起來會更加靈活一些。

5. 使用

前面的幾個步驟其實都是為了這個步驟做鋪墊的,在添加了之后,我們就可以在其包裹的包含的所有組件中獲取到配置文件的信息,傳入組件的id參數(shù)也能其在配置文件中對應(yīng)的字符串了。

使用的方法如下:

在Js執(zhí)行的時候,組件就會找到配置文件中,‘hello"鍵名對應(yīng)的字符串"Hello, Howard!".

輸出的結(jié)果為:

Hello, Howard!

那么如何輸出含有動態(tài)參數(shù)的字符串呢?比如Hello,Johnson!,如果我要問候的對象是一個變量呢?

那就這么寫唄。。

以上的例子中,賦給someone的就是一個變量(假設(shè)這個變量是通過參數(shù)傳進(jìn)這個組件的),注意,如果是這樣的話,那么locale配置文件中就要這么寫。

 superHello:"你好,{ someone } !"

前面其實提過了,怕你忘了...我已經(jīng)悄無聲息的把id換成了superHello。

更牛逼的是,這個someone還可以包含HTML標(biāo)簽!

this.props.name,
    }
    />

輸出結(jié)果:

Hello, Howard!

于是,這個名字就被加粗了。

眼尖的同學(xué)又要跳起來了,“webFunc,為什么所有的輸出都帶一個標(biāo)簽,我就不能換成別的么?”

不要著急,我正要說這個,對于這個問題,官方的文檔是這么說的。

By default  will render the formatted string into
a . If you need to customize rendering, you can either wrap it
with another React element (recommended), specify a different tagName
(e.g., "div"), or pass a function as the child.

翻譯過來就是,默認(rèn)的是會包裹在標(biāo)簽中的,如果想要讓輸出的字符串包裹在其他標(biāo)簽中的話,比如你想包裹在

中,你就把組件包含在一對
中間,這是一種官方更加推薦的做法。

Well, that"s stupid...

或者你可以給傳入一個tagName的參數(shù)。比如:

就會輸出:

Hello, Howard!

比較奇葩的是,也是我揣測作者不推薦使用這種方法的原因是...只要你高興,tagName可以傳入任意字符串,比如 shit:

就會輸出:

Hello, Howard!

Yes, shit happens.

看到這里,你應(yīng)該已經(jīng)會使用React-intl對你的項目進(jìn)行語言國際化了,沒有進(jìn)一步描述的地方,請自行查閱官方文檔(項目地址:https://github.com/yahoo/reac...,或者給我留言,雖然我不一定會及時回復(fù)。

--寫在后面:

語言國際化應(yīng)該是一個比較經(jīng)常遇到的需求,但是我在完成項目的過程中,看到的中文的資料卻相當(dāng)少,雖然這不是一篇非常牛叉的技術(shù)文章,但是可能會幫到很多人,如若如此,也便滿足了。
——方浩(webFunc)

對了,你可以關(guān)注一下我的微信公眾號:webcoding

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/79801.html

相關(guān)文章

  • React項目國際化(antd)多語開發(fā)

    摘要:本國際化方案僅針對技術(shù)棧,且不會涉及服務(wù)端國際化內(nèi)容。引入多語言環(huán)境的數(shù)據(jù)雖然我只用到了文本翻譯的功能,以為就不需要加載這些數(shù)據(jù),但后來發(fā)現(xiàn)這是必須的步驟。 前言 最近新接了一個項目,從0開始做,需要做多語言的國際化,今天搞了一下,基本達(dá)到了想要的效果, 在這里簡單分享下: showImg(https://segmentfault.com/img/bVbuiJB); 背景國際化方案國際...

    tracymac7 評論0 收藏0
  • React項目國際化(antd)多語開發(fā)

    摘要:本國際化方案僅針對技術(shù)棧,且不會涉及服務(wù)端國際化內(nèi)容。引入多語言環(huán)境的數(shù)據(jù)雖然我只用到了文本翻譯的功能,以為就不需要加載這些數(shù)據(jù),但后來發(fā)現(xiàn)這是必須的步驟。 前言 最近新接了一個項目,從0開始做,需要做多語言的國際化,今天搞了一下,基本達(dá)到了想要的效果, 在這里簡單分享下: showImg(https://segmentfault.com/img/bVbuiJB); 背景國際化方案國際...

    wushuiyong 評論0 收藏0
  • [ 一起學(xué)React系列 -- 10 ] i18n

    摘要:假如有這么一段句子這件衣服是人民幣如果我們想將一個數(shù)字以人民幣的形式寫進(jìn)去的話可以這么做最終顯示結(jié)果是這件衣服是人民幣其實它做了兩件事一個是加符號,另一個是加分隔符。同時表示人民幣,表示美元。 今天來介紹一個非常international的東西。 i18n國際化(internationalization)的簡稱。之所以叫i18n,是因為字母i和n之間有18個字母,所以才叫i18n。不...

    biaoxiaoduan 評論0 收藏0
  • 初探react技術(shù)棧(一)

    摘要:相信用的同學(xué)也不少找到函數(shù)在其中中添加啟用編譯。。。react 最近已經(jīng)開始使用react技術(shù)棧了,從頭開始搭建項目,有必要的記錄一下配置的過程以及項目分層的思路,這次后臺項目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語言react-intl create-react-app 這是官方維護(hù)的腳手架應(yīng)用 我們一般也采用這個 $ npm or c...

    劉玉平 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<