专栏首页偏前端工程师的驿站JS魔法堂:不完全国际化&本地化手册 之 拓展篇

JS魔法堂:不完全国际化&本地化手册 之 拓展篇

前言

 最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求——国际化&本地化。熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已。趁着这个机会好好学习整理一下,为后面的技术选型做准备。  本篇作为系列的最后一篇,打算和大家一起看看HTTP的Content Negotiation机制和更多关于本地化的应用方向。

Content Negotiation(内容协同)

 记得第一次接触国际化和本地化时是指服务端根据请求头字段Accept-Language获取language-tag然后向用户返回相应的内容,这其实是利用HTTP提供的Content Negotiation机制。  所谓Content Negotiation机制其实就是通过Accept,Accept-LanguageAccept-Encoding等请求头字段作为依据对存在多个可用展现方式的某一资源选择最优的展现方式返回给用户,如语言文化、适合在屏幕上浏览还是用于打印等。  这里又分为服务端协商(Server-driven Negotiation)和代理端协商(Agent-driven Negotiation)

  1. Server-driven Negotiation  就是择优返回展现方式的算法由服务端提供的Content Negotiation就是Server-driven Negotiation了。  一般通过Accept,Accept-Language,Accept-EncodingUser-Agent等请求头字段作为依据去选择最优解。 缺点:

a. 服务端永远无法精准地计算出最优解,部分原因是因为内容如何展现是由代理端决定,而请求中无法获取代理端的所有信息,若允许获取代理端的所有信息,那么网络传送的数据量将变大而且会涉及隐私安全的问题;

b. 服务端实现复杂度提高;

c. 由于对于同一个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-EncodingAccept-Language时,则会返回406状态编码。因此406不是表示存在多个选择而是表示没有适合的选项。 缺点:

a. 经过代理端计算后,需要发起第二个请求来获取最优展现形式的具体内容,响应延迟提高。  综合上述两种方式得到一种称为透明协商(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 请求406如何解决?有截图 趣解HTTP状态码

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS魔法堂:LINK元素深入详解

    一、前言                               我们一般使用方式为 <link type="text/css" rel="styleshe...

    ^_^肥仔John
  • CentOS6.5菜鸟之旅:关于搜索的shell命令

    一、locate命令                             用于模糊搜索文件(目录)的绝对路径。    示例1: // 凡是绝对路径当中含jd...

    ^_^肥仔John
  • JS魔法堂:阻止元素被选中

    一、前言                               在为IE5.5~9polyfill HTML5新特性placeholder时需要阻止元素被...

    ^_^肥仔John
  • 十大无线技术发展趋势

    无线技术在当今的通信中发挥着关键作用,其新型无线技术将成为未来五年内新兴技术的核心。

    物流IT圈
  • 安恒信息受邀出席全球未来网络发展峰会 “宁聚” 网络强国新力量

    以“创新 引领 未来”为主题的2018第二届全球未来网络发展峰会5月11日-12日在南京江宁未来网络小镇隆重举行。400多名国内外未来网络领域的专家、学者及知名...

    安恒信息
  • 系统架构师论文-论计算机网络的安全性设计(证券网络交易系统)

    我在一家证券公司信息技术部门工作,我公司在97-98年建成了与各公司总部及营业网点的企业网络,并已先后在企业网络上建设了交易系统、办公系统,并开通了互联网应用。...

    cwl_java
  • 【云安全】云计算中常见的网络虚拟化

    将物理网络利用某种形式的虚拟网络技术来抽象并创建网络资源池的,我们称之为网络虚拟化,目前绝大多数的云厂商都是利用某种形式的虚拟化网络(SDN)来抽象对应的物理网...

    一只特立独行的兔先生
  • 网络切片在5G中的应用

    5G和网络切片 当5G被广泛提及的时候,网络切片是其中讨论最多的技术。像KT、SK Telecom、China Mobile、DT、KDDI、NTT等网络运营商...

    SDNLAB
  • wordpress默认css样式class和id集合

      你是否想过如何设计WordPress主题的不同元素?每个主题都不一样,但是有一些CSS的class和id是由WordPress生成的。我们将逐一介绍一些最重...

    ytkah
  • SAP S/4HANA key user tool extensibility原理

    问题就是不同的系统这个 UIs and Reports 里的显示逻辑不一样。 在 GRE210 连 XT9/715 上,里面只会显示 OData 出来,我 de...

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券