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 个人能否通过共同好友的名片分享来加上微信。

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

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

函数柯里化

函数柯里化是一个很有意思的话题,用起来也非常的神奇有趣。以前的我不太想深入的去了解这个话题,今天做了一些例子放在下面,加深理解。

在计算机科学中,柯里化(英语:Currying),又译为卡瑞化或加里化,是把接受多个参数的函数变换成接受一个单一参数的函数,并且返回接受余下的参数而且返回结果的新函数的技术。

https://zh.wikipedia.org/wiki/%E6%9F%AF%E9%87%8C%E5%8C%96

简单理解,就是将一个可以接受多个参数的函数转化成可以接受任意个数参数的函数。我们可以将 curry 函数简化成这样:

继续阅读“函数柯里化”

使用 prettier 格式化 PHP 代码

在 js 项目中,因为使用了 prettier,可以一顿乱写,完全不管格式,写完之后,在自动保存的时候使用 prettier 格式化一下。代码又变成了美美哒、井然有序的样子,这种体验非常好。这种好的体验,应该怎么复制到 PHP 的开发中呢?那么请看这篇文章吧。

继续阅读“使用 prettier 格式化 PHP 代码”

解决 mac 下 xampp 安装 WordPress 插件需要 ftp 账号

xampp、ftp、mac、wordpress

想在 mac 里做点 wordpress 开发没有那么困难,安装 xampp 就行,而且是免费的。

但是在默认情况下,安装 wordpress 插件需要 ftp 账号的权限,怎么解决呢?于是就有了这个文章。因为我从网上找答案还是花了一些时间,所以有记录一下的必要。

在 wp-config.php 中添加

define( 'FS_METHOD', 'direct' ); 
// 定义这个常量是做什么用的,我并没有深究。

更改文件的权限

sudo chmod -R 777 /Applications/XAMPP/xamppfiles/htdocs/

上面是更改对应目录下的权限,找到对应的目录,比如我的是:/Users/zengliaoliao/.bitnami/stackman/machines/xampp/volumes/root/htdocs/zengxiaoluan,这样就搞定了。

参考链接:https://www.youtube.com/watch?v=dn6_nYQFjok

audio 可视化

audio、audio visualization、可视化、音乐韵律可视化

在某些移动设备上,可能不能查看到效果,可以在电脑上的浏览器尝试。

注意

我们可能好奇某些音乐播放器,那些跳来跳去的韵律图是怎么做出来的,点击下面👇的播放按钮播放音乐,查看 audio 可视化。

您的浏览器不支持 canvas 继续阅读“audio 可视化”