JS魔法堂:不徹底國際化&本地化手冊 之 拓展篇

前言

 最近加入到新項目組負責前端技術預研和選型，其中涉及到一個熟悉又陌生的需求——國際化＆本地化。熟悉的是以前的項目也玩過，陌生的是以前的實現僅僅停留在"有"的階段而已。趁着這個機會好好學習整理一下，爲後面的技術選型作準備。
 本篇做爲系列的最後一篇，打算和你們一塊兒看看HTTP的Content Negotiation機制和更多關於本地化的應用方向。

Content Negotiation(內容協同)

 記得第一次接觸國際化和本地化時是指服務端根據請求頭字段Accept-Language獲取language-tag而後向用戶返回相應的內容，這實際上是利用HTTP提供的Content Negotiation機制。
 所謂Content Negotiation機制其實就是經過Accept,Accept-Language和Accept-Encoding等請求頭字段做爲依據對存在多個可用展示方式的某一資源選擇最優的展示方式返回給用戶，如語言文化、適合在屏幕上瀏覽仍是用於打印等。
 這裏又分爲服務端協商(Server-driven Negotiation)和代理端協商(Agent-driven Negotiation)

1. Server-driven Negotiation
    就是擇優返回展示方式的算法由服務端提供的Content Negotiation就是Server-driven Negotiation了。

 通常經過Accept,Accept-Language,Accept-Encoding和User-Agent等請求頭字段做爲依據去選擇最優解。
缺點:

1. 服務端永遠沒法精準地計算出最優解，部分緣由是由於內容如何展示是由代理端決定，而請求中沒法獲取代理端的全部信息，若容許獲取代理端的全部信息，那麼網絡傳送的數據量將變大並且會涉及隱私安全的問題;

2. 服務端實現複雜度提升;

3. 因爲對於同一個url可能會返回不一樣的響應報文，所以不能利用公用的緩存去暫存響應報文，從而喪失進一步的優化空間。

1. Agent-driven Negotiation
    就是代理端從服務端接收到一個基本的響應後，而後擇優展示方式的算法由代理端(實際上就是讓用戶自行選擇最優展示方式)提供的Content Negotiation就是Agent-driven Negotiation了。

 注意這裏是先從服務端接收一個基本的響應，而後代理根據這個響應再計算最優的展示方式。那麼這個基本的響應是什麼呢？HTTP/1.1定義300(Multiple Choices)和406(Not Acceptable)兩個HTTP status code來通知代理端這個請求是的採用Agent-driven Negotiation.
 300 Multiple Choices
 當請求的資源在多個位置找到時，這些位置將以列表的形式做爲響應報文返回給用戶，由用戶自行選擇具體要訪問哪一個位置。若服務端打算推薦某個位置做爲優先選擇時，可將該位置做爲響應頭字段Location的值返回.

 406 Not Acceptable
 當服務端發現沒法知足請求頭的Accept,Accept-Charset,Accept-Encoding或Accept-Language時，則會返回406狀態編碼。所以406不是表示存在多個選擇而是表示沒有適合的選項。
缺點:

1. 通過代理端計算後，須要發起第二個請求來獲取最優展示形式的具體內容,響應延遲提升。
    綜合上述兩種方式獲得一種稱爲透明協商(Transparent Negotiation)的方式，其實就是對緩存系統做修改，讓其除URL外還能夠識別其餘請求頭字段等信息，來映射特定展示方式的響應報文。也就是說擇優算法部分仍是由服務端提供。

這裏看來國際化/本地化是Content Negotiation的子集哦！

樣式因文化而不一樣 by :lang

Selectors Level 4已經加入對BCP 47高級匹配算法的支持，即有如下玩法

<style>
:lang(en){ color: red; }
div:lang(en-GB){ color: red; }
</style>
<p>En janvier, toutes les boutiques de Londres affichent des panneaux 
<span lang="en-GB">SALE</span>, mais en fait ces magasins sont bien propres!</p>
<div lang="en-GB">BIG SALE</div>

甚至還有支持通配符*(雖然如今未被瀏覽器支持)

<style>
:lang(*-CH){color: red}
</style>
<p lang="de-CH">Hi guy!</p>
<p lang="it-CH">Hi man!</p>

總結

本系列粗略概括了國際化&本地化相關內容，如有紕漏請各位指正，謝謝！
尊重原創，轉載請註明來自:　http://www.cnblogs.com/fsjohn... ^_^肥仔John

感謝

HTTP 請求406如何解決？有截圖
趣解HTTP狀態碼