漆黑菌的博客

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

写给自己看的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日 发布

nextTick执行顺序小探

缘起 群友在群里问了下nextTick和updated的执行时间。我一开始觉得肯定是先updated再nextTick。然而实验结果稍微有点意外，要看注册nextTick函数的时间。在数据变动之前就比updated钩子先，之后则后。 原理 vue为了减少数据多次变动导致的watcher多次被过量更新，实际上处理数据变动产生的副作用是放在异步的timerFunc函数里操作的，劫持timerF...

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

探索el-input使用v-model.trim后无法输入空格的问题

原理 elementUI和vue genComponentModel机制冲突。作用在组件上的v-model在加了trim修饰符后向子组件传递value（默认情况下）事件时会先进行trim操作。而el-input中this.value和this.nativeInputValue同步的机制 nativeInputValue() { return this.value === nul...

本文章由 漆黑菌 于 2020年12月06日 发布

使用html-webpack-inline-source-plugin把js和css全部输出到单个HTML页面

需求 公司项目有个新需求，需要前端提供HTML模板后端灌数据进行混合渲染。 遇到的问题 首先想到的就是最原始的前端写HTML基础，然后后端写逻辑+灌数据的模式。之前同项目的消息通知模板也是采用这种模式，但是这种模式在使用过程中暴露了很多问题。 前后端责任不清晰，之前要进行国际化的时候，就需要前后端反复沟通费时费力效率低。 前端工程化技术突飞猛进，再也不是当年简简单单引入boot...

本文章由 漆黑菌 于 2020年11月27日 发布

兄弟选择器配合flex-reverse实现连线hover效果

原理 因为种种原因，css世界里基本上是只能上文影响下文，父元素影响子元素的。而flex-reverse等css样式可以通过改变视觉顺序和dom实际顺序的关系，也就是看上去是下文的元素实际上在dom中是上文，产生通过下文影响上文的错觉。 要点 看上去的第一行实际上是第二行，看上去一行的第一个item实际上是最后一个。 看上去的第二行实际上的第一行hover时，左半边看上去空空的元...

本文章由 漆黑菌 于 2020年11月22日 发布

梦幻联动————记一次disabled样式失效

现象 某页面中的翻页button，disabled后光标还是默认样式。一开始还以为是忘记加了，结果用开发者工具看，是有cursor: not-allowed;样式的，然而!important都用上了还是没有正确的not-allowed光标样式。 排查 在Chrome上发现的，换Firefox试试看是不是浏览器实现问题，然而Firefox表现一致。 同事提出是不是上面遮挡了什么奇怪...

本文章由 漆黑菌 于 2020年06月05日 发布

探索可拖拽自定义看板

需求 某客户可能需要一个功能更强大自定义程度更高的看板，能够根据一定的规则（如尺寸，图表类型）进行看板的自定义。 参考 Azure DevOps Dashboard vue-cli自定义Dashboard HTML5原生拖拽/拖放 Drag & Drop 详解 MDN HTML 拖放 API 修复跨浏览器情况下Drag事件表现不一致FireFox onDrag...

本文章由 漆黑菌 于 2020年06月04日 发布

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