前言

最近项目需要实现一个 fixed 标题栏的功能，很普通的功能，实现核心也是在 sroll 事件中切换到 fixed 状态即可，但是在某些版本 ios 的某些内核中，在惯性滚动过程中不执行任何 js 代码，亦即不会触发 scroll 事件，基本任何事情都做不了，为了解决这个问题不得不使用 div 内滚动，然后使用 iscroll 库实现滚动逻辑。

基于使用过程中的一些问题，抱着学习的态度，稍微看了一下源代码，现把学习所得记录如下。

源代码学习

核心实现

滑动相关组件（如 swipe 库）的实现基本都是类似的，就是通过 3 个核心事件：touchstart，touchmove，touchend 完成操作。

注：下面的源码只罗列核心部分，而且只展示 y 轴方向

touchstart 需要做的事情有：

touchmove 需要做的事情有：

touchend 需要做的事情有：

基本所有滑动相关的组件所做的事情都是这些，都可以借鉴一二的。

特殊 css prefix 缓存

用 js 处理特殊 css 的时候，可以先缓存 prefix，这样就不用每次都操作所有的内置属性

事件绑定

addEventListener 绑定事件可以传入一个对象而不是一个 cb 函数，事件触发的时候，就会调用该对象的 handleEvent 方法来处理事件。例如：

这种绑定方式的优点有：

1. 删除事件方便
2. 事件集中处理
3. 程序结构清晰

还记得那种绑定事件时 bind(this) 的日子吗。。。
这种方式也方便了实现事件代理

事件触发频率调整

对于一些触发频率较高的事件，我们通常会控制一下事件处理的频率，例如 scroll，resize 事件。
另一方面，在实现一个公共组件的时候可以考虑从组件本身来解决这个问题，iScroll 通过配置来设置 scroll 事件的触发频率

缺点与使用问题

下面是针对版本 5.1.3 的 iscroll 使用过程中的一些问题

1. 没有插件版

iScroll 没有 zepto/jquery 插件版本，一些基础方法都需要自己实现，导致了库的体积偏大。

2. 没有暴露停止滑动（惯性滑动）的接口

通过查看源代码找到了停止滑动的方法，如下：

3. 调用 scrollTo 方法不会触发 scroll 事件

可以通过 scrollTo 方法来手动滑动，但是这样的滑动过程是不会触发 scroll 事件的。

总结

在使用 iScroll 的过程中遇到不少坑，但使用起来还是比较容易的，文档也比较齐全。
iScroll 在实现上也非常成熟，里面许多实现细节都是值得学习的

09. 打破规则

如之前所提到过，在极简主义中，你可以尝试到在其它风格中不可能实现的可能，这也就意味着，需要略微突破一下规则。就这个 Ruby Wight 所设计的 LOGO 字体来说，其中一半的字母都颠倒排放看起来是个不可思议的决定，放在任何其它设计风格中，这都会造成不易阅读的困扰。但是，好在这款品牌设计极度简洁，摒弃所有不必须的元素，令这貌似疯狂的想法最终倒呈现出了良好的视觉效果。

10. 字体的图形化

字体是不可忽视的重要武器，对极简主义尤为如此。它可以被用作视觉元素，根据所需状况调整其形态。譬如这个意大利 Vogue 中的页面，字体展现出水流波纹的视觉效果，无需多余元素，便令设计概念清晰简洁。

11. 妙用留白空间

留白亦被称之为 “负空间”，有时候看起来只是空白而已，但是它绝不仅于此！巧妙留白可令设计平衡，避免杂乱，让画面呼吸起来。Studioahamed 的此款版面设计充分使用留白，达成了高大上的极简风格。

12. 挖掘可能

有什么比纯白色调更简约的呢？设计绝不止于屏幕，在印刷工艺中隐藏着各种可能，有机会让你的设计脱颖而出。凸板印刷及凹凸效果可以为极简风格设计增色不少，大家可以从 Adam Buente 的设计中感受到。

13. 关于材质

当我们在尝试极简主义时，常会只使用纯色以保画面简洁，但是极简主义并非如此。带入一些材质背景可以为设计增加深度，增强效力，同时也不会影响到风格的简约。在 Watts Design 的品牌及网站设计中，我们可以发现，其实材质图片与简洁纯色搭配特别能达成平衡感，这些简约的照片和标示组合成为极具感染力的设计。

14. 跳出固定思维

毫不夸张地说，在极简主义中，你可以突破常规思维，把玩元素的位置和构图，Gregmadeit 的版面设计就是个很好的例子。字母极度靠边排放，呈现出独特的效果，十分引人注目，同时，也保证了文字的可读性。

15. 直截了当

当去除了所有多余元素后，你就可以更直接地表达信息与沟通。这一特点在网站设计中尤为实用，我们总是速速浏览网页，寻找直接有效的信息。在 Nine Sixty 的网站案例中，读者可以在第一时间了解到他们是谁。

16. 放大放大

在极简主义中，你可以决定读者最先看到什么，要做到这一点的诀窍就是把控尺寸。看一下 Saturdays Magazine 的这个版面，就能发现第一眼定是落在最大的元素上——右页中的大标语，而后是照片，最终是文字。在一个简约设计中，对元素尺寸的把握可以帮你决定读者的视觉阅读路线。

17. 不只有黑白

很多人认为极简风格只使用单色，但事实并不如此。在用色上，我们可以既抓人眼球又保持简约，只要尽可能保持最少用色（1-3 个颜色最佳）。Moruba 的这款案例选用明黄与黑白搭配，十分醒目显眼（仍然是简约风格）。

![][9]

当你在观看《纸牌屋》的过程中，哪些品牌曾引起了你的注意？

克莱尔·安德伍德（由罗宾·怀特饰演）在影片中通常会使用苹果的 iPhone；雷米·丹顿（由马赫沙拉·阿里饰演）则会驾驶着通用汽车公司的别克；弗兰西斯·安德伍德（由凯文·史派西饰演）佩戴的手表一直都是万国手表。

在《纸牌屋》第三季中一共出现了 105 个不同的品牌。 105 个品牌听起来好像很多，然而和《纸牌屋》第一、二季的 129 个品牌和 134 个品牌相比，则出现小幅下降。

Concave 是一家专门跟踪并分析电视节目和电影中品牌出镜情况的市场研究公司，他们追踪了三季《纸牌屋》中出现的所有品牌，在最新一季的节目追踪中，排名前十的企业有六家为科技公司，分别为：苹果（第一）、亚美亚（第五）、诺基亚（第七）、三星（第八）、黑莓（第九）和戴尔（第十）。

当然，上述排名只是第三季节目中的排名，如果想要了解每一个季度的 TOP 20 品牌排名可以查看下面这张图片：

从上图中可以看出，苹果公司在三季共 39 集剧集中都亮相了；亚美亚、黑莓、戴尔和三星在三季中的亮相次数虽然不如苹果那么高，但也都超过了 30 集；最有趣的是诺基亚，在第一季节目中完全没有出现过，而在第二、三季分别出现 8 次和 12 次。

在上图中，展示了三季节目中不同品牌的明显程度，虽然有不少品牌出镜了，但仍有部分品牌展现的并非十分明显。可以从图中看出，苹果在每一季中都是最为明显的品牌；而三星则是上升最为明显的品牌，三星从第一季排名前十开外，达到了第三季的第二名，几乎和苹果不相上下。

下图展示了剧集中，不同人物所使用的 TOP 5 品牌:

就如图片中所说的一样，苹果在八名演员中占据了四席，与此同时三星在此胜出，占据了 7 席。

那么这些品牌广告在剧集中出现的时长加在一起有多久呢？根据 Concave 的数据显示，在第三季中的广告时长为 3 小时 55 分，这一时长比第一季要长，比第二季短。

虽然苹果可能是三季节目中整体明显程度最高的品牌，但是 Concave 指出，三星在 24% 的时间里都是以特写的方式出现，而苹果只有 3%。

想要查看出境的所有 105 个品牌，可以点击原文查看。

via businessinsider

【本文版权归雷锋网所有，未经许可不得转载。文章仅代表作者看法，如有不同观点，欢迎添加雷锋网微信公众号（微信号：leiphone-sz）进行交流。】

这个作者太任性, 随意黑!