第十三周 2017-11-03

[yinkaihui]

-谈谈我对函数式编程的理解
里面附带了月影《如何写“好” JavaScript》的ppt。
文章和ppt的干货都挺多的。文章里举了几个常见的高阶函数在实际应用的例子，节流，连击，执行一次。函数式编程实际上就是很多个高阶函数组装完成了一个复杂的功能。周末我得在看看，还没看完 = . =

-Vue项目架构设计与实践
从0~1搭建一个前后端分离的vue项目详细过程

[wangnan0610]

从Chrome源码看浏览器如何加载资源
有时间可以研究下，不一定要看源码

[sunhengzhe]

• Designing Websites for iPhone X

提供适配 iphoneX 的方法。概括来讲：

1. 为了避免 iphoneX 的刘海和底部出现空白，苹果已经把 viewport-fit 增加到了 CSS Round Display 规范中。通过设置 viewport-fit 的值让 viewport 填充满整个屏幕。

<meta name='viewport' content='initial-scale=1, viewport-fit=cover’>

实际上 viewport-fit 目前只在 iOS 11+ 上支持，所以如果直接在 meta 中添加浏览器会出现讨厌的 The key "viewport-fit" is not recognized and ignored. 警告。可以参考这个 issue 使用 js 添加。

2. 为了避免填充满屏幕后页面内容被刘海底部挡住，使用 env 函数设置 padding 值。

.post {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

env 也是苹果添加的一种方法，并向 CSS 工作组提出了标准化的建议。他们引入了 User Agent properties 的概念，用来在 css 中使用用户代理提供的变量，比如 safe-area-inset-left 等，参考 [css-variables] User Agent properties and variables #1693。
注意一开始苹果提出的是 constant 方法，最后 CSS 工作组讨论后变更为 env 方法，所以在 IOS 11 中，仅支持 constant，而在 iOS 11.2+ 中移除了 constant，替换为 env

3. env 支持使用 calc() 方法进行计算

.post {
    padding-left: calc(env(safe-area-inset-left) + 12px);
}