国家信息资源

hellox

2018-01-30

前端, 资源

最近有一个选择各国国际电话区号（calling code）的需求。
搜了很多相关的资源，分享一下。

注意：国际电话区号跟国家地区并非一一对应的关系，部分国家地区可能存在多个区号。

国家代码

国家地区代码 - 维基百科，自由的百科全书
这里使用的是 ISO 3166-1 二位字母代码（一般都是用这个）。

国旗

GitHub - hjnilsson/country-flags: SVG and PNG renders of all countries’ flags.
下载并且按照步骤生成自己想要的尺寸，文件命名规范，也是使用 ISO 3166-1 二位字母代码。

CSS Sprite Generator, Editor, and Code
在线生成雪碧图，导入所有需要的图片，生成相应的雪碧图和css文件。
由于各国国旗的比例并不是一致的，所以选择竖排国旗，最大程度减小雪碧图体积。

TinyPNG – Compress PNG images while preserving transparency
压缩雪碧图，图片压缩方式很多。当然也可以用构建工具压缩。

GitHub - ZENGzoe/Stylesheet: 自动合成雪碧图方法
用于调整雪碧图的单位px=>rem。
这个暂时没有实践，一个是要搭环境，比较麻烦，另一个是可能有单位换算不精确的风险。

国际电话区号

GitHub - jackocnr/intl-tel-input: A jQuery plugin for entering and validating international telephone numbers
功能相当完整的jQuery插件，集成了很多库，支持选择区号以及格式校验。但是由于需求本身不需要校验，加上我极度不想要引入jQuery，所以没有选用这个。

libphonenumber/javascript at master · googlei18n/libphonenumber · GitHub
Google 出的一个库，验证手机号码是否有效，资源比较大，需要安装编译。
上面的intl-tel-input也集成了这个库，并且提供了异步加载方案。

要啥有啥

Country.io
这个网站提供各国信息，还有可下载的数据资源，但是不太完整（部分国际电话区号是空的）。
最终没有使用。

GitHub - mledoze/countries: World countries in JSON, CSV, XML and Yaml. Any help is welcome!
各种国家信息，需要php编译。
由于这个编译看上去就很麻烦，所以我选择先观望。之后我找到了下面这个资源。

GitHub - hengkiardo/restcountries: Get information about countries via a RESTful API (Node.JS Version)
用node.js写的，用来获取各个国家信息的RESTful风格接口。而它的数据来源于上面的project。
直接用示例请求https://restcountries.herokuapp.com/api/v1，获取所有国家的数据，然后只要写一小段代码处理一下数据就好了（筛选出需要的信息并组织，同时按照国家首字母进行排序）……YEEEEEEES!!!!
最终的结构大致如下：

export default [
  {
    "name": "Afghanistan",
    "code": "AF",
    "callingCode": "93"
  },
  {
    "name": "Åland Islands",
    "code": "AX",
    "callingCode": "358"
  },
  {
    "name": "Albania",
    "code": "AL",
    "callingCode": "355"
  },
  //...
]

开发中的小问题

overflow: scroll;这一css属性可以让超出既定长度的容器滚动起来。
但是在ios safari中，滚动会变得十分生硬艰难，手指一离开屏幕，滑动就会立刻停止。
如何能够做到“惯性滚动”呢，解决方案如下：
🦉CSS - iOS safari 开启物理惯性滚动支持 - 开发哥

性能问题的思考

一开始想了很多方案，比如国家信息和国旗图片dataURL存在一个json里，通过网络请求获取，不过由于页面一进入就需要用户看到预制的国家信息，同时可以点击进行选择，这个操作是不可以阻塞的。

所以最终还是从需求的优先级出发，选择加载策略：

国旗用雪碧图的方式进行加载，不会阻塞整个网页的显示和用户的操作（而实际上国旗雪碧图最终压缩到了50k，也不是很大）。
国家信息（见上文）作为模块跟页面逻辑一起打包压缩进bundle（44k）。

其实还可以用PWA缓存资源和请求，以及用AMP加快加载速度和优化体验，不过当时没有想到，后续可以往这些方面优化。