原文地址

有一些极其强大的 CSS 属性有着很好的浏览器支持，但是开发者们却极少用到。currentColor 就是其中之一。

MDN defines currentColor as

在 MDN 上对 currentColor 是这么定义的。

The currentColor keyword represents the calculated value of the element’s color property. It allows to make the color properties inherited by properties or child’s element properties that do not inherit it by default.

currentColor 关键字表示了元素的颜色属性的计算值。它可以使元素的属性中使用颜色的时候继承本身的 color 属性，或者子元素可以从父元素继承颜色属性。简言之，它改变了元素的默认继承属性。

In this article, let’s get an overview on how to use CSS currentColor keyword in some interesting ways.

在这篇文章里，我们来看看如何来使用 CSS 的 currentColor 关键字。有很多很有趣的方式。

简介

currentColor 关键字获取 color 属性中的颜色值，把它保存在自身的一个规则里。

当你想继承使用 color 属性中的颜色值的时候，就可以用 currentColor 关键字。如此一来，当你修改了 color 属性的值，所有用 currentColor 关键字来引用这个颜色值的地方都会相应的自动修改。是不是很棒？

1
2
3
4
5

.box {
    color: red;
    border 1px solid currentColor;
    box-shadow: 0 0 2px 2px currentColor;
}

在上面的代码中，可以看到我们没有到处重复使用相同的颜色值，而是使用 currentColor 关键字。这样带来的好处就是使得 CSS 变得更好维护了，我们不需要再到处去维护颜色值了。

可能的用法

让我们来看看一些 currentColor 的用例和例子。

简化颜色定义

像链接，边框，图标和阴影经常会使用和他们父元素相同的颜色，用 currentColor 值来表示颜色值避免了在很多地方去用各自的颜色值，从而提高代码的可维护性。

举个例子：

1
2
3
4
5
6
7
8
9
10

.box {
    color: red;
}
.box .child-1 {
    background: currentColor;
}
.box .child-2 {
    color: currentColor;
    border 1px solid currentColor;
}

在上面的代码段中，可以看见没有给 background、border 属性指定某个颜色，而是用 currentColor 来代替。这样一来，它们就都是红色了。

简化过渡和动画

currentColor 能让过渡和动画变得更简单。

让我们来看一下之前的一个例子，增加改变悬停的颜色的效果。

1
2
3

.box:hover {
    color: purple;
}

在这里，没有在 :hover 里重新定义三个颜色值，而只是修改了 color 属性的值。所有使用了 currentColor 的属性都会在有悬停的时候自动应用这个修改。

在伪元素中的应用

类似 :before 和 :after 这样的伪元素也会从它们的与元素继承 currentColor 的值。这可以应用在诸如有动态颜色的提示（tooltips），覆盖层（overlays），还可以给它加上一个具有透明度的效果。

1
2
3
4
5
6
7

.box {
    color: red;
}
.box:before {
    color: currentColor;
    border: 1px solid currentColor;
}

在这段代码里，:before 伪元素继承了父元素的颜色值，将父元素的值用在了 color 和 border-color 上，用这个机制，可以实现像 tooltips 之类的东西。

和 SVG 配合使用

SVG 也可以从父元素里获取 currentColor 的值。当在不同的地方使用这个 SVG 的时候，如果想要直接继承所在父元素的颜色而不想每次都都指定，这真的是一个很有用的方法。

1
2
3

svg {
    fill: currentColor;
}

在这个例子中， svg 和它的父元素会有相同的填充色，也会跟着父元素的颜色的修改而动态变化。

和渐变配合使用

currentColor 还可以用在渐变中，如果渐变中的一种颜色是父元素的颜色的话，是很方便的。

1
2
3

.box {
    background: linear-gradient(top bottom right, currentColor, #FFFFFF);
}

在上面的例子中，顶部的渐变色总是和父元素的颜色相同。虽然在这个例子中只能使用一种颜色来动态赋值，但不得不承认这是一个很巧妙的技巧来生成基于父元素颜色的动态渐变。

这里有一个 Codepen 上的例子，演示了上面所有的用例。

浏览器支持

CSS 的 currentColor 属性是从 SVG 细则中引入 CSS3 的，其实它 2003 年就在存在了。因此，对于 currentColor 的支持已经十分广泛了，IE8 及以下版本是个例外。

下面这张图表是从 caniuse.com 网站查询得到的：

总结

CSS 的 currentColor 属性是一个未被充分使用的强大特性。它的支持性很好，并且带来了更多的方式来让我们的代码变得更清晰。

由于 CSS 变量还在试验阶段，习惯使用 currentColor 属性绝对对你是很有帮助的。

2048是一个喜闻乐见的游戏，最近在看 Vue，于是想用 Vue 来实现一下，结果发现并没有用到 Vue 里面的很多内容。

游戏面板构建

首先，构造一个 4 * 4 的游戏面板，很简单的用 ul 和 li 来实现就可以了。

1
2
3
4
5
6
7

<ul id="game-board">
  <li v-for="block in blocks"
      track-by="$index"
      v-text="block == 0 ? '' : block"
      :class="{'empty': block == 0}">
  </li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

export default {
  data() {
    return {
      blocks: [] // 储存16个格子里的数值，将在组件初始化的时候进行填充。
    }
  },
  methods: {
    render() {
      this.blocks = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    },
    ready() {
      this.render();
    }
  }
}

1

/*css样式我就不详细贴出来了，因为没有什么特别的。*/

上面的代码应该一目了然吧，在生命周期方法 ready 里进行游戏面板的构造，当然，现在这个面板是空的，接下来需要……

游戏初始化

在2048里，游戏的初始状态是在16个格子中随机填充数字2或4，当然出现2的概率会比出现4的概率大，本着一切就简的原则，这里我们出现4的概率是0，哈哈哈。

这个和 Vue 也没什么关系，主要是涉及到随机数的生成，在 javascript 里用 Math.random() 方法生成随机数，在这里有个公式挺有用的，要取整数 n 到 m 之间的随机数可以用这样的公式：

1

var num = Math.floor(Math.random() * (m - n)) + n;

知道了这点，我们来把代码补全：

1
2
3
4
5
6
7
8
9
10
11
12

render() {
  this.blocks = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
  // 游戏初始化, 将游戏面板中随机两块设置为2
  var first = Math.floor(Math.random() * 15);
  var second;
  do {
    second = Math.floor(Math.random() * 15);
  } while(first == second);
  this.blocks.$set(first, 2);
  this.blocks.$set(second, 2);
}

这里用了一个 do...while 来保证生成的两个数是不相同的。

加入事件

本来我想偷个懒，直接用键盘的上下左右来控制事件，但是整页响应键盘事件要挂载在 document 对象上，太丑了。最后还有决定用手势事件来做，这里就用到了 vue-touch 这个库，用法很简单。

第一步当然是：

1

npm i vue-touch --save

安装好了之后和用 Vue.use() 来挂载一下。

1
2

import VueTouch from 'vue-touch';
Vue.use(VueTouch);

然后就可以在组件中使用 v-touch 这个指令了。

先把事件绑好：

1
2
3
4
5
6

<ul id="game-board" v-touch:swipeleft="moveLeft"
        v-touch:swipeup="moveUp"
        v-touch:swiperight="moveRight"
        v-touch:swipedown="moveDown">
...
</ul>

逻辑实现

2048的逻辑十分简单，只要理清思路就很好做，之前我在 iOS 上也做过一次，上次是用多维数组实现的，这次用一维数组实现我觉得到是更简单了……

开始来写向左滑动的逻辑，先理一下思路好了：

1. 向左滑动实际上有可能产生滑动的是右边的三列，所以我们可以不考虑左边第一列
2. 滑动停止的条件：
   • 遇到边框
   • 遇到一个非空格子并且和里面的数字和自己的不一样
3. 如果遇到和自己一样的数字，就合并。
4. 所有格子都移动完之后，在游戏面板的空格子里添加一个数字2。

思路就是这样，下面看代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

moveLeft() {
  for(let i = 0; i < this.blocks.length; i++) {
    var moveTo = i;
    
    if(i % 4 == 0) continue; // 只操作后面三列
    // 寻找目标位置
    while(moveTo % 4 != 0) { // 遇到边框
      if(this.blocks[moveTo - 1] != 0 && // 遇到一个非空格子
         this.blocks[moveTo - 1] != this.blocks[i]) //并且数字和自己的不同。
        break;
      moveTo--;
    }
    this.move(i, moveTo); // 移动事件
  }
  this.newBlock(); // 添加新数字块事件
}
move(from, to) { 
  if(from == to) return;
  if (this.blocks[from] == this.blocks[to]) {
    this.blocks.$set(to, this.blocks[to] * 2);
  } else {
    this.blocks.$set(to, this.blocks[from]);
  }
  this.blocks.$set(from, 0);
}
newBlock() {
  var newBlock;
  do {
    newBlock = Math.floor(Math.random() * 15);
  } while(this.blocks[newBlock] != 0);
  this.blocks.$set(newBlock, 2);
}

可以看到真正的移动其实是在 move() 方法里面事件的， moveLeft() 方法里面只是获取到这个数字块需要移动到的位置。这样 move() 方法还可以被向其他方向的方法来公用。

好了，向左的写好了，其他方向的也就大同小异了。但是有几个需要注意的地方：

1. 上下格子的 index 相差4
2. 向右和向下运动方法里面遍历数组的时候应该从后往前遍历，不然会有不可预料的结果。

恩，就写到这里吧，只是一个简单的实现，没有加入分数计算和游戏结束的判断，可能明天来写一下，也有可能就不写了，因为我实在是太懒了。

搞了半天和 Vue 没什么关系，哈哈哈。

刚刚把 Vue.js 中用于状态管理架构的 Vuex 的文档啃了一遍。

Vue 组件化之后各个组件都拥有自己的状态，这让状态在组件中的共享变得十分困难，通常用事件的方式把状态推送到其他组件中去，当组件树变得非常大的时候，事件流会变得非常复杂，很难维护，会 Out of Control。

Vuex 就是为此而诞生的，用 Vuex 来维护一个应用级的状态，它不属于任何特定的组件，组件之间可以共享这个状态。

Vuex 数据流

首先来看一下 Vuex 数据流的一张图，这张图画的十分清晰。

从组件开始看，当用户对 Vue 的组件进行操作的的时候，组件会调用 Actions，Actions 顾名思义是一系列的动作，由它来决定对 Store 做什么操作，但是它不能直接操作 State，也就是上面所说的状态。按照我的理解，Action 作为一个通知者，把所要做的操作分发到 Mutation，Mutation 会去修改 State，当 State 发生变化会由 Getter 来从 State 里获取 Vue 组件中所需要的数据，从而更新界面。

看上去很麻烦的样子啊，但是这一切都是建立在我们要构建的是一个大型应用的前提之下的。目的是提高可维护性，降低调试与长期维护的难度。

接下来就来看一下 Vuex 中几个核心的内容：

核心内容

State

State 对象包含了全部的应用级状态，是一个唯一数据源。一个应用只有一个 store 实例。

不过，它是可以分模块的，就像这样：

1
2
3
4
5
6
7
8
9

import module1 from './modules/module1'
import module2 from './modules/module2'
export default new Vuex.Store({
  modules: {
    module1,
    module2
  }
});

这里面 module1 和 module2 各自有的 State，子模块的初始状态是作为底层 state 的子树的。在所有子模块上定义的 Mutation 都只能改变当前相关子模块上的 state 子树。

Getters

Getters 是用来获取 state 中的数据的。好像就这么简单……

为什么要有它？共享！如果多个组件都会使用同一个 getter，是很高效的，因为它会被缓存，而且当它所依赖的状态发生改变的时候，相应的 getter 只会被计算一遍。

Mutation

它就是一个事件系统，按照惯例 mutation 用全大写命名。它不能直接被调用，而需要用 dispatch 的方式来触发：

1
2
3
4
5
6
7
8

// ...
  mutations: {
    MUTATION (state, para) {
      // ...
    }
  }
}
store.dispatch('MUTATION')

所有的 Mutation 的第一个参数永远为所属 store 的整个 state 对象。

注意：Mutation 必须是同步函数！如果在它里面进行异步操作，对于状态的控制将会空前混乱。

Actions

那么想要进行异步操作的话，应该要把异步的行为放在 Actions 里面。actions 就是用于分发 Mutation 的。

在组件中，需要将 Actions 暴露到组件方法中去，让组件觉得个它自己本身的 methods 没有差别。

一些规则

1. 应用 state 存在于单个对象中；
2. 只有 mutation handlers 可以改变 state；
3. Mutations 必须是同步的，它们做的应该仅仅是改变 state；
4. 所有类似数据获取的异步操作细节都应封装在 actions 里面。
5. 组件通过 getters 从 store 中获取 state，并通过调用 actions 来改变 state。

Vuex 的主要内容基本上就这些，关于细节方面不多说了。

最近学习了一下Vue，感觉和React和Angular很像，Angular2也是在往组件化的方向上走，看来这是前端的一个大趋势啊，不禁想起当年拖控件的时代啊，哈哈哈。