iPhone X 网页设计

2017-10-17

原文地址：Designing Websites for iPhone X

原文作者：Timothy Horton

译文出自：掘金翻译计划

本文永久链接：https://github.com/xitu/gold-miner/blob/master/TODO/designing-websites-for-iphone-x.md

译者：Hyde Song

校对者：Larry Vernon

在最新发布 iPhone X 的全面屏上，Safari 可以精美地显示现有的网站。内容自动嵌入到显示屏的安全区域内，以免被圆角、原深感摄像头系统的空间遮挡住。

凹槽部分填充了页面的 background-color (比如指定为 <body> 或 <html> 元素的背景颜色)，这样就和页面其余部分混合在一起。对于许多网站来说，这已经足够了。如果你的页面在背景色上只有文本和图片，那么默认的凹槽部分看起来也非常不错。

对于其他页面 —— 特别是那些设计全宽水平导航栏的页面，比如像下图的页面，可以选择稍微深入一点，充分利用新显示的功能。 iPhone X 人机界面指南详细介绍了一些通用的设计原则，并且 UIKit 文档讨论了原生 app 可以采用的特定机制，以确保它们看起来不错。你的网站可以利用 iOS 11 中引入的一些类似 WebKit API 来充分利用显示器边缘到边缘的特性。

在阅读这篇文章的时候，你可以点击任何图片来访问相应的 Demo 页，并查看源代码：

Safari 的默认内嵌行为。

展开全文 >>

web前端开发必看的14本书！

2017-09-22

css

《CSS权威指南》第三版
《CSS那些事儿》
《精通CSS：高级Web标准解决方案》第二版
《CSS禅意花园》

javascript

《JavaScriptDOM编程艺术》
《JavaScript权威指南》第6版
《JavaScript高级程序设计》第三版
《高性能JavaScript》
《JavaScript王者归来》
《JavaScript模式》
《JavaScript设计模式》

jQUery

《锋利的jQuery》第二版

性能

《高性能网站建设指南》
《web敏捷开发之道》

展开全文 >>

this、apply、call、bind（补充）

2017-09-21

文章标题

JS 中的函数调用

看到留言说，很多童靴不理解为什么例 6 的 innerFunction 和例 7 的 this 是指向 window 的，所以我就来补充一下 JS 中的函数调用。

展开全文 >>

为什么 call 比 apply 快？

2017-09-21

本文转载自： https://juejin.im/post/59c0e13b5188257e7a428a83?utm_source=gold_browser_extension

这是一个非常有意思的问题。

在看源码的过程中，总会遇到这样的写法：

var triggerEvents = function(events, args) {
    var ev, i = -1, l = events.length, a1 = args[0], a2 = args[1], a3 = args[2];
    switch (args.length) {
      case 0: while (++i < l) (ev = events[i]).callback.call(ev.ctx); return;
      case 1: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1); return;
      case 2: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2); return;
      case 3: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2, a3); return;
      default: while (++i < l) (ev = events[i]).callback.apply(ev.ctx, args); return;
    }
};

（代码来自 backbone ）

作者会在参数为3个（包含3）以内时，优先使用 call 方法进行事件的处理。而当参数过多（多余3个）时，才考虑使用 apply 方法。

展开全文 >>

this、apply、call、bind

2017-09-21

这又是一个面试经典问题~/(ㄒoㄒ)/~~也是 ES5中众多坑中的一个，在 ES6 中可能会极大避免 this 产生的错误，但是为了一些老代码的维护，最好还是了解一下 this 的指向和 call、apply、bind 三者的区别。

本文首发于：cherryblog.site/

this 的指向

在 ES5 中，其实 this 的指向，始终坚持一个原理：this 永远指向最后调用它的那个对象，来，跟着我朗读三遍：this 永远指向最后调用它的那个对象，this 永远指向最后调用它的那个对象，this 永远指向最后调用它的那个对象。记住这句话，this 你已经了解一半了。

展开全文 >>