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

一個(gè)項(xiàng)目發(fā)展到一定的環(huán)境或者一開(kāi)始就是為多國(guó)打造的，就需要考慮國(guó)際化了。簡(jiǎn)單來(lái)說(shuō)，就是一套頁(yè)面，多套語(yǔ)言。

前不久做了一個(gè)國(guó)際化的項(xiàng)目，基于react和antd，里面用到了國(guó)際化，使用方式也很簡(jiǎn)單

import zhCN from "antd/lib/locale-provider/zh_CN";

return (
  
    
  
);

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

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

vue + vue-i18n

angular + angular-translate

react + react-intl

jquery + jquery.i18n.property

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

可以說(shuō)相當(dāng)成熟了，那么，如何自己實(shí)現(xiàn)？

其實(shí)原理很簡(jiǎn)單，這里只講最基本的原理，不談框架的特性。

上面列舉這里這么多js框架，有一個(gè)共同的特征，就是都有一個(gè)類似語(yǔ)言包的東西。

zh.json
en.json
jp.json
...

這個(gè)也很好理解，把各種語(yǔ)言獨(dú)立開(kāi)來(lái)，便于管理和維護(hù)。

便于測(cè)試，我們把請(qǐng)求的過(guò)程去掉了，直接寫(xiě)在一個(gè)json對(duì)象里面，如下

intl.js

var intl = 
{
    "zh": {
        "title": "測(cè)試",
        "content": "這是一個(gè)測(cè)試"
    },
    "cn": {
        "title": "test",
        "content": "this is a test"
    }
}

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

下面是偽代碼

測(cè)試
這是一個(gè)測(cè)試

var lang = getGlobalVar("LOCALE")||"zh";//獲取語(yǔ)言
var local = intl["lang"];

$title.innerHTML = local["title"];
$content.innerHTML = local["content"];

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

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

除了以上js的思路，還有沒(méi)有其他的方法呢？這不是廢話嗎，如果沒(méi)有就不會(huì)來(lái)寫(xiě)這篇文章了。

下面重點(diǎn)來(lái)了，如何不借助js來(lái)實(shí)現(xiàn)國(guó)際化？

實(shí)現(xiàn)國(guó)際化有兩個(gè)基本要素

語(yǔ)言配置

前端呈現(xiàn)

語(yǔ)言配置是指如何設(shè)置多語(yǔ)言，也就是說(shuō)如何把多種語(yǔ)言記錄下來(lái)，就像前面js里面的配置文件。

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

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

css中有個(gè)content生成屬性，一般配合偽類:before或者:after來(lái)使用。

可能一提到content，很多人可能就明白了，沒(méi)錯(cuò)，content就可以實(shí)現(xiàn)內(nèi)容生成。

那么，試一試？

/**ch**/
html:lang(ch) .title:after{
  content: "標(biāo)題";
}
html:lang(ch) .paragraph:after{
  content: "段落";
}
html:lang(ch) .summary:after{
  content: "描述";
}
/**en**/
html:lang(en) .title:after{
  content: "title";
}
html:lang(en) .paragraph:after{
  content: "paragraph";
}
html:lang(en) .summary:after{
  content: "summary";
}

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

好吧，我也覺(jué)得很挫，寫(xiě)起來(lái)比較麻煩，不過(guò)也是一種思路。

上面的方式確實(shí)不怎么樣，但是思維也需要一個(gè)漸進(jìn)的過(guò)程

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

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

為什么要用屬性值呢？

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

下面我加點(diǎn)屬性

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

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

/**ch**/
html:lang(ch) [data-lang-ch]:after{
  content: attr(data-lang-ch);
}
/**en**/
html:lang(en) [data-lang-en]:after{
    content: attr(data-lang-en);
}

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

結(jié)合之前講過(guò)的css地址選擇器，可以很輕松的實(shí)現(xiàn)根據(jù)地址欄來(lái)適配各種語(yǔ)言

[data-lang-ch]:after,
#ch:target~[data-lang-ch]:after{
    content: attr(data-lang-ch);
}
#en:target~[data-lang-en]:after{
    content: attr(data-lang-en);
}

頁(yè)面添加一點(diǎn)元素

    

    

    

    

    


    中文
    英文

下面是demo

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

沒(méi)有了js，速度也快了，視野也開(kāi)闊了，腰也不酸了，腿也不疼了...

雖然以上跳過(guò)js實(shí)現(xiàn)了國(guó)際化需求，但是如果說(shuō)是一些動(dòng)態(tài)內(nèi)容，比如時(shí)間，就沒(méi)法放在屬性里面的，這一部分，就只能通過(guò)js來(lái)處理了，實(shí)屬無(wú)奈。。

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

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

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