20181111_ARTS_week20

本周算法题 Letter Combinations of a Phone Number，看了一篇介绍 :empty 和 :blank 为选择器的文章，分享了 vue 工程编译生产版本时添加图片压缩的方法，分享了一点关于买专栏的想法。

Algorithm

/**
 * 
 * Letter Combinations of a Phone Number
 * https://leetcode.com/problems/letter-combinations-of-a-phone-number
 * 
 * @param {string} digits
 * @return {string[]}
 */
var letterCombinations = function (digits) {
    const mappings = {
        '2': ['a', 'b', 'c'],
        '3': ['d', 'e', 'f'],
        '4': ['g', 'h', 'i'],
        '5': ['j', 'k', 'l'],
        '6': ['m', 'n', 'o'],
        '7': ['p', 'q', 'r', 's'],
        '8': ['t', 'u', 'v'],
        '9': ['w', 'x', 'y', 'z']
    };

    if (!digits || digits.length === 0) return [];
    if (digits.length === 1) {
        return mappings[digits];
    }

    let result = [];
    let set1 = letterCombinations(digits.substr(0, 1));
    let set2 = letterCombinations(digits.substr(1));

    for (let i = 0; i < set1.length; i++) {
        for (let j = 0; j < set2.length; j++) {
            result.push(set1[i] + set2[j]);
        }
    }

    return result;
};

console.log(letterCombinations("23"))

还挺有意思的一个题目，因为输入的位数不确定，用递归把每个数拆出来，搞定。

Review

When to use the :empty and :blank CSS pseudo selectors

https://medium.freecodecamp.org/empty-and-blank-53b9e96151cd

作者介绍了 :empty 和 :blank 两种 CSS 伪选择器。 简单来说， :blacnk 比 :empty 好用，因为 :blank 可以忽略元素间的换行或者空格之类的，:empty 就必须要两个元素中没有东西才能匹配上，比如 <ul></ul>，所以 :empty 的适用性没有 :blank 强，但是 :blank 的兼容性没有 :empty 好，基本只有 FireFox 能支持（惨）

Tip

vue-cli 打包编译时 -webkit-box-orient: vertical 消失的解决办法。

这周遇到个很奇怪的问题，vue 项目 dev 的时候没问题，到编译 prod 版本之后 -webkit-box-orient: vertical 属性就被删掉了，造成页面显示混乱。

dev 版本 ok，prod 版本有问题，那问题肯定出在 webpack.prod.conf.js 里，差异点是 prod 版本会对 css 压缩，使用的是 optimize-css-assets-webpack-plugin 这个插件。

既然问题找到了，解决方案自然呼之欲出。

最好的方案是修改 package.json 文件中的 browserlist 字段，这个会涉及 autoprefixer 的行为。

// package.json 源配置
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

  // 修改为
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8",
    "ios >= 8",
    "Android > 4.1"
  ]

告诉 autoprefixer 我们要兼容 iOS 8 还有 Android 4.x，让它别乱删我们的东西。

然后重新编译，就搞定了。

当然，你把 optimize-css-assets-webpack-plugin 的配置注释调也可以，但是个人不建议这样做，因为各个组建间难免有重复的样式代码，或者共同引用同一段样式的，如果没有 optimize-css-assets-webpack-plugin 会有大量冗余代码。

Share

这周双11，极客时间也做了不少活动，专栏打折力度也挺大的。其实对于学习这件事情还是要有辨别能力，虽然我一般会先看看介绍，试读，然后瞄一下目录看看是否是自己感兴趣的话题，但也买到几个感觉内容比较水的专栏。

慢慢自己也摸索了一个『指导原则』。涉及具体语言基础知识的要好好考虑，比如小程序之类的，自己看文档完全可以搞定的，就不要再去买专栏了。

学习是一件好事情，但不要用战术上的勤奋去掩盖战略上的懒惰，多学通用思想，不要拘泥于一两门语言，或者一两个工具框架。

祝双十一快乐