前端國際化的另類方式

FullStackDeveloper 發布于2019-08-23 13:09 / 2379人閱讀

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

關于國際化

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

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

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

return (
  
    
  
);

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

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

vue + vue-i18n

angular + angular-translate

react + react-intl

jquery + jquery.i18n.property

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

可以說相當成熟了，那么，如何自己實現？

國際化的實現原理

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

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

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

這個也很好理解，把各種語言獨立開來，便于管理和維護。

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

intl.js

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

大概會寫一些這樣的配置語言，然后通過某種手段把對應的字段設置到相應的位置就可以了。

下面是偽代碼

測試

這是一個測試

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

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

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

當然，國際化還遠不止頁面靜態文字的簡單翻譯，還包括本地化服務（時間、貨幣等等），如果涉及到這些還是使用現成的庫來的快。

另類的嘗試

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

下面重點來了，如何不借助js來實現國際化？

國際化的解決要點

實現國際化有兩個基本要素

語言配置

前端呈現

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

前端配置是指如何根據需要把需要展示的語言顯示在頁面，比如在中文環境下顯示中文，英文環境下顯示英文，用戶看得到才算數。

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

content生成技術

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

可能一提到content，很多人可能就明白了，沒錯，content就可以實現內容生成。

那么，試一試？

/**ch**/
html:lang(ch) .title:after{
  content: "標題";
}
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

上面的方式確實不怎么樣，但是思維也需要一個漸進的過程

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

這樣就可以通過屬性值來生成內容。

為什么要用屬性值呢？

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

下面我加點屬性

這下語義化應該沒什么問題了吧，很清楚知道每個標簽的內容

大家應該知道我要做什么了吧，如下

/**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);
}

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

結合之前講過的css地址選擇器，可以很輕松的實現根據地址欄來適配各種語言

[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);
}

頁面添加一點元素

下面是demo

小節

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

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

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

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

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

如果喜歡的文章的話，可以點贊并收藏，多多關注我的博客

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99253.html

前端國際化的另類方式

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

everfight 2019-08-02 11:59 評論0 收藏0
前端國際化的另類方式

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

blastz 2019-08-29 17:14 評論0 收藏0
ios設備觸發虛擬鍵盤輸入后position:fixed 無效的一些簡單另類的解決方法。

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

melody_lql 2019-08-01 18:26 評論0 收藏0
ios設備觸發虛擬鍵盤輸入后position:fixed 無效的一些簡單另類的解決方法。

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

jackzou 2019-06-28 18:20 評論0 收藏0