前端笔记(202404)

history.push

hisory.push(path) : 这是我们常用的方式， 其实hisory.push还可以支持对象的方式传递参数 比如 :

history.push({ pathname:'path' , query:{},  search:', ...)	

这里面的所有参数都会透传到路由的 location 里面，当然window.location 是无法获取到我们这里自定义的参数的。

浏览器控制台验证第三方工具包

1. 找到第三方工具包的cdn 地址（cdnjs.com/libraries?q…
2. 在浏览器控制台输入:

await import('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js')
dayjs().format('YYYY-MM-DD')

npm 安装github模块

比如:

npm install git+https://github.com/sindresorhus/slash.git

// 安装git仓库特定的分支 '#'后面是对应的分支
npm install git+https://github.com/pillarjs/path-to-regexp.git#0.1.x

package.json :

{
  "dependencies": {
    "path-to-regexp": "git+https://github.com/pillarjs/path-to-regexp.git#0.1.x",
    "slash": "git+https://github.com/sindresorhus/slash.git",
   }
}

npm 使用别名同时安装一个包的两个版本

npm install vue2@npm:vue@^2.6.14
npm install vue3@npm:vue@^3.2.37

package.json

{ 
	"dependencies": {
		"vue2": "npm:vue@^2.6.14", 
		"vue3": "npm:vue@^3.2.37" 
	} 
}

structuredClone

structuredClone  js内置的深度克隆函数， 相比JSON.stringfy 能够克隆日期对象， 但是也有一些限制， 不能克隆函数和原型链上面的一些属性和方法。chrome98 才支持。

移除事件监听器有多种选择

常用方式

let onClick = () => {}
document.addEventListener('click', onClick)
document.removeEventListener('click', onClick)

匿名函数

// 第二种方式（匿名函数）
document.addEventListener('click', function onClick() {
// ...
this.removeEventLisener('click', onClick)
})

AbortController

// 第三种（AbortController） 可以移除多个
const controller = new AbortController()
const { signal } = controller

document.addEventListener('click', ()=> {}, { signal})
document.addEventListener('click', ()=> {}, {signal})

// 移除所有的时间监听
controller.abort()

cloneNode

// 第四种 （克隆dom 节点，清除出事件, <button onclick='console.log('')'/> 这种绑定的事件无法清除）

// 老版本浏览器
button.parentNode.replaceChild(button.cloneNode(true), button)
// 现代浏览器
button.replaceWith(button.cloneNode(true))

初始化一次的几种方式

// useMemo (不推荐，官方文档说useMemo 只能用作代码优化， 不保证将来API 会变更导致多次执行)
const resource = useMemo(()=> new Resource(), [])

// useState (推荐)
const [resource] = useState(()=> new Resource())

// useRef (代码量稍多)
const resource = useRef(null)
if (!resource.current) {
	resource.current = new Resource()
}

使用 useReducer 切换状态

const [value, toggleValue] = useReducer((previous)=>!previous, true)

toggleValue() // value:false
toggleValue() // value:true

ssh-keygen 生成密钥对

# ssh-keygen -t rsa -C "123456@qq.com" -f ~/.ssh/test/crm-git
 
-t 表示密钥的类型 rsa/dsa
-b 表示密钥的长度 
	对于RSA密钥，最小要求768位，默认是2048位。4096指的是RSA密钥长度为4096位
	DSA密钥必须恰好是1024位(FIPS 186-2 标准的要求)。
	
-f 表示密钥的存放位置路径
-C 用于识别这个密钥的注释 ，这个注释你可以输入任何内容（邮箱），很多网站和软件用这个注释作为密钥的名字