通过前面的DOM事件模型和事件绑定的姿势两节的学习，我们对JavaScript中的DOM事件有了一定的基础。但忽略了有关事件如何被触发的重要细节。

首先要声明的是，我们在这篇文章中要了解的不是CSS混合模式如何使用，而是来一起探索CSS混合模式的一些高级运用以及它能做些什么，又会带来什么样的效果。操作过像Photoshop这样的图像处理软件的同学，对于图层混合模式一定不会感到陌生，但对于CSS中的混合模式，估计还是有不少的同学会感到陌生或者好奇。在这篇文章并不会介绍CSS的混合模式相关的属性怎么使用，而会探讨CSS的混合模式的一些高级运用，以及对应的效果。

图片在Web上的使用占比已经非常的高，特别是在手淘互动这样的环境之下，我们每一个项目的图片使用量都非常的大。如果能把图片用好，的确是件不容易的事情，而且面对的挑战也不小。经常会碰到有关于图片如何加载，如何适配，如何优化等等。另外在移动端开发中，很多同学在Web上使用图片的方法一般都是通过<img>标签和CSS的background-image属性来处理。也正因如此，很多同学却忘记了这两者应该如何？怎么使用又是最优的。甚至有很多前端同学都已经忘记了这两者的差异是什么？加上Web的技术不断革新，事实上除了前面提到的加载图片的方式之外，还有其他的方式，比如HTML5的<picture>（虽然这个元素标签曾经一度废弃过，但后来又添加回来了）。就算还是使用img标签，也有了新的优化，比如img的srcset属性。那么面对这么多的变化，以及使用的场景，我们应该怎么来选择，才是最优的选择。今天这篇文章，我们就来一起探讨一下这些东西，希望大家会喜欢。

使用Vue构建组件容易，但对于初学者要掌握Vue组件中的通讯还是有一定的难度。比如说，父组件如何向子组件通讯？子组件又是如何向父组件通讯？兄弟组件又是怎么通讯？这些方面都是有关于组件通讯相关的知识。而且掌握Vue组件之间的通讯方式还是掌握Vue组件的另一种能力。

许多现代JavaScript框架和库的核心概念是能够将数据和UI封装在模块化、可重用的组件中。这对于开发人员可以在开发整个应用程序时避免使用编写大量重复的代码。虽然这样做非常有用，但也涉及到组件之间的数据通讯。在Vue中同样有这样的概念存在。通过前面一段时间的学习，Vue组件数据通讯常常会有父子组件，兄弟组件之间的数据通讯。也就是说在Vue中组件通讯有一定的原则。

现代Web开发中的CSS离完美还差得远，这并不奇怪。现在，项目通常是相当的复杂的，而CSS样式又是全局性的，所以到最后总是极容易地发生样式冲突：样式相互覆盖或隐式地级联到我们未考虑到的元素。为了减轻CSS存在的主要痛点，我们在项目中普遍采用BEM的方法来。不过这只能解决CSS问题中的一小部分。对我们来说是幸运的，社区已经开发出了可以帮助我们更彻底地解决问题的解决方案。你可能已经听说过CSS Modules、Styled Componetns、Glamorous或JSS。这些只是我们今天可以添加到项目中的一些最流行的工具。如果你对这个话题感兴趣，你可以查看这篇文章：@Indrek Lasn详细介绍了CSS in JS的全部思想。

在项目开发的时候，常会碰到这样的一种现象：有两个组件非常相似，比如较为熟悉的Modal、Tooltip和Popover，它们都具有同样的基本函数，而且它们之前也有足够的不同。很多时候，就让人很难做出选择：是把它们拆会成多个不同的组件呢？还是只使用一个组件，创建足够的属性来改变不同的情况。在Vue中，对于这样的场景，官方提供了一种叫混入（mixins）的特性。使用mixins允许你封装一块在应用的其他组件中都可以使用的函数。如果被正确的使用，他们不会改变函数作用域外部的任何东西，所以多次执行，只要是同样的输入，总是能得到一样的值。既然Vue的mixins这么优秀，那应该怎么使用呢？今天我们的目的就是学习如何在Vue的项目中使用mixins。

Vue插件是向应用程序添加全局特性的一种强大而又简单的方法。它有多种用途，从分发应用程序范围的组件到向应用程序添加路由和不可变数据存储等附加功能。从概念上讲，Vue插件是非常简单。它实际上只是一个带有install函数的对象，它接受两个参数：全局的Vue对象和一个包含用户定义选项的对象。然而，一个像这样简单的Vue插件仍然可以得到相当大的效果。

2017年5月18日，W3C的 CSS工作组（CSS Working Group） 发布了 CSS逻辑属性和值（CSS Logical Properties and Values Level 1） 的首份工作草案（First Public Working Draft）。不同的书写模式（writing mode）中，可以抽取出共性的抽象概念（如开始位置，或行），这些逻辑抽象概念需要在不同书写模式下映射到左或右、上或下等物理的概念上。一些CSS布局可能依赖这些共性的逻辑概念。该 CSS 模块给出了用于通过逻辑方式（而不是基于物理坐标、书写方向和维映射等）控制布局的逻辑属性和取值（logical properties and values）。这个模块来源于CSS21中关于逻辑属性和值的特性。

记得在去年双11的互动页面中，我们折腾了一波iPhone8、iPhone8 plus和iPhone X的适配，特别是iPhone X刘海区域的适配。针对这方面的页面适配，沉淀出相应的适配方案。而今年的双11期间，苹果又推出了iPhone XS、iPhone XR和iPhone XR Max以及众多的安卓刘海设备。言外之意，前端在这方面的适配变得越来越复杂。面对众多场景，我们应该怎么去面对呢？接下来聊聊我在今年双11的主互动玩法中是怎么处理的。