开发一个 Prettier 插件：全局替换资源引入路径 <W15>
最近在迁移项目，对于一些资源的引用路径，需要换成一个新的路径。还好之前都把资源引用的方式，改成以 @/.. 别名引入的方式，替换起来还算简单。先把新旧路径列出来，然后用 VSCode 的全局替换，因为就只有三种，CV 三次就好了。这种方法，在当时我认为是比较好的了，其实也有打算整个什么脚本啥的，但不知道从何做起。直到当天晚些时候，看到了神光大佬最新发布的一篇文章：写一个同事见了会打你 ...
用 npm-pack-all 批量生成 .tgz 文件 <W14>
最近，组内的一位同学咨询我：能不能离线下载 npm 包，我的回答是：据我所知，应该不行。然后他发来一个链接，说是按照这个操作，最后一步报错。emm，又涨知识了。点开大概看了看，用到了 npm-pack-all 这个工具，可以将 node_modules 中的依赖生成一份 .tgz 文件，再使用 npm install 安装这个 .tgz 文件就好了。感觉挺有意思，不过如果一步一步生成 ...
Vue 中如何取消 ViewDesign 中组件内部的指令 <W13>
最近需要做这样一个功能：当展开下拉框或者日期选择器的浮层面板后，点击某个区域，不会让浮层消失。如果有了解过组件库内部源码的话，这种浮层的点击外部后隐藏，大多数组件内部都是通过一个 clickOutside 的指令来实现，而目标功能就是需要实现一块 “禁区”，当点击 “禁区” 时不会触发 clickOutside。本文就是基于该功能的实现对这个指令进行探索，记录自己实现这个功能的全过程 ...
拦截网页请求并处理数据 <W12>
有时候需要拦截网页的某个请求，收集响应数据，单个请求直接操作就好了；如果是多个相同 API 的请求，如果有个批处理数据的工具岂不美哉。于是，它来了。本来打算弄成一个油猴插件，但是浏览器总是会把插件的打印日志给 “吞掉”，那就先直接在控制台运行脚本，更简单明了。 介绍用到了一个插件 ajaxhook，官方是这样介绍的： 在 XMLHttpRequest 对象发起请求之前、收到响应内容 ...
CSS实现曲线导航菜单 <W11>
最近看到一个这样的效果，挺有意思的，打算自己动手试一试。 拆解首先，看到这个缺口，心里想，这玩意要怎么弄，一头雾水。不过，对于这种形状怪异的，大多数都可以通过多个图形组合做出来，对于这个，可以拆成由下面三部分组成。 ↓ ↓ ↓ 对于左右两边的，可以通过圆角半径实现，重点是中间部分：缺口是个半圆的图形。在脑海里迅速头脑风暴一下，CSS 中可以实现一个圆形缺口有关的方案。 ...
JS中的类型转换 <W10>
JS 中的数据类型基础数据类型（又称为原始值）：null 、undefined 、boolean 、string 、number 。 声明时：用栈存储，栈中存放的是对应的值； 赋值时：生成一块相同值的栈，两个变量对应不同的地址。 动态数据类型：Array 、Object 、Set 、Map 等。 声明时：值存放在堆中，栈中存放指向堆的地址； 赋值时：将栈中的地址赋给另一个变量，也 ...
如何实现状态的「伪更新」? <W9>
最近要做一个与颜色选择器有关功能：当用户在颜色面板里预选颜色时，需要同时更新当前画布的颜色；如果取消选择，则将画布背景重置为初始颜色；如果确定了颜色，则更新当前画布颜色。比较容易想到的方法是，用两个变量分别记录初始值 originValue 与当前值 value ：如果只是选择，那就用去更新 value ；如果取消选择，重置为 originValue ；如果选中，将 originVa ...
Vue：beforeCreate -> created <W8>
如上图所示，Vue 在 beforeCreate -> created 阶段，按这个步骤进行初始化操作。按照这个顺序，也就意味着后者初始化的时候，可以使用前者已经初始化的变量。例如：在 data 中可以使用 methods 里定义的方法，也可以用 props 引入的属性进行初始化。 initInjectionsinject 的使用请参考官方文档。 先获取当前实例上注册的 i ...
v-resize：监听 DOM 尺寸变化
前两天一个同事遇到一个问题：从当前子应用再切换到另一个子应用，然后再切回来，当前子应用里 echarts 图表的宽度发生了变化，整体都变宽了一些，而且这个问题只有在测试环境下才有，线下开发环境一切正常。试了试，只要触发一次 echarts 自带的 resize 方法，就能将图表样式调整为正常样式了。于是就想到了，之前看过一个 UI 库出的指令 v-resize：当前 DOM 宽高发生 ...
ivu-input-number-union <W7>
最近朋友问我，多个数字输入框联动怎么做？他遇到一个需求，表格里的某一列是输入数字输入框，有多行，而最后一行是这些数字的总和。要达到的效果是，当输入框中的数字和超出总和时，清空所有输入框；如果未超出最大值，且还剩一个输入框未输入时，自动对最后一个输入框赋值。刚好前一段时间，做了一个下拉框联动的，两者的大体思路是相同的。首先是采用指令去实现，过程稍稍有点复杂，于是最后又实现了一个二次封装 ...