Element UI FormItem 自定义子组件怎么进行规则校验
背景：业务方觉得 Element UI 的 Input 密码输入框不能一直显示小眼睛图标，不太好看，提出了想一直显示的需求。
需求：看了 Element UI 的文档，没办法通过传递属性来实现，于是需要自己对 Input 密码输入框进行二次封装。
要实现的功能：
对 <ElInput> 组件进行二次封装，支持一直显示小眼睛图标，并且可以切换明文和密码两种模式
通过 <ElFormItem> 组件嵌套的时候能支持像 <ElInput> 组件的自动校验
当使用组件时，支持像 <ElInput> 组件的传参 TS 提示
方案：
Vue $attrs 可以拿到所有的属性和事件，但是组件在消费的时候，没有 <E...
Array.sort() 排序
在 JavaScript 中，我们会使用 Array.sort() 来进行排序，一般的用法如下：
array.sort((a, b) => a - b); // 升序
array.sort((a, b) => b - a); // 降序
问题是：为什么 a - b 得到的是升序，而 b - a 却能得到降序呢，因为 a - b 和 b -a 都存在结果为正或负的情况，内部到底是怎么计算的呢？
在新版本的的 V8 引擎中，使用的是 TimSort 算法，我们主要看旧版本的 V8 引擎中的排序算法。
在旧版本的 V8 引擎中，会根据数组的长度来决定使用什么排序，如果数组的长度大于 22（各版本不一致） 则会使用快速排序，否则使用插入排序。
插入排序的大致逻辑：
v...
怎么在保留 hover 类的情况下设置字体颜色？
在使用 UI 框架进行业务开发时，UI 框架一般都是内置一套 CSS 样式，当我们需要对特定的组件修改样式时，一般会覆盖框架内置的 CSS 样式，但是有时候我们想保留一些框架内置的 CSS，例如：在按钮悬浮的时候保留框架内置的悬浮态，但是修改正常状态下的颜色。此时我们在设置元素的 color 属性是会同时把框架内置的 :hover 伪类下的颜色也覆盖掉，为了避免这种情况，可以使用 :is() 选择器配合 :not() 选择器实现：
.father :is(.son:not(:hover)) {
// 样式
}
:is() 伪类选择器没有权重，所以在上面的例子中，权重 = .father 类，然后在 is() 中选中子元素，同时子元素必须不是处于鼠标悬浮状态，此样式才有效。
...
Three.js 之纹理
纹理（Texture）
通过纹理可以给 mesh 添加图片，颜色，视频等。
bumpMap：给纹理设置深度效果
normalMap：在一个 points 比较少的 mesh 中，展示比较详细的纹理
displacementMap：让纹理有扭曲效果，但是对 points 比较少的 mesh 效果不明显
aoMap：通过 aoMap 可以提高 mesh 被灯光照射时阴影计算的性能，可以控制部分阴影的强度
lightMap：通过 lightMap 可以设置 mesh 的阴影
metalnessMap：一种摸起来更加有质感的纹理
roughnessMap：一种摸起来更加光滑的纹理
alphaMap： 透明的纹理
emissiveMap：一种看着像发光的纹理，配合 emiss...
Three.js 创建组和 mesh
THREE.Group
使用 Three.Group 对多个 mesh 进行管理，同一个组内的 mesh 的位置都是相对于它的父级。
如果需要创建大量的 mesh，使用 Three.Group 会有性能影响，可以使用 Three.InstancedMesh
THREE.InstancedMesh
THREE.InstancedMesh 和 THREE.InstancedBufferGeometry 可以对具有相同的几何体的的 mesh 的渲染进行性能优化，能够显著减少性能消耗
BufferGeometryUtils.mergeBufferGeometries
如果大量的 mesh 的几何体不一样的话，可以使用 BufferGeometryUtils.mergeBufferG...
Three.js 之点
点和精灵（Point and Sprite）
使用点（Three.Points）可以创建一个云团，云团由很多个点组成。
也开始使用 THREE.Sprite 创建点，点是一个二维的，并且永远朝着相机。
使用 sizeAttenuation 属性可以控制点是否有透视效果（近大远小），但是在正交相机下无效。
使用 map 属性可以给点添加贴图，贴图可以通过 THREE.Texture(canvas) 获取 Canvas 的图案显示，也可以通过 THREE.TextureLoader().load(image) 来加载图片，图片的宽高最好是 2 的倍数。
使用 velocity 属性对点的位置进行移动。
Three.js 之后处理
postprocessing
使用 THREE 提供的 EffectComposer 可以给渲染的场景添加特效。
Three.js 之动画
通过 THREE.RayCaster 获取某个坐标是否在 mesh 上
通过 RayCaster 可以判断当前鼠标是否悬浮在某一个 mesh 上面：
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(pointer, camera);
const intersects = raycaster.intersectObjects(cubes, false);
通过 DragControls 拖拽 mesh
import { DragControls } from 'three/addons/controls/DragControls.js';
import { OrbitControls } fro...
50 post articles, 7 pages.