Phaser3 游戏框架使用体验
Phaser 是一个基于 Web Canvas 和 WebGL 的开源游戏框架。使用它做游戏很方便，官方的一个示例只用了100行左右的代码就实现了游戏中人物的移动跳跃、人物拾取金币、炸弹以及平台的搭建。示例：https://phaser.io/tutorials/making-your-first-phaser-3-game/part1。因为之前一直想尝试实现基于 Web 版的超级玛丽游戏，于是乎...
配置 ufw 阻止外部访问 ubuntu docker 服务的端口
在 ubuntu 上部署好 docker 应用后，默认情况下 ufw 是禁用不了 docker 暴露的端口，需要自己重新配置 docker 和 iptables，但是修改它们的配置会导致容器无法访问外部网络。所以更好的的办法是修改 ufw 的配置，只需改一处地方即可，编辑 /etc/ufw/after.rules ，在末尾添加：保存后重启 ufw（如果不生效可以重启机器试试）：这样子就可以禁掉 d...
Vue 动画性能优化
在使用 JS 来实现动画的场景下，需要频繁的操作 DOM，如果使用 Vue 的数据响应式更新去做，会比直接使用原生 JS 操作 (element.style.transform) 更加耗时。因为 Vue 在数据更新后，需要更新自身维护的虚拟 DOM 节点，对新旧节点进行对比，再更新视图。使用 Vue 操作动画每轮 requestAnimationFrame 都会去对比新旧节点，更新组件信息，消耗5...
用 Web Components 实现一个 AppDrawer 组件
Web Components 和 vue、react 都是基于组件化的形式去书写页面。Web Components 的主要作用及特点：可以创建新的 html 标签、扩展 html 标记。创建可复用的组件。不依赖框架（但是需要浏览器支持），浏览器自带调试 Web Components 的能力。与 Shadow DOM 配合使用更加强大(隔离DOM、作用域CSS、不用担心CSS命名重复)。Drawer...
在 Vue 里使用高阶组件
高阶组件的特点和高阶函数类似，高阶函数接受一个/多个函数作为参数，返回另一个函数，高阶组件则是组件作为参数，返回另外一个组件。只要满足其中2个条件之一即可。高阶组件在一些场景下可以对组件进行复用，增强组件功能，控制渲染的内容。在 Vue 里创建高阶组件：场景1 页面鉴权场景2 复用组件总结Vue 里使用 HOC 没有 React 里用得那么灵活，React 大部分时候是写函数，和高阶组件的契合度高...
Node 实现 Http 反向代理功能
代理请求的流程使用 http.createServer 创建服务，监听客户端请求。客户端请求时，获取此次请求头数据，利用 http.request(...) 请求源目标地址获取实际响应内容。设置此次请求的响应体为 http.request(...) 返回的响应体。具体实现实现参考了 node-http-proxy 源码。...
