本周算法题 Letter Combinations of a Phone Number，看了一篇介绍 :empty 和 :blank 为选择器的文章，分享了 vue 工程编译生产版本时添加图片压缩的方法，分享了一点关于买专栏的想法。
Algorithm
代码语言：javascript复制/**
*
* 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 的行为。
代码语言：javascript复制// 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，极客时间也做了不少活动，专栏打折力度也挺大的。其实对于学习这件事情还是要有辨别能力，虽然我一般会先看看介绍，试读，然后瞄一下目录看看是否是自己感兴趣的话题，但也买到几个感觉内容比较水的专栏。
慢慢自己也摸索了一个『指导原则』。涉及具体语言基础知识的要好好考虑，比如小程序之类的，自己看文档完全可以搞定的，就不要再去买专栏了。
学习是一件好事情，但不要用战术上的勤奋去掩盖战略上的懒惰，多学通用思想，不要拘泥于一两门语言，或者一两个工具框架。
祝双十一快乐
