首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >20181111_ARTS_week20

20181111_ARTS_week20

作者头像
Bob.Chen
发布2018-12-12 09:53:03
6590
发布2018-12-12 09:53:03
举报

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

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

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

祝双十一快乐

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-11-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Algorithm
  • Review
  • Tip
  • Share
相关产品与服务
图片处理
图片处理(Image Processing,IP)是由腾讯云数据万象提供的丰富的图片处理服务,广泛应用于腾讯内部各产品。支持对腾讯云对象存储 COS 或第三方源的图片进行处理,提供基础处理能力(图片裁剪、转格式、缩放、打水印等)、图片瘦身能力(Guetzli 压缩、AVIF 转码压缩)、盲水印版权保护能力,同时支持先进的图像 AI 功能(图像增强、图像标签、图像评分、图像修复、商品抠图等),满足多种业务场景下的图片处理需求。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档