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

資訊專欄INFORMATION COLUMN

前端國際化的另類方式

everfight / 3349人閱讀

摘要:前不久做了一個國際化的項目,基于和,里面用到了國際化,使用方式也很簡單然后,頁面所有的官方組件都變成了中文默認(rèn)是英文。前端配置是指如何根據(jù)需要把需要展示的語言顯示在頁面,比如在中文環(huán)境下顯示中文,英文環(huán)境下顯示英文,用戶看得到才算數(shù)。

關(guān)于國際化

一個項目發(fā)展到一定的環(huán)境或者一開始就是為多國打造的,就需要考慮國際化了。簡單來說,就是一套頁面,多套語言。

前不久做了一個國際化的項目,基于reactantd,里面用到了國際化,使用方式也很簡單

</>復(fù)制代碼

  1. import zhCN from "antd/lib/locale-provider/zh_CN";
  2. return (
  3. );

然后,頁面所有的官方組件都變成了中文(默認(rèn)是英文)。

如果你使用其他工程,也有相應(yīng)的解決方案,比如

vue + vue-i18n

angular + angular-translate

react + react-intl

jquery + jquery.i18n.property

具體使用方式可以自行搜索,無非就是看各種api和配置文件。

可以說相當(dāng)成熟了,那么,如何自己實現(xiàn)?

國際化的實現(xiàn)原理

其實原理很簡單,這里只講最基本的原理,不談框架的特性。

上面列舉這里這么多js框架,有一個共同的特征,就是都有一個類似語言包的東西。

</>復(fù)制代碼

  1. zh.json
  2. en.json
  3. jp.json
  4. ...

這個也很好理解,把各種語言獨立開來,便于管理和維護(hù)。

便于測試,我們把請求的過程去掉了,直接寫在一個json對象里面,如下

intl.js

</>復(fù)制代碼

  1. var intl =
  2. {
  3. "zh": {
  4. "title": "測試",
  5. "content": "這是一個測試"
  6. },
  7. "cn": {
  8. "title": "test",
  9. "content": "this is a test"
  10. }
  11. }

大概會寫一些這樣的配置語言,然后通過某種手段把對應(yīng)的字段設(shè)置到相應(yīng)的位置就可以了。

下面是偽代碼

</>復(fù)制代碼

  1. 測試

  2. 這是一個測試

</>復(fù)制代碼

  1. var lang = getGlobalVar("LOCALE")||"zh";//獲取語言
  2. var local = intl["lang"];
  3. $title.innerHTML = local["title"];
  4. $content.innerHTML = local["content"];

上面是一個簡單的實現(xiàn)思路,如果是一個簡單的靜態(tài)頁面,大可以用這種方式,也不需要引入一些第三方庫,然后啃他的api。

當(dāng)然,國際化還遠(yuǎn)不止頁面靜態(tài)文字的簡單翻譯,還包括本地化服務(wù)(時間、貨幣等等),如果涉及到這些還是使用現(xiàn)成的庫來的快。

另類的嘗試

除了以上js的思路,還有沒有其他的方法呢?這不是廢話嗎,如果沒有就不會來寫這篇文章了。

下面重點來了,如何不借助js來實現(xiàn)國際化?

國際化的解決要點

實現(xiàn)國際化有兩個基本要素

語言配置

前端呈現(xiàn)

語言配置是指如何設(shè)置多語言,也就是說如何把多種語言記錄下來,就像前面js里面的配置文件。

前端配置是指如何根據(jù)需要把需要展示的語言顯示在頁面,比如在中文環(huán)境下顯示中文,英文環(huán)境下顯示英文,用戶看得到才算數(shù)。

乍一看,好像不借助js根本行不通啊,又要配置文件,又要渲染頁面內(nèi)容,簡直無解啊。

content生成技術(shù)

css中有個content生成屬性,一般配合偽類:before或者:after來使用。

可能一提到content,很多人可能就明白了,沒錯,content就可以實現(xiàn)內(nèi)容生成。

那么,試一試?

</>復(fù)制代碼

</>復(fù)制代碼

  1. /**ch**/
  2. html:lang(ch) .title:after{
  3. content: "標(biāo)題";
  4. }
  5. html:lang(ch) .paragraph:after{
  6. content: "段落";
  7. }
  8. html:lang(ch) .summary:after{
  9. content: "描述";
  10. }
  11. /**en**/
  12. html:lang(en) .title:after{
  13. content: "title";
  14. }
  15. html:lang(en) .paragraph:after{
  16. content: "paragraph";
  17. }
  18. html:lang(en) .summary:after{
  19. content: "summary";
  20. }

怎么樣?是眼前一亮還是。。很銼?

好吧,我也覺得很挫,寫起來比較麻煩,不過也是一種思路。

content+attr

上面的方式確實不怎么樣,但是思維也需要一個漸進(jìn)的過程

下面用到了使用屬性值作為content內(nèi)容,之前的用純css實現(xiàn)打星星效果(三)也使用這個特性,大家有興趣可以回過去看下,這里簡單介紹一下用法

</>復(fù)制代碼

這樣就可以通過屬性值來生成內(nèi)容。

為什么要用屬性值呢?

上一種方式之前不好原因還有一點,就是語義化太差,多帶帶看html文件完全不知道是什么內(nèi)容

</>復(fù)制代碼

下面我加點屬性

</>復(fù)制代碼

這下語義化應(yīng)該沒什么問題了吧,很清楚知道每個標(biāo)簽的內(nèi)容

大家應(yīng)該知道我要做什么了吧,如下

</>復(fù)制代碼

  1. /**ch**/
  2. html:lang(ch) [data-lang-ch]:after{
  3. content: attr(data-lang-ch);
  4. }
  5. /**en**/
  6. html:lang(en) [data-lang-en]:after{
  7. content: attr(data-lang-en);
  8. }

很簡單,各自取各自對應(yīng)的屬性即可,需要什么語言直接在html添加屬性即可,也不需要什么js

結(jié)合之前講過的css地址選擇器,可以很輕松的實現(xiàn)根據(jù)地址欄來適配各種語言

</>復(fù)制代碼

  1. [data-lang-ch]:after,
  2. #ch:target~[data-lang-ch]:after{
  3. content: attr(data-lang-ch);
  4. }
  5. #en:target~[data-lang-en]:after{
  6. content: attr(data-lang-en);
  7. }

頁面添加一點元素

</>復(fù)制代碼

  1. 中文
  2. 英文

下面是demo

小節(jié)

以上主要探討了兩種完全不同的國際化方式,前一種主流,后一種完全屬于另類,但還是有用武之地的。如果你的頁面不太復(fù)雜,完全可以采取這種方式。

沒有了js,速度也快了,視野也開闊了,腰也不酸了,腿也不疼了...

雖然以上跳過js實現(xiàn)了國際化需求,但是如果說是一些動態(tài)內(nèi)容,比如時間,就沒法放在屬性里面的,這一部分,就只能通過js來處理了,實屬無奈。。

還有一個就是,如果頁面復(fù)雜,或者需適配語言太多,那就意味著屬性要寫很多

</>復(fù)制代碼

這樣就不太友好了,這種情況下就推薦主流的js解決方式


如果喜歡的文章的話,可以點贊并收藏,多多關(guān)注我的博客

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

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

相關(guān)文章

  • 前端際化另類方式

    摘要:前不久做了一個國際化的項目,基于和,里面用到了國際化,使用方式也很簡單然后,頁面所有的官方組件都變成了中文默認(rèn)是英文。前端配置是指如何根據(jù)需要把需要展示的語言顯示在頁面,比如在中文環(huán)境下顯示中文,英文環(huán)境下顯示英文,用戶看得到才算數(shù)。 關(guān)于國際化 一個項目發(fā)展到一定的環(huán)境或者一開始就是為多國打造的,就需要考慮國際化了。簡單來說,就是一套頁面,多套語言。 前不久做了一個國際化的項目,基于...

    FullStackDeveloper 評論0 收藏0
  • 前端際化另類方式

    摘要:前不久做了一個國際化的項目,基于和,里面用到了國際化,使用方式也很簡單然后,頁面所有的官方組件都變成了中文默認(rèn)是英文。前端配置是指如何根據(jù)需要把需要展示的語言顯示在頁面,比如在中文環(huán)境下顯示中文,英文環(huán)境下顯示英文,用戶看得到才算數(shù)。 關(guān)于國際化 一個項目發(fā)展到一定的環(huán)境或者一開始就是為多國打造的,就需要考慮國際化了。簡單來說,就是一套頁面,多套語言。 前不久做了一個國際化的項目,基于...

    blastz 評論0 收藏0
  • ios設(shè)備觸發(fā)虛擬鍵盤輸入后position:fixed 無效一些簡單另類解決方法。

    摘要:所以我也不用這種方式了。。監(jiān)聽失去焦點事件然后把的屬性設(shè)置成。這樣就好了。。。。總結(jié)來說就是觸發(fā)虛擬鍵盤的時候把屬性改成虛擬鍵盤消失的時候再把屬性改回 首先看一下我要解決的問題,第一張圖是正常的情況下,第二張圖是點擊了輸入框之后的情況,就是要解決此問題~! showImg(https://segmentfault.com/img/bV2DxT?w=699&h=453);百度了一下解決方...

    melody_lql 評論0 收藏0
  • ios設(shè)備觸發(fā)虛擬鍵盤輸入后position:fixed 無效一些簡單另類解決方法。

    摘要:所以我也不用這種方式了。。監(jiān)聽失去焦點事件然后把的屬性設(shè)置成。這樣就好了。。。??偨Y(jié)來說就是觸發(fā)虛擬鍵盤的時候把屬性改成虛擬鍵盤消失的時候再把屬性改回 首先看一下我要解決的問題,第一張圖是正常的情況下,第二張圖是點擊了輸入框之后的情況,就是要解決此問題~! showImg(https://segmentfault.com/img/bV2DxT?w=699&h=453);百度了一下解決方...

    jackzou 評論0 收藏0

發(fā)表評論

0條評論

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