資訊專欄INFORMATION COLUMN
摘要：前不久做了一個(gè)國際化的項(xiàng)目，基于和，里面用到了國際化，使用方式也很簡(jiǎn)單然后，頁面所有的官方組件都變成了中文默認(rèn)是英文。前端配置是指如何根據(jù)需要把需要展示的語言顯示在頁面，比如在中文環(huán)境下顯示中文，英文環(huán)境下顯示英文，用戶看得到才算數(shù)。
關(guān)于國際化
一個(gè)項(xiàng)目發(fā)展到一定的環(huán)境或者一開始就是為多國打造的，就需要考慮國際化了。簡(jiǎn)單來說，就是一套頁面，多套語言。
前不久做了一個(gè)國際化的項(xiàng)目，基于react和antd，里面用到了國際化，使用方式也很簡(jiǎn)單
import zhCN from "antd/lib/locale-provider/zh_CN"; return ();
然后，頁面所有的官方組件都變成了中文（默認(rèn)是英文）。
如果你使用其他工程，也有相應(yīng)的解決方案，比如
vue + vue-i18n
angular + angular-translate
react + react-intl
jquery + jquery.i18n.property
具體使用方式可以自行搜索，無非就是看各種api和配置文件。
可以說相當(dāng)成熟了，那么，如何自己實(shí)現(xiàn)？
國際化的實(shí)現(xiàn)原理其實(shí)原理很簡(jiǎn)單，這里只講最基本的原理，不談框架的特性。
上面列舉這里這么多js框架，有一個(gè)共同的特征，就是都有一個(gè)類似語言包的東西。
zh.json en.json jp.json ...
這個(gè)也很好理解，把各種語言獨(dú)立開來，便于管理和維護(hù)。
便于測(cè)試，我們把請(qǐng)求的過程去掉了，直接寫在一個(gè)json對(duì)象里面，如下
intl.js
var intl =
{
"zh": {
"title": "測(cè)試",
"content": "這是一個(gè)測(cè)試"
},
"cn": {
"title": "test",
"content": "this is a test"
}
}
大概會(huì)寫一些這樣的配置語言，然后通過某種手段把對(duì)應(yīng)的字段設(shè)置到相應(yīng)的位置就可以了。
下面是偽代碼
測(cè)試
這是一個(gè)測(cè)試
var lang = getGlobalVar("LOCALE")||"zh";//獲取語言
var local = intl["lang"];
$title.innerHTML = local["title"];
$content.innerHTML = local["content"];
上面是一個(gè)簡(jiǎn)單的實(shí)現(xiàn)思路，如果是一個(gè)簡(jiǎn)單的靜態(tài)頁面，大可以用這種方式，也不需要引入一些第三方庫，然后啃他的api。
當(dāng)然，國際化還遠(yuǎn)不止頁面靜態(tài)文字的簡(jiǎn)單翻譯，還包括本地化服務(wù)（時(shí)間、貨幣等等），如果涉及到這些還是使用現(xiàn)成的庫來的快。
另類的嘗試除了以上js的思路，還有沒有其他的方法呢？這不是廢話嗎，如果沒有就不會(huì)來寫這篇文章了。
下面重點(diǎn)來了，如何不借助js來實(shí)現(xiàn)國際化？
國際化的解決要點(diǎn)實(shí)現(xiàn)國際化有兩個(gè)基本要素
語言配置
前端呈現(xiàn)
語言配置是指如何設(shè)置多語言，也就是說如何把多種語言記錄下來，就像前面js里面的配置文件。
前端配置是指如何根據(jù)需要把需要展示的語言顯示在頁面，比如在中文環(huán)境下顯示中文，英文環(huán)境下顯示英文，用戶看得到才算數(shù)。
乍一看，好像不借助js根本行不通啊，又要配置文件，又要渲染頁面內(nèi)容，簡(jiǎn)直無解啊。
content生成技術(shù)css中有個(gè)content生成屬性，一般配合偽類:before或者:after來使用。
可能一提到content，很多人可能就明白了，沒錯(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";
}
怎么樣？是眼前一亮還是。。很銼？
好吧，我也覺得很挫，寫起來比較麻煩，不過也是一種思路。
content+attr上面的方式確實(shí)不怎么樣，但是思維也需要一個(gè)漸進(jìn)的過程
下面用到了使用屬性值作為content內(nèi)容，之前的用純css實(shí)現(xiàn)打星星效果（三）也使用這個(gè)特性，大家有興趣可以回過去看下，這里簡(jiǎn)單介紹一下用法
這樣就可以通過屬性值來生成內(nèi)容。
為什么要用屬性值呢？
上一種方式之前不好原因還有一點(diǎn)，就是語義化太差，多帶帶看html文件完全不知道是什么內(nèi)容
下面我加點(diǎn)屬性
這下語義化應(yīng)該沒什么問題了吧，很清楚知道每個(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)的屬性即可，需要什么語言直接在html添加屬性即可，也不需要什么js
結(jié)合之前講過的css地址選擇器，可以很輕松的實(shí)現(xiàn)根據(jù)地址欄來適配各種語言
[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);
}
頁面添加一點(diǎn)元素
中文
英文
下面是demo
小節(jié)以上主要探討了兩種完全不同的國際化方式，前一種主流，后一種完全屬于另類，但還是有用武之地的。如果你的頁面不太復(fù)雜，完全可以采取這種方式。
沒有了js，速度也快了，視野也開闊了，腰也不酸了，腿也不疼了...
雖然以上跳過js實(shí)現(xiàn)了國際化需求，但是如果說是一些動(dòng)態(tài)內(nèi)容，比如時(shí)間，就沒法放在屬性里面的，這一部分，就只能通過js來處理了，實(shí)屬無奈。。
還有一個(gè)就是，如果頁面復(fù)雜，或者需適配語言太多，那就意味著屬性要寫很多
這樣就不太友好了，這種情況下就推薦主流的js解決方式
如果喜歡的文章的話，可以點(diǎn)贊并收藏，多多關(guān)注我的博客
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/99253.html
摘要：前不久做了一個(gè)國際化的項(xiàng)目，基于和，里面用到了國際化，使用方式也很簡(jiǎn)單然后，頁面所有的官方組件都變成了中文默認(rèn)是英文。前端配置是指如何根據(jù)需要把需要展示的語言顯示在頁面，比如在中文環(huán)境下顯示中文，英文環(huán)境下顯示英文，用戶看得到才算數(shù)。 關(guān)于國際化 一個(gè)項(xiàng)目發(fā)展到一定的環(huán)境或者一開始就是為多國打造的，就需要考慮國際化了。簡(jiǎn)單來說，就是一套頁面，多套語言。 前不久做了一個(gè)國際化的項(xiàng)目，基于...
摘要：前不久做了一個(gè)國際化的項(xiàng)目，基于和，里面用到了國際化，使用方式也很簡(jiǎn)單然后，頁面所有的官方組件都變成了中文默認(rèn)是英文。前端配置是指如何根據(jù)需要把需要展示的語言顯示在頁面，比如在中文環(huán)境下顯示中文，英文環(huán)境下顯示英文，用戶看得到才算數(shù)。 關(guān)于國際化 一個(gè)項(xiàng)目發(fā)展到一定的環(huán)境或者一開始就是為多國打造的，就需要考慮國際化了。簡(jiǎn)單來說，就是一套頁面，多套語言。 前不久做了一個(gè)國際化的項(xiàng)目，基于...
摘要：所以我也不用這種方式了。。監(jiān)聽失去焦點(diǎn)事件然后把的屬性設(shè)置成。這樣就好了。。。。總結(jié)來說就是觸發(fā)虛擬鍵盤的時(shí)候把屬性改成虛擬鍵盤消失的時(shí)候再把屬性改回 首先看一下我要解決的問題，第一張圖是正常的情況下，第二張圖是點(diǎn)擊了輸入框之后的情況，就是要解決此問題~！ showImg(https://segmentfault.com/img/bV2DxT?w=699&h=453);百度了一下解決方...
摘要：所以我也不用這種方式了。。監(jiān)聽失去焦點(diǎn)事件然后把的屬性設(shè)置成。這樣就好了。。。?？偨Y(jié)來說就是觸發(fā)虛擬鍵盤的時(shí)候把屬性改成虛擬鍵盤消失的時(shí)候再把屬性改回 首先看一下我要解決的問題，第一張圖是正常的情況下，第二張圖是點(diǎn)擊了輸入框之后的情況，就是要解決此問題~！ showImg(https://segmentfault.com/img/bV2DxT?w=699&h=453);百度了一下解決方...
閱讀 1177·2021-09-22 16:04
閱讀 1554·2019-08-30 15:43
閱讀 1183·2019-08-29 14:01
閱讀 3497·2019-08-26 12:19
閱讀 3414·2019-08-26 12:15
閱讀 1501·2019-08-26 12:13
閱讀 3325·2019-08-23 17:00
閱讀 1556·2019-08-23 15:38
