分类： 编程作品

通过代码去表达自己的情感

display: flex

css flex 布局要学好，那些 float/bfc 啥的，以后通通不管用了，学习了也没有什么收益。苦于不能很好理解 flex 各种属性和属性值，做了一个小 demo，看能不能帮助你更直观理解 flex。

参考链接

switch 的块级作用域

今天同事在 case 语句加了一个花括号{} ，我感到挺诧异的，问了他为什么要这么干？原来他是为了实现 case 语句的块级作用域，可以解决命名的苦恼，这是一个好的实践，值得推荐。

function foo(condition) {
            switch (condition) {
                case 1: {
                    let a = 1;
                    break
                }
                case 2: {
                    let a = 2
                    console.log(a)
                    break;
                }
            }
        }

foo(2)
继续阅读“switch 的块级作用域”

如何重装 windows 系统

这个国庆假期给自己的 2 台电脑重装了 Windows 系统，花了我 40 元人民币，可能将近 4 天的时间，被折腾的不浅，理想中的假期应该看看书做做运动，和家人吃吃饭，在附近旅游一下。本来装系统这么简单的事，应该自己搞定的。此文记下我从中学到的关键点。

  1. 先用一个好的 u 盘制作一个启动盘，我推荐使用微 PE 工具箱，这个软件来制作启动盘。
  2. 再下载 Windows 操作系统的 ISO 文件放在启动盘里。
  3. 系统安装好后，可以使用驱动总裁来安装驱动，这个软件相比驱动精灵更加纯粹，没有杂七杂八的东西。有时会遇到特殊情况，比如我的台式机分辨率是 8 : 5，如果安装了不适合的显卡驱动，会使电脑的显示不在最佳状态，这时就不应该更新显卡驱动。

以上简单步骤就能把系统装好。在淘宝上装系统一般 20 元一单，技术含量虽然不高，但是遇到一些特殊场景，没有经验耗费大量的时间自己去摸索也是不合适的，需要深厚的基础技术积累才能见招拆招。

继续阅读“如何重装 windows 系统”

VueJS 中 event bus 的实现

最近在工作中，使用了消息总线（message bus）这么一个东西，想起 Vue 也有类似的东西，所以想看一下其源码实现。

学习英语是理解编程的第一步。bus 有公共汽车的意思，也有 ‘a set of wires that carries information from one part of a computer system to another’（计算机系统的总线）。所以这里 bus 的意思是总线，一种形象的说法，为了更进一步的了解这个概念，可能需要一点硬件知识。

继续阅读“VueJS 中 event bus 的实现”

汉诺塔游戏

近期一直在玩的游戏是汉诺塔，我倒是觉得这个游戏挺解乏的，但是我女票子却不喜欢，我让她玩 5 层，她讨价还价成 4 层，我再坚持一次，她就说不玩了不玩了，那就陪她玩 4 层咯。下面，我们来看看 js 制作的简单动画展示，这个游戏应该怎么玩。

继续阅读“汉诺塔游戏”

debounce 的简单实现

为什么要讲这个话题呢？主要是因为最近很多问题都由这个特性帮我解决了，让我感叹这非常有用。

学习英语是理解编程的第一步。de- 在英语里表示 xx 的反义，比如 defrost（除霜），deactivate（使失活），decentralization（权力分散），那么 debounce 的意思就是防抖/防止弹跳。我们结合实际的例子感性的认识一下。

继续阅读“debounce 的简单实现”

如何编写一个 webpack plugin

本篇文章源自我自己的一个需求：我想看看 webpack 是如何组织 js 代码模块化的。打开编译后的文件有很多注释，不方便查看，我想去掉这些这些注释，那应该怎么做呢？学习写个插件用正则替换这些注释代码。

插件的设计机制一般都是在程序运行的各个阶段提供不同的 hook，传入数据、修改数据，以期得到一个满意的结果，webpack 也不例外。那针对这种场景，应该使用说明钩子函数呢？

继续阅读“如何编写一个 webpack plugin”

工作中的一个问题之二

有一个二维数组如下：

let arr = [["a0", "a1"], ["a1", "a2"], ["a3"]];

我们看到 a1 这个元素在数组的第 0 项和第 1 项都存在了，我们需要将其合并成一项：

// 需要转化成 [["a0", "a1", "a2"], ["a3"]]

同理，针对一个任意项的二维数组，只要其中某单个元素重复了，就应该合并进同一个数组里，减少这个二维数组的个数。那么怎么实现这个呢？

继续阅读“工作中的一个问题之二”

并查集的正确使用姿势

因为工作的关系，不得不学习了几种算法，好久不用又忘记了，这是一篇复习文章。

并查集回答的是连接问题，比如说从 a 城到 b 城有没有路，能回答有或者没有，但是不能回答具体的路是那几条，该怎么走；再比如说 a、z 这 2 个人能否通过共同好友的名片分享来加上微信。

并查集是解决点与点之间的关系，遇到实际问题的时候，需要我们进行转换成点与点，也就是建模。在数据结构上一般用数组来存储这些点。

继续阅读“并查集的正确使用姿势”