高度过渡

当想实现一个 height:0 到 auto 的平滑过渡，一般有以下几种思路：

1. 使用 transition: 500ms height ease;，但是 auto 并不是一个确定的值，导致 transition 是无效的
2. 使用 transition: 500ms max-height ease;，但是过渡动画会不准确，有延迟
3. 使用 transform: scaleY()，但是会导致元素被压缩
4. 使用 JavaScript 解决
5. 使用 Grid 布局，当前最优解

视频API-自动播放

文件API-浏览器操作文件

剪切板API

navigator.clipboard.readText: 用于读取剪切板

navigator.clipboard.writeText: 用于写入剪切板

window监听 paste事件，FileReader文件流形式处理图片

案例如下：点击按钮切换复制内容测试，测试图片则需要复制图片再回来粘贴

单例模式

Proxy: Proxy 代理可以使得操作 singleton返回的对象 的原型时，能挂载到原型上

function singleton(className) {
  let ins
  return new Proxy(className, {
    construct(target, args) {
      if(!ins) {
        ins = new target(...args)
      }
      return ins
    }
  })
}

class Cat {}
const NewCat = singleton(Cat)

const catA = new NewCat()
const catB = new NewCat()
console.log(catA, catB, catA === catB) // Cat {} Cat {} true

深克隆

解构

{...xxx} 只能实现第一层，当有多层的时候还是浅拷贝

JSON

JSON.parse(JSON.stringify(xxx)) 该方法不会拷贝内部函数

递归

利用递归实现函数

structuredClone

let a =  { a: 1, b: 2  }
a.c = a
let b = structuredClone(a)
let c = a
a.a = 2

console.log(a) // {a: 2, b: 2, c: {a: 2, b: 2, c: {…}} }
console.log(b) // {a: 1, b: 2, c: {a: 1, b: 2, c: {…}} }
console.log(c) // {a: 2, b: 2, c: {a: 2, b: 2, c: {…}} }

图标描边

段落首字母

first-letter: 当前元素的第一个字母

段落高亮样式

selection：文本选中样式选择器

段落文本高亮

box-decoration-break：块状盒子片段，clone 能使得每个片段都具有相同的 border、box-shadow 和 background

元素深度聚焦捕获

focus-within: 当前元素以及后代元素的聚焦事件

元素必填项

has: 表示满足一定条件后，就会匹配该元素

居中定位

absolute + margin

absolute + transform

flex

grid

table

隐藏元素

display

元素在页面上消失，不占据空间。

opacity

元素在页面上消失，占据空间。