漆黑菌的博客

也许面向工资编程才是先进生产力的发展方向...

前端git提交时只eslint检查增量修改

需求背景 现在在维护的代码已经写了很久了，一开始的时候可能并没有严格按照eslint去写，而且已有代码量也很大。在新增lint检查后，每次提交前如果进行全量检查那么就有点浪费时间了，而且还很有可能因为历史代码报错提交不上去。所以最好只检查已改动的代码，一点一点慢慢来。 参考文章 lint-staged官方文档https://github.com/okonet/lint-staged hu...

本文章由 漆黑菌 于 2021年09月01日 发布

前端使用buildx构建docker多架构镜像

需求背景 docker支持一个镜像tag对应多个架构镜像，并根据对应环境自动拉取。构建方式大概有两种，一种是传统方式，先分别构建不同架构的镜像，然后再聚合成一个。还有一个是通过buildx工具（对环境有较新要求）直接构建一个多架构镜像。buildx直接内置了模拟器在一台机器上就能构建多种架构的镜像，并自动聚合。 本次为了后面构建方便选择了使用buildx方式，这样就不用手动聚合了。 参考...

本文章由 漆黑菌 于 2021年08月06日 发布

小探web worker与任务分片

demo 渲染大量随机不重复颜色div测试 思路 JS只有单线程，当执行大量任务时可能阻塞渲染线程 web worker提供了额外线程能力，可以把较为复杂的计算任务丢给worker线程去做，（现在Monaco-editor就会把语义分析任务丢给worker） requestIdleCallback接口提供了闲时执行的能力 把复杂任务串行化，使之可以中断。这样就可以把浏览器...

本文章由 漆黑菌 于 2021年07月28日 发布

小探min-height与min-width

起因 某次周会分享的时候，同事介绍了aspect-ratio属性。有个很好玩的现象，当设置了aspect-ratio和min-height:0的时候和只设置了aspect-ratio的时候，虽然浏览器里min-height的显示都是0，但是表现会很不相同。详情可见参考文档1。第一种设置的时候，子元素超过比例限制会撑大父元素。但是第二种不会。 参考文档 https://drafts.c...

本文章由 漆黑菌 于 2021年06月28日 发布

键盘支持总结

tabindex -1 只能通过js或鼠标focus 0 键盘tab，js和鼠标都能focus 当tabindex≥1的时候，按tab时会按照数字从小到大切换。但是0是排在其他数字之后的。比如有0、1、2、3，那么顺序是1-2-3-0 给svg图标组件添加类似button的行为 button可以被tab选中，选中后键盘输入enter或空格都会触发click效果。disabl...

本文章由 漆黑菌 于 2021年06月16日 发布

小探 flex 渲染机制

起因 在新dao-table组件中使用了flex布局，对td设置类似flex: 1 1 0的属性可以让子元素等分空间。直到后面给th和td添加了不同的padding，然后th和td就对不齐了。 flex-basis 与 width flex-basis在flex中类似普通布局中的width，在flex中设置width是不会直接生效的。看上去给flex元素设置width会影响元素尺寸，很多时...

本文章由 漆黑菌 于 2021年06月01日 发布

写给自己看的chrome开发小技巧

console/elements 快捷操作 $$ 类似jQuery选择器/document.querySelectorAll的简写 $_ 快速获取上一行变量 $0 配合 elements 面板快速选中 dom $0–$4 : 依次返回五个最近你在元素面板选择过的DOM元素的历史记录，$0是最新的记录，以此类推 vue 开发者工具有个类似上面的 $vm0 内置函数co...

本文章由 漆黑菌 于 2021年06月01日 发布

npm link 简单使用方式总结

目的 本地开发新版公共组件时，在没发版的情况下就在业务代码中预览并快速debug。 npm link 第一步，先在公共组件代码仓库中执行npm link 第二步，再在业务代码仓库中执行npm link <公共组件packagename> 官方还有个简单的方法npm link ../公共组件的地址 ，相当于快捷执行了上面的第一步和第二步。 移除link到本地项目加...

本文章由 漆黑菌 于 2021年05月19日 发布

小探vue2的组件级watcher+diff

缘起 在学习为什么vue要引入vdom的时候看到了一个说法 在Vue1.0中采用了极高的细粒度，每一个绑定一个对应的watcher实例，进行观察状态的变化，但是当状态越多的节点被使用时，会有一些内存开销以及一些依赖追踪的开销。 在Vue2.0以后，引入了虚拟DOM，为单个组件设置一个watcher实例，即使组件内有10个节点，里面状态发生变化时，只会通知到组件，然后组件内部通...

本文章由 漆黑菌 于 2021年04月09日 发布

vue老项目升级vue-cli新版模板总结

总体思路 先用新版vue-cli创建一个空白模板，然后把原有的源代码部分迁移过去。把eslint关掉，先一点点改webpack相关报错信息，改好了再加回来，改eslint的报错信息。推荐把eslint的自动化lint单独写一个commit方便code review。只靠前端想很好的迁移也不太现实，最好找个测试也有空的时候，让测试同学一起发现各种问题。 遇到的坑总结 环境变量名称修改 新版c...

本文章由 漆黑菌 于 2021年03月25日 发布

FEATURED TAGS
helloworld Linux 记录生活 微信 JavaScript tomcat 开机启动 免费CDN VPS nginx 科学使用 网络工程 代理 vue webpack css 面试总结 npm 移动端 docker Windows checkbox vue-cli monaco-editor vue3 vue2 qiankun vue2.6 vue2.7 vue $slots vue $scopedSlots
关于我

人生梦想之一是和叶绿体整合，这样就可以不吃饭了。

✉️ 还没想好用哪个邮箱……

FRIENDS