前端架构&软实力-前端拾遗

dom事件机制

事件触发后有三个阶段

1. 事件捕获阶段
2. 命中目标（触发入口）
3. 事件冒泡阶段

flex每行两个元素

.container {
    display: flex;
      flex-wrap: wrap;
}

.item {
    width: 50%;
}

event对象中 target和currentTarget 属性的区别

• event.target返回触发事件的元素
• event.currentTarget返回绑定事件的元素

clearTimeout

clearTimeout(tid)只是将tid指向的定时器关闭，并不会将tid置为null

如果不在适当的时机清除定时器，每次事件触发都会多一个延时器，延时器之间互相干扰，造成紊乱。

JSON.stringify()

基本用法：

• 默认情况下JSON.stringify()会输出不包含空格或缩进的JSON字符串

• 在序列化JavaScript对象时，所有函数和原型成员都会有意地在结果中省略。此外，值为undefined和Symbol的任何属性也会被跳过。最终得到的就是所有实例属性均为有效JSON数据类型的表示。正则则会变为空对象

• 一共能接受3个参数，第二个参数是过滤器，可以是数组或函数；第三个参数是用于缩进结果JSON字符串的选项

第二个参数：

• 如果第二个参数是一个数组，那么JSON.stringify()返回的结果中只包含该数组中列出的对象属性：

• 如果第二个参数是一个函数，则行为又有不同。提供的函数接收两个参数：属性名（key）和属性值（value）。可以根据这个key决定要对相应属性执行什么操作

const userInfo = {
    name: "tom",
    age: 23,
    address: "Shanghai"
}

console.log(JSON.stringify(userInfo, ["name"]));
// {"name":"tom"}

console.log(JSON.stringify(userInfo, (key, value) => key === "name" ? value.toUpperCase() : value))
// {"name":"TOM","age":23,"address":"Shanghai"}

第三个参数：

控制缩进和空格

const userInfo = {
    name: "tom",
    age: 23,
    address: "Shanghai"
}

console.log(JSON.stringify(userInfo, null, 4))
/*
{
    "name": "tom",
    "age": 23,
    "address": "Shanghai"
}
*/

git 撤销修改

git checkout .撤销所有未git add的修改

git reset --soft HEAD^撤销所有git commit

git reset --hard HEAD^撤销所有git commit + git add