相似请求合并
前言在日常开发中，有一种很常见的接口场景：例如，需要获取 type 为 a 的数据，这时候的接口入参为 { type: ["a"] }。如果需要同时获取 type 为 a 和 b 的数据，则入参为 { type: ["a", "b"] }。在需要获取多种 type 数据的场景中，显而易见，只 ...
重复请求优化
设想一种场景，有两个组件，这两个组件在初始化阶段，都需要调用同一个 API 接口去获取数据。为了防止请求冗余，可以把两个组件的请求都挪到父组件中，由父组件统一调用一次请求，然后再将响应的数据结果传给两个子组件。这种方法应该是最常见的，不过它也有一个局限性条件：两个组件必须有一个共同的祖先组件，如果这两个组件是同级的兄弟组件倒也还好，如果非同级，那么数据的传参就会有些麻烦了。那么还有其他办法 ...
最大余额法
当开发一些图表类页面时，经常需要对一组数据求百分比，而像是常用的 Echarts 图表，在内部已经计算妥当了，保证一组数据在计算完百分比之后，这些百分比相加后仍然等于 100% 。而这种计算百分比的算法之一就是 —— 最大余额法。 核心思想就是，根据每部分所占比例的大小，按照从高到低的顺序去分配剩余部分。 比如，一组数据 [ 4, 4, 3 ]，所占百分比为 [ 36.363636363 ...
大数相乘
由于 JS 最大整数为 2 ^ 53 - 1，最大长度也就是 16 位，当进行一些高精度计算时，容易造成精度丢失的问题。平常对于一些大数值的数据，一般都用 String 类型存储。而使用 String 类型，当进行四则运算时，就需要进行特殊处理，本篇就来实现一下两个大数的相乘。 两个整数的大数相乘，这是一道经典的算法题了，参考力扣 43. 字符串相乘。而这里需要考虑小数的场景，思路其实很简 ...
当 JSON 字符串更新时添加提示动画🦄 <W17>
为了便于用户能直观地看到配置项的一些属性，于是把整个配置以一个 JSON 串的形式展示。本来打算以一个表格或者列表的形式展示，不过配置项中某些属性是 Object 类型，思来想去，还是 JSON 串更直观一点。但是当某个配置改变时，JSON 里的变动不是很明显（如下图所示）。当这个 JSON 里的属性太多时，就不容易能注意到是哪个配置变了。于是，就想能不能做一个属性变化的提示，当某个 ...
给 ViewDesign 加个主题换肤💖 <W16>
最近要做主题换肤的功能，项目用的 UI 框架是 ViewDesign ，只支持定制主题，不支持动态主题。查了好多资料，比如：用 less 变量更换、预设几种主题的 CSS 的文件，再动态切换 link 标签的引入资源路径等等。这些方案的应用场景是，对项目中完全自主开发的模块的颜色进行切换。也即，你自己开发了一个导航栏（Menu）和顶部（Header），这俩你是完全控制的，用上述提到的 ...
拦截网页请求并处理数据 <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 ...