特色

GitChat:从 jQuery 里学习设计模式

新 GitChat 已经开始招募读者:https://gitbook.cn/gitchat/activity/5ccedbcfe5bb505613f45186,现在加入,你将会在两周后看到我这篇悉心打造的长文。长文公布一周后进行答疑。之后长期在读者圈与各位互动。

欢迎大家光临指导。

今年会在 GitChat 平台上多发内容。也欢迎大家提出你们想看的内容。

继续阅读“GitChat:从 jQuery 里学习设计模式”

Chat idea:记一次 Firefox 下 Vue 带来的性能危机的解决

前两天遇到一个问题:我厂的一个产品在 Firefox 下,可能发生因为 CPU 占用过高而卡死的情况。这个问题在测试环境不复现,在 Chrome下基本上也不会复现。

因为我厂老板是这个产品的主要用户,这个 bug 让我倍感压力,但一直没有解决它的好办法。终于有一天,在某台生产机上调试另外一个 bug 的时候,我终于发现了稳定复现这个 bug 的方式。

接下来就是几个小时的 debug,然后发现问题所在,然后解决问题,然后发现解决方案不理想,于是寻求新的解决方案,然后找到新的 API,最终彻底的解决这个问题。

接下来我就分享这个过程,读完整篇文章当中你将学会:

  1. 使用开发者工具查找性能问题
  2. 不断切分,缩小问题范围
  3. 理解 Vue 响应式原理分析问题根源
  4. 修复问题并验证
  5. 新的解决方案 Intersection Observer
  6. 解决问题并上线

目标读者:

  1. 中级开发者
  2. 熟悉原生 JS

大家觉得这个 idea 如何?请留言告诉我。不出意外的话这将是我下个月的 gitchat 内容。

Stylus 实现 `content: “5”`

一般来说 Stylus 对属性是直接替换的,所以正常来说下面的 stylus

$a = 10

.foo::before
  content $a

会编译成:

.foo::before {
  content: 10;
}

这样是非法的,10 不会渲染出来。如果想让它渲染出来,必须用字符串。如果只有一个值,那就好办了,直接 $a = '10' 就好。但如果在循环里,就比较麻烦,此时,可以用 '' + 10 转换成字符串,或者使用 s(template, value),以下两种方式是等效的。

// 注意运算顺序哦
.foo
  for n in 1..5
    &:nth-child({n})::before
      $str = '' + (5 - n)
      content $str

  for n in 1..5
    &:nth-child({n})::after
      $str = 5 - n
      content s('"%s"', $str)

最近折腾 @babel/preset-env 的一些小心得

近来厂里的项目越来越多,代码共享必不可少。我现在采取的方案是:

  1. 把公共组件拿出来,开一个新仓库
  2. 使用 webpack 进行打包编译,libraryTarget: 'umd'
  3. 将打包编译的代码一起提交到仓库
  4. 使用 npm i <owner>/<repo> -S 安装依赖,因为我厂的仓库均为私有,所以不能发布到 NPM

这套方案简单好用,实操效果良好。接下来我希望优化打包结果,于是研究了打包配置项,下面是我的一点心得。

继续阅读“最近折腾 @babel/preset-env 的一些小心得”

OpenResty Inc. 招聘后端工程师

OpenResty Inc 中国大陆子公司诚邀后端工程师/系统工程师加入。希望能和对后端技术有激情、有想法、有追求的年轻人一起构建 OpenResty Trace、OpenResty Edge、OpenResty QA/Showman、OpenResty CI 等全新一代的企业级软件产品,实现“机器编程”、“机器调试”、“机器测试”和“机器演示”的宏伟蓝图。

继续阅读“OpenResty Inc. 招聘后端工程师”

Chat:Vue 进阶必经之路

Vue 进阶必经之路

Vue 的学习曲线平缓,入门很简单,所以后发夺人,争取到一大批支持者,我也是其中之一。但是因为隐蔽了很多细节,所以我也没少踩坑,挠头拍桌,不厌其烦。如今,我终于突破屏障,遇到大部分问题,都能举一反三,快速定位、快速解决。这段过程,难免追本溯源,穷究细节。我希望通过这次分享,把我的经验和收获传达给大家。

面向听众:

1. 有一定 Vue 开发经验,希望进一步提升;
2. 平时业务代码写得多,想学习技术细节。

写完了,不得不说,没有预先想象中写得好。原因嘛,当然是工作太忙,能够写文的时间不太够。以后还是平时多写,Chat 当汇总比较好。

不过还是希望大家都来看,毕竟我这两年踩坑得到的 Vue 经验都在里面了。

继续阅读“Chat:Vue 进阶必经之路”

用 `resize` 和 MutationObserver 实现缩放 DOM 并记录尺寸

使用 `resize: vertical` 和 MutationObserver 实现调整任意元素的尺寸,并且记录它的尺寸以备再次使用。

我厂既然号称“机器编程”,DSL 便属于基础配置。于是,各个产品几乎都需要用到 CodeMirror,用于在线写代码。大家的屏幕分辨率不同,对编辑器的大小要求也不同,最简单的办法就是让大家自己调整,并且将尺寸保存在本地。

以前的做法会复杂一些:

  1. 拿一个元素作为 handle 放在角落里
  2. mousedown 时开始侦听 mousemove,动态调整文本框大小
  3. mouseup 时保存尺寸

如今大家应该都有注意到,<textarea> 右下角多了一个缩放用的 handle。这个功能自然不是 <textarea> 独享,而是受 CSS 样式 resize 控制,任何块级元素都适用。MDN 文档在此,建议大家先好好看一遍。

继续阅读“用 `resize` 和 MutationObserver 实现缩放 DOM 并记录尺寸”

2019泰国曼谷初印象

年初去了趟泰国,很喜欢,小记一下。

由于工作的关系,2019年1月份我在泰国曼谷呆了几天,初步感受了下这个充满魔幻感、各种元素杂糅、又非常有魅力的城市。

东南亚各国,泰国最有名,但我只去过一次清迈。我对泰国的印象基本来自电影电视,比如《宿醉2 》、《泰囧》和《唐人街探案》。电影里面对泰国的描述当然极尽夸张之能事,不过真到了那里,发现还真的很魔幻。

曼谷比较出名的天台bar
继续阅读“2019泰国曼谷初印象”