前言
世上没有绝对的公平，只是看成本。今日早读文章由轻芒@范怀宇分享。
正文从这开始～～
回到今天的主题：交互。首先要搞清楚什么是交互，在传统客户端的分层逻辑里我们会常听到 MVC，数据、控制、界面，这是一个可能用了二十几年的分层模型。交互毫无疑问包含内容呈现，把我们需要给用户的数据呈现出来。还有一部分很重要的，是你要和用户互动，交互界面通常不是静态页面，用户会在界面上产生一些行为，这些行为通过控制层会反馈到数据层，数据层进行一些变化和更迭，再通过控制层送回给界面层重新进行数据的渲染和呈现，这是整个 MVC 流转的方式。
除了内容的呈现和渲染，还有很重要的一点是要处理好所有和用户的互动，这块其实占了前端很大的开发量，因此，会有的人可能前端开发无聊，有的人则会觉得非常有魅力。做交互其实没有什么银弹。在软件开发里我们一直会需要一个「银弹」，就是「当我知道那个秘籍之后，我就可以做得非常轻松，什么事情都可以变得非常潇洒」，其实并不存在。大量的实践混杂在细节里，包括我今天和大家分享的很多东西，听上去没有那么神奇，甚至说有的一点都不工程，但这是真正的实践。你真正要把一些东西做好，很多都是在细节里面的。
轻芒的交互实践案例一：列表的实现
什么叫列表？比如下图左边是非常显然的列表，可以无限加载、不断滚动的内容流，我们认为每一个卡片都是一个列表项。右图看上去是一个内容详情页，在实践中我们也把它做成了列表，我们会把它每个段落抽象出来，按照列表来渲染。
另一方面，封装列表也是为了统一相关联的界面组件，比如统一的 loading 样式，统一的空白页样式，翻页的逻辑和多级嵌套等。举例来说，所有数据的加载，在列表中定义了翻页方式，就定义了产品的客户端和服务端的交互方式。在轻芒，所有的服务端翻页都会使用 Next Url 模式，服务端会告诉客户端有没有下一页，有的话客户端滚到底就会加载下一页。这告诉我们，如果服务端具有统一的 API 模式，客户端开发会变得很轻松，抽象和复用可以做得更充分。当然，这反向也约束了服务端，需要服务端提供统一的或者整合的 API，这样落地到公司全部团队，可以提升整体的效能。对前端来讲，也只有这样的方案才是能够极大地简化开发复杂度。
在轻芒杂志中，我们用过非常多的交互方案去尝试这个东西，最后是团队一起来解决的。这个解决方案的核心理念是：不要在列表中直接使用原生组件播放视频，而是用设计的方案去规避，基于分层的方案来实现整个交互。当原生组件出现的时候，整个交互停止，比如看左边这个视频，在播放一个嵌入的视频时，这个视频好像是「长」在那个卡片上的，其实它是个虚拟的定位，只是大概在那个位置。用户一旦滚动页面，视频立刻收起来不再播放。可能这听上去很不「技术」，但实际上这是你对平台的理解，你知道这是一个系统设计上的硬坑，如果平台不搞定这点，无论谁来做都会碰到同样的问题。与其这样，不如我们理解平台之后，和团队商量，换种方式实现，把事情变得更简单、更轻松。
而轻芒的实践经验，就是要让数据和状态分离。比如拿到数据后，我们会把数据分成两部分，一部分是原生数据，它们不会随着用户交互而发生变化，用列表来进行存储；而另一部分是状态，它会随着用户交互发生变化，这里我们会用字典进行存储。图示的代码中， ui-switch 和 subscribed 的对象都存储了状态信息，当用户对特定元素进行操作后，只需要在控制层改变 switch 对应 id 的某一个值，就可以对界面进行快速的更新。这看上去是一个非常小的优化，但如果你在所有界面交互中都能把控好这一点，带来的收益是非常大的。它还有一个特点，是中心化。比如刚刚看到的视频播放，我们同时只允许一个视频播放，用户点了某个视频后其他视频会停止播放，这时候你只需要在控制层把整个状态清空，对交互对象的状态重新设定即可，这都是一些听上去比较细节，但从实践来讲非常重要的事情。
轻芒的交互实践案例二：全局窗口的实现
这个例子非常小，背后想聊的主要还是组件封装的思路。做技术设计，始终要考虑怎么封装组件、怎么复用，因为这个对所有前端开发、服务端开发都是重要的，如果不复用、不去尝试做一些抽象，那么长此以往代码会变得非常散，难以维护、难以阅读。但怎么做封装，怎么做实践？除了把组件抽象得非常漂亮外，也可以尝试用一些边界更模糊的封装方案，可以显著的让代码变短变简单，更易于变更和维护。比如，在前面例子中，我要变更某个全局组件的样式，只要修改 global.xml，而调用该文件的地方是不用改的，用开闭原则来看，它是个非常满足开闭原则的实现策略。
轻芒的交互实践案例三：马克
上面分享的三个案例，不全部是单纯的技术，有不少技术外的事情。交互，看上去是一个纯前端实现的问题，其实它的实现是整个团队的事情，包括产品、设计、以及后端的 APIs 设计等等。也是平台能力和产品设计的交互融合。
这是轻芒的实践，我相信和大家的具体的业务需求、目标会不完全一致。但也期望今天的分享可以给大家一些启发，如果大家能运用到其中的一些，对我们来讲就足够了。谢谢大家。
