// 作业70：Vue 和 React 的 Diff 算法比较
- 第八遍 2025.2.18 - 
Vue 双端指针算法，没找到 ⭐️ // 组件级别的更新
    - 同标签+同key ，先查询索引是否一致
    - 索引不一致，列表：移动修改使用
	- 跳过静态节点
react 分层级比较 + 同类型有限比较 ⭐️ // 同层级优先比较 + 节点属性级别的更新
	- 不同标签，直接重新渲染
	- 同标签，修改属性使用
	- 列表：同标签+同key
- 第七遍 2025.2.16 -
❌ // 1、Vue 少写了：静态节点跳过；双端指针比较算法找不到时，要判断 同类型+同key 节点是否同索引
- 第六遍 2025.1.31 -
⭐️ // React 是精确到节点属性级别的 Diff 计算，适合大型动态复杂场景；Vue 基于组件级别的 Diff 计算
- 第五遍 2025.1.25 -
❌ // 1、Vue 少写了：静态节点跳过 ；是基于组件级别的更新算法
❌ // 2、React 少写了：是基于单个节点属性级别的，适合大型动态复杂场景
- 第四遍 2025.1.24 -
❌ // 1、Vue：找不到匹配的点后，再找到同类型+同 key的节点，进行索引比较，一致则复用，不一致则移动到新位置修改使用
- 第三遍 2025.1.18 -
❌ // 1、Vue：静态节点跳过比较 - 不要遗漏了，是个很重要的性能优化
❌ // 2、Vue：双端指针比较后，还有找不到的 -> 找同类型+同key来比较
- 第二遍 2025.1.13 -
⭐️ // React：「列表组件，根据 key 确定新老节点关系」
❌ // 1、Vue：双端比较算法是直接找匹配节点，不进行 标签修改
❌ // 2、Vue：key 是第三层比较逻辑，第二层比较逻辑是「索引」 - 若索引没有变化，则不更新当前节点；如果索引有变化，判断是否「同类型 + 同key」，移动到新位置
❌ // 3、Vue：性能优化，编译时标记的静态节点跳过 - 虽然老生常谈，但是这其实是一大优化
- 第一遍 -
❌ // 1、简单描述下 React 的 Diff 算法是「精确到单个节点的属性级别」，适合「大型复杂场景」，例如大量动态组件和频繁更新的场景
❌ // 2、React：这里可以标题记忆 「① 分层比较 + 同类型比较优先策略」
❌ // 3、React：这里主要是指：「列表组件」中，根据 key 确定新老树子节点的关系
❌ // 4、React：少写了「② DFS 深度优先遍历子节点」
❌ // 5、描述：「更新基于组件级别」
❌ // 6、双指针其实很不明确，「双端比较算法-双向指针」
❌ // 7、是会复用，但是场景是「双端比较法没有找到足够匹配的节点，就根据节点的索引进行比较」
// 8、检索「同类型+同key 的节点」，「索引位置」没有变化，就认为这个节点不需要更新；若有变化，就「移动到新位置」，「复用旧列表」

// 2023.07 clickhouse、mysql、mongodb异同 
- 第五遍 2025.2.18 -
mysql 关联数据库；读写性能都优；但高并发时，会有数据不一致；适合小型应用 ❌ // 1、少写了：支持事务操作
mongodb 文档型数据库；读性能优，写性能差；在分布式操作时，会有数据不一致；适合非结构式/半结构式数据 HTML、XML等
clickhouse 列式数据库；读写性能都好；支持异步/分布式操作；适合高吞吐、低延迟场景 ❌ // 2、少写了：不支持事务
- 第四遍 2025.2.16 -
❌ // 1、mysql 少写了：支持事务操作；出现数据一致性问题：高并发时
❌ // 2、mongodb 出现数据一致性问题：在分布式场景时
❌ // 3、少写了：列式数据库；少写了：不支持事务，支持分布式查询；少写了适合高吞吐、低延迟的场景
- 第三遍 2025.1.30 -
⭐️ // clickhouse：高吞吐、低延迟，支持复制、分布查询 + mongodb：分布式场景下一致性问题
- 第二遍 2025.1.25 -
❌ // 1、mongodb：在分布式场景下可能出现一致性问题 ；适合半结构化/非结构化数据
- 第一遍 2025.1.22 -
❌ // 1、mysql 是关系型数据库-适合事务处理场景；MongoDB 是文档型数据库-半结构化/非结构化数据；ClickHouse 是列式数据库-适合高吞吐、低延迟的分析场景
❌ // 2、mysql：一致性描述错误：高并发时可能出现一致性问题
❌ // 3、mongdb：性能描述错误 - 写的性能弱，读的性能好；适合数据少写了：半结构化数据，类似 XML HTML JSON 等，以及非结构化数据；一致性描述：在分布式场景下可能出现数据一致性问题
❌ // 4、clickhouse：少写了：读写性能都高，场景适合少了归类：高吞吐、低延迟场景，例如日志；操作少写了：支持复制和分布查询

// 作业83：INNER JOIN、LEFT OUTER JOIN、RIGHT OUTER JOIN 有什么区别?UNION作用是什么？怎么封装一个 SQL 查询
- 第五遍 2025.2.18 -
INNER JOIN AB表的交集，内联查询
LEFT OUTER JOIN A 表的所有满足条件行 + 与A表条件行匹配的B表数据
RIGHT OUTER JOIN B 表的所有满足条件行 + 与B表条件行匹配的A表数据
UNION 拼接两次查询
封装 CREATE VIEW my ON SELECT * FROM table ❌ // 1、封装：关键词不是 ON 是 AS: CREATE VIEW my AS SELECT * FROM table
- 第四遍 2025.2.16 -
❌ // 1、INNER JOIN 不是合集，是交集，表达错误 - AB都满足的行，内连接
⭐️ // UNION 拼接
CREATE VIEW my ON SELECT * FROM table ❌ // 2、封装：关键词不是 ON 是 AS
- 第三遍 2025.1.29 -
- 第二遍 2025.1.26 -
❌ // 1、少了一个 AS：封装 CREATE VIEW ... AS
- 第一遍 2025.1.22 -
❌ // 1、create View MY AS 关键词：Create View ... AS

// 2024.12 模拟实现jsonp
- 第四遍 2025.2.18 -
function jsonp(url, params, callback){
    let suffix = Object.keys(params).map(it => `${it}=${params[it]}`).join('&');
    let totalUrl = url + url.includes('?') ? '&' : '?' + suffix + `&callback=${callback}`;
    
    let dom = document.createElement('script');
    window[callback] = function(data){
        callback(data);
        document.body.removeChild(dom);
    }
    dom.src = totalUrl;
    document.body.appendChild(dom);
}
- 第三遍 2025.2.16 -
const suffix = Object.keys(params).reduce((pre, cur) => pre + `${cur}=${params[cur]}`, ''); 
❌ // 1、计算 url 时少了 '&' -> 使用 map + join 更简洁：Object.keys(params).map(it => `${it}=${params[it]}`).join('&') -> 使用 entries 也可以 Object.entries(params).map(([key, vlaue]) => `${key}=${value}`).join('&')
- 第二遍 2025.1.21 -
- 第一遍 -

// 2021.07 防抖节流
- 第四遍 2025.2.18 -
function debounce(fn, delay){
    let timeId;
    return (...args) => {
        if(timeId) {
            clearTimeout(timeId);
        }
		timeId = setTimeout(() => {
            fn(...args)
        }, delay)
    }
}
function throttle(fn, delay) {
    let flag = false;
    return (...args) => {
        if(flag) {
            return
        }
        flag = true;
        fn(...args);
        setTimeout(() => {
            flag = false;
        }, delay)
        
    }
}
- 第三遍 2025.2.16 -
❌ // 1、debounce 遗漏赋值：timeId = setTimeout()
⭐️ // throttle：间隔多少秒执行一次
❌ // 2、throttle：判断条件应该是 if(flag){return}：flag 为 true 时，证明这段时间内已经执行了
- 第二遍 2025.1.21 -
- 第一遍 -

// 作业4：什么是生成器？有什么作用？
- 第三遍 2025.2.18 -
* 声明，恢复、暂停代码，yield + next 实现，next 返回{done, value}，实现遍历可迭代对象
作用：实现协程，自定义可迭代对象
- 第二遍 2025.2.15 -
❌ // 1、少写了：暂停、恢复代码执行，* 声明
- 第一遍 2025.1.30 -

// 作业81：Redux 核心是什么？reducer、action、dispatch、store、RTK 怎么理解？简单写一个 redux 使用
- 第五遍 2025.2.18 -
redux 将 react 的全局状态存储在 store 对象树中
reducer 使用 oldState + action 生成 新State，只能通过 store 的 dispatch 来更新状态 state
RTK redux ToolKit 官方推荐工具包
import { createStore } from 'redux'
const reducer = (oldState = {v:1}, action) => { 
    if(action.s === 'new') { return {v: oldState.v + 1} } 
}
const store = createStore(reducer); (dispatch+subscribe+getValue) ❌ // getState
store.dispatch({s: 'new'});
store.subscribe(() => {console.log(store.getValue())}) ❌ // 1、 函数名称错了：getState
- 第四遍 2025.2.15 -
❌ // 1、注意 store 是对象树：Redux 将全局状态保存在 store 对象树中
⭐️ // reducer：返回新的 state 而不是改变
❌ // 2、reducer 参数顺序是 oldState,action
❌ // 3、 函数名称错了：getState，通过 subscribe 更新 UI
- 第三遍 2025.1.29 -
- 第二遍 2025.1.26 -
- 第一遍 2025.1.22 -
❌ // dispatch getState  1、少一个 subscribe
❌ // 2、通过subscribe更新UI来响应 state - store.subcribe(()=>{console.log(store.getState())})

// 2019.07 为什么要清除浮动？怎么清除浮动？
- 第五遍 2025.2.18 -
原因：块级元素把浮动元素当做不存在，行内元素环绕浮动元素布局；父盒子中子盒子浮动，会导致高度塌陷，无法撑开背景
解决：①父内最后一个元素后添加 box .box{clear:both} ②父.father::after{ content:''; display: block; clear: both; } ③BFC .father { overflow: hidden } ④父 设置高度
- 第四遍 2025.2.15 -
❌ // 1、父元素+伪元素 应该是 display: block，否则撑不开父级全部宽度
⭐️ // BFC 的盒子计算高度时包含浮动元素
- 第三遍 1.28 -
- 第二遍 1.25 -
❌ // 1、高度塌陷的描述：背景无法撑开 + padding、border 无法正常展示
❌ // 2、给父元素添加高度：宽度不对，高度+padding+border
- 第一遍 1.20 -
❌ // 1、写错了：是给父元素添加BFC + 父盒子设置高度（宽度不行

// 作业2：支持迭代器的原生语言特性有哪些？
- 第五遍 2025.2.18 -
Array.from、for...of、...扩展运算符、数组结构、new Map、new Set、yield *、Promise.all/race
- 第四遍 2025.2.15 -
❌ // 1、少写了 yield * 只能在生成器中使用
- 第三遍 1.28 -
- 第二遍 1.25 -
- 第一遍 1.20 -
❌ // 1、少写了：yield * 操作符 - 只能在生成器中使用；不是对象解构，是「数组解构」

// 2019.07 h5新标签和语义化，块/行内元素
- 第三遍 2025.2.18 -
1、SEO 优化 2、标签样式优化
h5新标签：header footer article address nav aside time filedSet/legend section hgroup datalist ⭐️ // detail
input 新属性 required multiple autocomplete autofocus placeholder accesskey
input type 新属性 tel url email range search number date month time datetime week
行内块 img td input
行内 span br select textarea button ⭐️ // i u a strong em b label
块 p div table caption li dd dt dl ul h1-h6 section ⭐️ // td ol tr address hr
- 第二遍 2025.2.15 -
1、SEO 优化 2、标签样式不一样
❌ // 1、新标签少了：datalist detail time hgroup 
❌ // 2、input 属性少了：accesskey 
❌ // 3、input type 属性少了：url range search date time datetime week month 
❌ // 4、br - 错了，不是块元素，而是行内元素 + 块元素少了 h1-h6 td ol table-caption tr address hr
❌ // 5、行内元素少了：br i u a strong em button b label
- 第一遍 2025.1.9 -

// 2024.12 模拟实现instanceof
- 第三遍 2025.2.18 -
function fakeInstanceOf(target, Ctor){
    let proto = target.__proto__; ⭐️ // Object.getPrototype(target)
    while(proto) {
        if(proto === Ctor.protorype){
            return true
        }
        proto = proto.__proto__;
    }
    return false
}
- 第二遍 2025.2.15 -
❌ // 1、获取 target 的原型链->应该是 target.__proto__ 或者 Object.getPrototype(target)
❌ // 2、判断原型链上是否和构造函数的原型对象相等，而不是和构造函数相等proto===Ctor.prototype
❌ // 3、不停往上找原型链 -> 通过 __proto__或者getPrototype找，而不是 prototype 
- 第一遍 2025.1.9 -

// 作业45：原生+canvas 显示一张png格式的图片
- 第三遍 2025.2.18 -
<canvas id='drawing' width=200 height=200 ></canvas>
const drawing = document.getElementbyId('drawing');
if(drawing.getContext){
    const imgData = drawing.toDataUrl('image/png');
    const dom = document.createElement('img');
    dom.src = imgData;
    document.body.appenChild(dom);
}
- 第二遍 2025.2.14 -
❌ // 1、需要判断是否存在 context 作为大前提：if(drawing.getContext){}
❌ // 2、image 标签添加 url 的属性是 src：image.src = imageData;
- 第一遍 2025.1.9 -

// 2021-07 常见Webpack问题
/** 1、webpack的几个核心概念理解：Chunk、Module、plugin
2、常见配置项：entry、output、module、resolve等
自定义 loader 怎么配置？
3、Code Splitting 和 Tree Shaking 的区别？懒加载怎么实现？
4、html-webpack-plugin 作用？
5、sourceMap不同环境的区别？怎么开启配置？
6、热更新怎么实现？
7、webpack原理/执行过程？
开发插件的桥梁？*/
- 第三遍 2025.2.18 -
1、Chunk 由多个模块组成、Module 万物皆模块、plugin 插件，在构建时，指定时机注入代码
2、entry：'main.js'/{main:'main.js', sub:'sub.js'}
output:{fileName: '[name]-[hash].js', path: path.resolve(_dirname, 'dist')}
module 模块解析规则 {rules: [{ test: '/\.js/',  use: ['my-loader']}, {test: '/\.css/', use: ['style-loader', 'css-loader', 'less-loader']}]}
resolve 模块查找规则 {
    alias: {'@c': '/src/component'},
	extensions: ['jsx', 'js', 'json'],
	modules: ['node_modules', path.resolve(_dirname, 'src/myL')]
}
自定义 loader：①module.rules use 时直接使用具体地址下的loader use:[path.resolve(_dirname, 'src/myL/my-loader.js')]
②resolve.modules 配置时添加指定路径，如上 + module.rules use 时直接使用 loader 名，如上
3、Code Splitting 按需加载，根据 entry 配置分组，在访问页面时，加载需要的模块，提高渲染效率，通过 splitChunk 插件开启配置
Tree Shaking 按需打包，减少包体积，根据 entry 入口打包关联代码，不使用的代码不打包，webpack 默认开启
懒加载 使用 code splitting 开启，在首页初始渲染时，只加载需要渲染的模块
4、html-webpack-plugin 将 webpack 打包出来的 js 和 css 插入 html
5、sourceMap devtool: cheap-eval-source-map; 本地
devtool: hidden-source-map; 生产
6、热更新：①启动 webpack 时，dev-server 在内存中启动服务，和浏览器 websocket 实时通讯 ⭐️ // 同时在服务中注入了 HMR 热更新代码
②有代码修改时，通过监听 Compiler 的 done 事件，得到 mainfest.json 配置文件 和 chunk.js 模块文件，通过 websocket 推送给浏览器
③浏览器从中获取到 ChunkId 等信息，通过 ajax 获取 chunk.js
④替换模块代码 window.webpackUpdate -> hotApply 热更新替换指定模块，而不需要刷新整个页面 ⭐️ // window.webpackHotUpdate
⑤执行模块代码，进行渲染 webpack.__require__
7、webpack原理 ①整合参数：将 shell 指令传入的配置和配置文件整合成配置参数 ⭐️ // 初始化配置参数
②通过配置实例化 webpack Compiler，引入所有插件，执行.run开始构建
③根据 entry 配置，依次遍历所有文件，按序执行相关的所有依赖
④得到转换后的文件和文件关系，将文件输出到下载列表 ⭐️ // 以 entry 为分组依据打包为多个 chunk
⑤根据 output 配置，输出到指定路径
开发插件的桥梁: Compiler webpack 唯一实例，代表 webpack 的生命周期；Compilication 更新一次，创建一次构建的实例
- 第二遍 2025.2.14 -
❌ // 1、entry: 不识别 path 这个属性，entry: 'main.js'/entry: { main: 'src/main.js', sub: 'src/sub.js' }
❌ // 2、output: { filename: '[name]-[hash].js', path: path.resolve(_dirname, 'dist') }
❌ // 3、resolve 的作用不是解析，是「依赖查找配置规则」+ module 的作用是：依赖解析、转换配置
❌ // 4、resolve.modules :查找 module 的时候，需要传递具体地址 modules: [path.resolve(_dirname, 'src/myC'), 'node_modules']
❌ // 5、resolve.extensions: 少写了常见的对扩展的处理 extensions:['jsx', 'js', 'json']
❌ // 6、开启 Code Splitting 配置的方式：splitChunk 插件配置
⭐️ // 懒加载：首次渲染
❌ // 7、devtool:cheap-eval-source-map; （不提供列信息）方便代码调试
⭐️ // 启动 webpack 启动的内存中的服务：dev-server
❌ // 8、 监听到 compiler 的 done 事件 得到的文件是 chunk.js 文件，浏览器从 mainfest.json 文件中得到了 ChunkId，获取 chunk.js
❌ // 9、window.webpackHotUpdate -> hotApply 热更新函数，替换原有模块代码
⭐️ // webpack 原理：step1 初始化配置参数
⭐️ // webpack 原理：step2 执行 Compiler.run 开始构建
- 第一遍 2024.12.26 -
⭐️ // 1、coding splitting：开启方式是 splitChunk 插件配置 - 加快响应速度

// 2020.07 对象分类、Promise按序执行、实现map
- 第五遍 2025.2.18 -
const a = [{name:'1', age:1}, {name:'1', age:2}, {name: '2', age:1}]
function classify(arr, property) {
    return arr.reduce((pre, cur) => {
        const key = cur[property];
        if(!pre[key]){
            pre[key] = [];
        }
        pre[key].push(cur);
        return pre
    }, []) ❌ // 1、reduce 的初始值应该是 {} 而不是 []
}
function listP(arr, init) {
    return arr.reduce((pre, cur) => pre.then(cur), Promise.resolve(init))
}
❌ // 2、map 是 Array 上的高阶函数，之前写错成 Function(想成bind了)，重写了
Array.prototype.fakeMap = function(callback, thisArg) {
    return this.reduce((pre, cur, index, array) => {
		pre[index] = callback.call(thisArg, cur, index, array);
        return pre
    }, [])
}
- 第四遍 2025.2.14 -
❌ // 1、again，map 接收两个参数，一个 callback 函数，另一个是 this 指向
/** Array.prototype.fakeMap = (callback, thisArg) => {
	return this.reduce((pre, cur, index, array) => {
		pre[index] = callback.call(thisArg, cur, index, array);
		return pre
	}, [])
}*/
- 第三遍 2025.1.24 -
⭐️ // classify：少写了 reduce 的初始值 - 一个空对象 {}
- 第二遍 2025.1.19 -
❌ // 1、map 函数接收两个参数，第一个是 callback，第二个是 thisArg - 用来指定 this -> 配合 cb.call(thisArg, cur, index, array);
⭐️ // reduce filter map forEach 会跳过 empty 的数组项（ map 和 reduce 都跳过）
- 第一遍 -
❌ // 1、注意 map 除了 callback，第二个参数是可选的的 thisArg，用于指定前面函数的 this

// 作业98：sequelize 怎么写关联表的查询，指定关联的 column 是date
- 第二遍 2025.2.17 -
A.hasMany(B, {
    foreignKey: 'B_id', // 多的id
    sourceKey: 'A_id', // 一的id
})
B.belongsTo(A, {
    foreignKey: 'B_id', // 多的id
    targetKey: 'A_id' // 一的id
})
❌ // 1、await A.findAll({ include: [{ model:B }] })
- 第一遍 2025.2.13 -
A.hasMany(B, {
    foreignKey: B_id,
    sourceKey: A_id
})
B.belong(A, { ❌ // 1、belongsTo
    foreignKey: B_id,
    targetKey: A_id
})
❌ // 2、await A.findAll({ include: [{ model: B }] })

// 作业97：Sequelize 中查找某条数据，如果存在就更新；不存在就创建一条
- 第二遍 2025.2.17 -
const [issue, created] = await table.findOrCreate({
    where,
    default: data ❌ // 1、数据源属性 defaults
})
if(!created) {
    issue.save(); ❌ // 2、先set数据，再保存 issue.set(data); await issue.save();
}
- 第一遍 2025.2.13 -
await Modal.findOrCreate({ ❌ // 1、需要获取函数的返回值，获取是否为新创建 const [issue, created]
    where
    ❌ // 2、数据源没有传入 defaults: data
})
❌ /** 3、如果已经存在，更新描述
	if(!created) {
		issue.set(data);
		await issue.save();
	} */

// 作业 96：Sequelize 中 Date 的怪问题 - POST 存储 DATE 类型，GET 传参数2025-01-27 STRING，无法直接查询，有那些性能高的查询方法？索引是什么，为什么性能高？
- 第二遍 2025.2.17 -
索引是数据库表为了快速搜索，单独为表创建的树结构
搜索时，直接通过索引查询数据，而不是遍历整个表查询
方法一
const start = dayjs(new Date(time)).startOf('day').toDate();
const end = dayjs(new Date(time)).endOf('day').toDate();
table.findAll({
    where: { date:{
            [op.between]: [start, end]
        }}})
方法二
table.findAll({
    where: { date: { sequelize.fn(DATE, sequelize.cols('date'), '=', time)}}})
❌ /** 1、const options = {
	where: Sequelize.where(
		Sequelize.fn('DATE', Sequelize.col('date')),
		'=',
		time
	)}
	或者函数是：Sequelize.fn('DATE_FORMAT', Sequelize.col('date'), '%Y-%M-%D')
*/
- 第一遍 2025.2.13 -
❌ // 1、方法一：需要先将传入的 string 转换成 date：const searchTime = new Date(string)
❌ // 2、还需要处理 .toDate()，因为 date 字段存储的也是 Date 类型
❌ /** 3、方法二：转换成 Date 再匹配
const options = {
	where: Sequelize.where(
		Sequelize.fn('DATE', Sequelize.col('date')),
		// 或 Sequelize.fn('DATE_FORMAT', Sequelize.col('date'), '%Y-%M-%D')
		'=',
		string
	)
}*/
❌ // 4、方法一性能高，可以有效利用索引优化 - 索引本质是为了表单独存储的数据结构，可以快速定位到查询条件的数据位置，从而减少IO操作，提高性能

// 作业95：唯一索引什么作用？Sequelize 中 define modal 的时候，怎么创建组合字段唯一索引？SQL怎么写？updateOnDuplicate 是什么作用？怎么配合唯一索引。 define 中的第三个参数中常见配置
- 第二遍 2025.2.17 -
唯一索引：保证唯一索引的组合唯一，不重复
se.define(database, {
    name: DataTypes.STRING
},{
    underScore: true,
    timeStamp: false,
    indexes: [{
        unique: true,
        fields: ['date', 'sort']
    }]
})
SQL: CREATE UNIQUE KEY 'date','sort' 
❌ // 1、CREATE UNIQUE INDEX idx_date_sort ON `table` (`date`, `sort`)
ALTER TABLE table
ADD UNIQUE KEY 'date','sort'
❌ // 2、ADD UNIQUE KEY `table` (`date`, `sort`)
updateOnDuplicate: buldCreate(data, { ⭐️ // 索引冲突时，执行更新，而不是抛出错误 - 被指定的字段才会被更新，未指定的字段保持不变
    updateOnDuplicate: ['name', 'age']
})
se.define(database, {
    name: DataTypes.STRING
},{
    underScore: true,
    timeStamp: false, ❌ // 3、timestamps: false, tableName: 'users'
    indexes:[{}]
})
- 第一遍 2025.2.13 -
❌ // 1、唯一索引的作用：确保索引字段的组合在表中是唯一的，不允许重复
❌ // 2、hasMany/belongsTo 这是关联表的写法，唯一索引不是这种写法 - indexes + unique + fields
/** sequelize.define(database, {...定义...}, {
	indexes: [
		{
			unique: true,
			fileds: ['date', 'day_sort']
		}
	]
}) */
❌ // 3、CREATE UNIQUE INDEX idx_date_day_sort ON 'daily' ('date', 'day_sort')
❌ // 4、updateOnDuplicate 用于保证在批量插入数据时，若冲突，执行更新而不是抛出错误 - 在 updateOnDuplicate 中配置的字段会被更新，未指定的保持不变
/** await Daily.bulkCreate(data, {
	updateOnDuplicate: ['value', 'weekday']
})*/
❌ // 5、属性名称错了 underscored: true - 将驼峰映射为下划线 + tableName:'daily' 指定数据库中表名 + timestamps:false 禁用时间戳字段

// 作业94：为什么接口查询之后，一般都要使用 .json() 来转化一次数据后再返回？
- 第二遍 2025.2.17 -
NextResponse 包含了响应头、响应体、数据 ❌ // 1、状态码、响应头、响应体
.json() 可以将 NextResponse 转换成 json 数据，再转成 js 对象，方便数据操作 ❌ // 2、await res.json()
- 第一遍 2025.2.12 -
❌ // 1、(Nextjs) 接口返回的是 Response 对象，包含了服务器返回的所有信息 - 状态码、响应头、响应体，其中响应体 默认是只读的 ReadableSream，不能直接使用
❌ // 2、对的，详细是：先解析成 json 格式，然后转成 js 对象 - Response.json() 将响应体解析为 json 格式的数据，并将其转换为 js 对象：await res.json()

// 作业88：mysql2 和 Sequelize 的使用场景？有哪些差异？简单写一个连接
- 第六遍 2025.2.17 -
mysql2：为了 node 创建的数据库驱动，可以直连数据库，但是需要写比较多的 SQL 查询
	提供了 mysql2/promise，支持 async/await 异步查询，管理多个数据库连接
Sequelize：ORM 将数据库表和行映射为对象模型，比较好的函数编程操作
mysql2
import { createPool } from 'mysql2/promise'
const pool = createPool({ host, user, password, database });
const con = await pool.getConnect();
const [rows] = await con.execute('SELECT * FROM table');
sequelize
import { Sequelize, Modal, DataTypes } from 'sequelize';
const se = new Sequelize(database, user, password, {
    host: 'localhost',
    dialect: 'mysql2'
});
// 方法1
class Usr extends Modal {}
Usr.init({
    name: DataTypes.STRING
}, {
    sequelize: se,
    modalName: 'Usr'
});
// 方法2
se.define(database, {
    name: DataTypes.STRING
}, {
    underScore: true,
    timeStamp: false,
    indexes: [{}]
})
- 第五遍 2025.2.12 -
⭐️ // mysql2：execute
❌ // 1、sequelize：实例化参数错误：new Sequelize(database, user, password, { host: 'localhost', dialect: 'mysql2' })
❌ // 2、sequelize：init 参数错误 init({ name: DataTypes.STRING }, { sequelize: se, modalName: 'User' })
❌ // 3、sequelize：define 第三个参数应该是一些配置，例如 underscore: false ，这里把 init 和 define 的参数 弄混了
- 第四遍 2025.2.9 -
❌ // 2、sequelize：实例化的参数错误 new Sequelize(database, user, password, { host: 'localhost', dialect: 'mysql2'})
❌ // 3、sequelize：init 还需要第二个参数传递 连接实例、模型名称
- 第三遍 2025.1.31 -
⭐️ // mysql2：提供了 mysql2/promise 模块，允许 async/await 管理多个数据库连接；没有内置的对象关系映射ORM
❌ // 1、mysql2：导入依赖包错了 mysql2/promise
❌ // 2、mysql2：createPool的参数 少写了 database
❌ // 3、mysql2：获取连接的函数错了 await pool.getConnect()
❌ // 4、mysql2：需要使用 await const [rows] = await connection.execute('SELECT * FROM table')
⭐️ // ORM 把数据库的表和行映射为对象模型
❌ // 5、sequelize：有两种模型定义方法：一种是 define，另一种 extends Modal + init
/** 方法一 ：const User = se.define('table', { id: Datatypes.number}, {
    underScore: false;
})
方法二：class User extends Modal {}
User.init({ id: Datatypes.number }, {
	sequelize: se, // 传递连接实例
	modalName: 'User' // 模型名称
})
最后调用： User.findAll({ attribute: ['id', 'name'] })
*/
- 第二遍 2025.1.26 -
❌ // 1、mysql2：依赖包是 mysql2/promise
❌ // 2、mysql2：创建连接池不需要 await - const pool = createPool({host, user, password, database})
❌ // 3、mysql2：获取连接时需要 await - const connection = await pool.getConnect()
❌ // 4、mysql2：查询数据时需要 await - const [rows] = await connectiom.execute('SQL')
❌ // 5、sequelize：实例化创建连接 const s = new sequelize(database, user, password, { host, dialect })
❌ // 6、sequelize 模型定义的底层 - 先扩展，再init定义
- 第一遍 2025.1.22 -
❌ // 1、mysql2：提供的连接的两个特点 - mysql2/promise 支持 async/await + 管理多个数据库连接池
❌ // 2、sequelize：将数据库的表和行映射为对象模型，直接通过 js 操作

// 作业87：Nextjs 中预渲染是什么？有哪些模式？写一个动态路由的page
- 第六遍 2025.2.17 -
预渲染：服务端渲染SSR-在请求时，服务端直接将数据引入生成HTML，客户端直接渲染，不需要再使用客户端js 静态生成SSG 增量静态生成ISR-构建、运行时，间隔更新时间，后端自动增量式创建新的HTML
SSG
export function Blog({slug})){ return <p>{slug}</p>}
export async function generateParams() {
    return [{slug:'first'}, {slug: 'second'}]
}
export const revalidate = 60; 
SSR
import { getServerSideProps } from 'next' ⭐️ // from 'next/server'
export function Blog({data})){ return <p>{data}</p>}
export async function getServerSideProps() {
    const res = await fetch('xxx');
    const data = await res.json();
    return {
        props: {data}
    }
}
- 第五遍 2025.2.12 -
⭐️ // SSR 在请求时，在服务端直接将数据引入，生成的 HTML 直接返回给客户端渲染，不需要客户端js执行
⭐️ // SSG 在客户端构建时，将页面提前渲染完成，使用 generateStateParams 返回动态路由参数列表，使用 revalidate 配置重新验证时间，增量更新
export function generateStateParams() { ❌ // 1、SSG：少写了 async
export function getServerSideProps() { ❌ // 2、SSR：少写了 async
- 第四遍 2025.2.9 -
❌ // 1、名称错误：服务端渲染SSR、静态生成SSG、增量静态生成ISR
❌ // 2、缺少说明一下结果：客户端、服务端生成的结果都是 HTML，得说明一下
❌ // 3、SSR：函数名称、依赖包错误：import { getServerSideProps } from 'next/server'
❌ // 4、SSR：核心是在服务端提前获取数据 -> 传入组件
❌ // 5、SSG：函数名称错误 generateStaticParams
- 第三遍 2025.1.31 -
❌ // 1、记错函数名称，13.x 之前是 getStaticProps，现在已经改为 generateStaticParams，用于生成动态路由的参数列表
❌ // 2、SSR：data.json() 是异步的，异步解析数据，处理 json 数据转换为 js 对象 const res = await data.json();
❌ // 3、SSG：return 的应该是个路由列表 例如 return [{slug: 'first'}, {slug: 'second'}]
❌ // 4、SSG：export const revalidate = 60; // 页面重新验证时间       
- 第二遍 2025.1.26 -
❌ // 1、SSR getServerSideProps: fetch 数据需要 await: const data = await fetch('xxx') +  异步解析数据需要 await: const res = await data.json()
- 第一遍 2025.1.22 -
❌ // 1、SSG generateStaticParams 用于生成动态路由的参数列表
❌ // 2、SSG revalidate 用于定义页面重新验证时间 - 页面将重新生成，运行时生成/更新静态页面以增量更新

// 作业68：React hooks 的原理是什么？useEffect useState模拟实现
- 第七遍 2025.2.17 -
闭包+链表，目的：在不使用类组件的情况下，也可以使用 state、状态管理、模拟生命周期
useEffect
const memorized = {};
const cursor = 0;
const render = () => { ReactDOM.render(<App />, document.getElementById('root')) };
function fakeUseEffect(cb, arr){
	const lastArr = memorized[cursor];
    const hasChanged = lastArr && lastArr.some((it, index) => !Object.is(it, arr[index]));
    if(!lastArr || hasChanged) {
        memorized[cursor] = arr;
        cb();
        render();
    }
    cursor++;
}
useState
function fakeUseState(init){
    const current = cursor;
    memorized[current] = memorized[current] ?? init;
    const useValue = (newV) => {
        memorized[current] = newV;
        render();
    }
    cursor++;
    return [memorized[current], useValue]
}
- 第六遍 2025.2.12 -
❌ // 1、原理：没有事件委托，主要是 闭包和链表 + 少写了 hooks 的创建目的：在不使用类组件也可以使用 state、状态管理、模拟生命周期
/**
	原理：闭包-每次渲染都拿到最新值；
	hooks按序存储在 fierNode.memorizedState，更新时按序执行全部 hooks，使用副作用链表收集副作用，在 commit 阶段挂载后执行副作用链表
    */
❌ // 2、ReactDOM.render(<App />, document.getElementById('root')); 
❌ // 3、使用 find 得到的是值，应该使用 some + 判断条件不是 Object.is 应该是 !Object.is
❌ // 4、少写了 值 的初始化： memorized[current] = memorized[current] ?? init;
- 第五遍 2025.1.23 -
- 第四遍 2025.1.18 -
❌ // 1、fakeUseEffect：ReactDOM.render(<App />, document.getElementById('root'));
❌ // 2、fakeUseState：cursor++; 忘记写游标自增了
- 第三遍 2025.1.13 -
❌ // 1、这里描述的是 hooks 的执行过程 - 大虐，第一遍/第二遍的时候都记得是用于给函数组件添加功能用的，这一次反而完全没想起来
❌/** 记忆 React hooks原理
	先描述【目的】：16.8的新增功能，可以在不编写类组件的情况下「使用 state」及其他特性，「状态管理能力」、「生命周期替代能力」、逻辑复用能力
	再描述【实现上述目的的方法】，也就是【原理】：怎么用来「使用 state + 状态管理能力」 - ①主要是利用「闭包」，组件每次渲染时，使用闭包保持其状态；怎么用来「生命周期替代」 - ②使用链表保存一系列hooks，存储在 fiberNode 上，「在 Fiber 树更新时，能从 hook 中计算出最终输出的状态和需要执行的相关副作用」
*/
/** 注意其实要写下 render 函数，因为 useEffect 触发 render 后，对应的游标要置0
*/
❌ // 2、fakeUseEffect：这里应该是判断「不等于」，有不相等的，代表依赖数组变化，需要更新：!Object.is(it, lastArray[index])
❌ // 3、fakeUseEffect：少写了「更新依赖数组」的逻辑：memorized[count] = array;
function fakeUseState(init) {
    const currentCount = count;
    let value = memorized[currentCount] ?? init;
    ❌ // 4、使用 value 会导致返回后，value 不会自动更新，和 memorized[currentCount] 失去了联系，本行改为：memorized[currentCount] = memorized[currentCount] ?? init;
    const setValue = (newValue) => {
        memorized[currentCount] = newValue;
        ❌ // 5、调用 useValue 必须触发 render：render();
    }
    count++;
    return [value, setValue]
    ❌ // 4、延续问题4，本行修改为：return [memorized[currentCount], setValue]
}
- 第二遍 -
❌❌ // 1、和第一遍的逻辑是一样的，都是想到了「函数组件」缺失「类组件的生命周期」，但是 hooks 不只是「生命周期替代能力」，还有「状态管理能力」、「逻辑复用能力」，函数组件也不止缺失「生命周期」，还包括 state（没有 hooks 的函数组件主要接收 props 来展示 UI）
❌❌ // 2、质疑是对的： hooks 在组件更新时是「全部按序重新执行一遍」，副作用链表是「在 hooks 执行过程中，如果 useEffect 依赖有更新」，就更新到副作用链表
// 和第一遍一样想到链表：第一遍想到存储位置，第二遍描述收集、执行过程 - 而不是原理
// 原理是从「链表+闭包」描述的：利用闭包保存状态，使用链表保存一系列的 hooks 与 Fiber关联。在 Fiber 更新时，就能从 hooks 中计算出最终输出的状态 和执行相关的副作用。
❌ // 5、fakeUseEffect：cursor应该使用其他变量保存，和下文中 setValue 形成了闭包 - 在异步情况下，cursor 可能会变化，导致索引错误 const currentCursor = cursor; 这里使用 currentCursor 进行索引
❌ // 6、更新使用闭包保存的 memorizedState[currentCursor] = newValue;
❌ // 7、fakeUseState：这里还要触发一次 render() 函数执行
- 第一遍 -
❌ // 1、描述得不准确：hooks 可以在不编写类组件的情况下使用 state 及React其他特性
❌ // 2、hooks 链表说得不错，链表是为了在更新时，以稳定的顺序执行，输出最终的状态和相关副作用
❌ // 3、还有一个 hooks 利用闭包保存状态，在组件每次渲染时通过闭包保持其状态
⭐️ // 注意 hooks：1、不要在循环、条件、嵌套、try/catch/finally 中使用 - 无法保证顺序的稳定
⭐️ // 2、只有在 函数组件和hooks 中能够调用 hooks
❌ // 5、fakeUseEffect：当前定义时的 cursor 需要被闭包保存 let currentCursor = cursor;
❌ // 4、fakeUseEffect：少处理了游标自增： cursor++;

// 作业67：React 怎么做的性能优化？
- 第六遍 2025.2.17 -
fiber 架构：优先级、渐进式渲染、时间分片、增量式 Diff
避免重新渲染的策略 - eagerState策略、bailout策略
	eagerState策略：如果新的 state 值和旧的无关，可以直接渲染，而不是再获取旧值再重新渲染
	bailout策略：比较 state props 一致时，跳过重新渲染
bailout策略的相关函数+hooks：
	类组件的shouldComponentUpdate(nextProps, nextState)、函数组件的 React.memo((props) => { return <div>{props.text}</div> })、useMemo+useCallback 
⭐️ //  React.memo 是浅比较 props，如果不变则直接使用                                  
- 第五遍 2025.2.12 -
⭐️ // 避免组件重新渲染
❌ // 1、少写了 函数组件 const MyMemo = React.memo(props => (<div>{props.text}</div>)) - 浅比较props，不变则直接复用 
// 记忆法：shouldComponentUpdate(类组件)/React.memo(函数组件) + 2个hook：useMemo/useCallback
- 第四遍 2025.1.23 -
- 第三遍 2025.1.18 -
useCallback ⭐️ // 每次渲染，函数都是重新生成的，用了这个就缓存住了
- 第二遍 2025.1.12 -
⭐️ // 主要是避免组件重新渲染
⭐️ // shouldComponentUpdate 是为了「类组件」的性能优化设计的生命周期
/**
	❌❌ 1、对于「函数组件」，React 提供了 React.memo 这个高阶函数来处理 -> 对组件的 props 进行浅比较，如果不变则跳过重新渲染
	const MyMemo = React.memo((props) => { return <div>{props.time}</div> })
*/
⭐️ // const expensiveMemoValue = useMemo(() => { return count * 2 }, [count])
// const expensiveCallback = useCallback(() => { setCount(count + 1) }, [count])
// 这里的记忆方法：shouldComponentUpdate(类组件)/React.memo(函数组件) 都是用于通过比较前后 props；2个函数组件的性能 hook：useMemo/useCallback
- 第一遍 -
❌ // 1、对，在运行时优化，但是这个「架构级别」的属于渲染层面的优化，性能方便还是两个优化策略
❌ // 2、一般不叫做「是否复用组件」，而是「避免组件重新渲染」
❌ // 3、eagerState：在useState 更新过程中，如果新值不依赖于旧状态，则直接使用新状态来更新组件
❌ // 4、只需要组件的 props 不变，即可避免重新渲染[state可能会影响子组件的 props，还是要考虑的]
❌ // 5、两个策略中，bailout 策略可以通过调用 API 来实现
❌ // 6、React.memo - 针对函数组件，对组件的 props 浅比较，不变则跳过重新渲染
❌ // 7、shouldComponentUpdate - 针对类组件，在组件更新前调用，自定义是否需要重新渲染
❌ // 8、useMemo/useCallback - 依赖项不变，返回之前的缓存
❌ // 9、除了两个策略，还有 VDOM + Diff - 减少对真实 DOM 的操作，避免不必要的回流重绘

// 作业64：Vue渲染怎么实现的？
- 第七遍 2025.2.17 -
AOT 预编译，参与全程
模版编译：
	parse 词法分析、语法分析，得到 AST
    optimize 静态节点标记，优化 Diff 时方便跳过
    generate 生成 render 函数
双向数据绑定：
	数据劫持 + 发布订阅模式，实现 Object.defineProperty(obj,属性,{get, set})/Proxy
	初始化组件，实例 Watcher，set 属性变量时，将正在运行的 Watcher 收集到组件的 Dep ⭐️ // getter
    更新/初次渲染组件时，访问 get，触发所有订阅的 Watcher 执行 - dep.notify() ⭐️ // setter
执行 render 函数，组合成 VDOM
执行 patch/diff，得到最小 UI 更新量，应用到真实 DOM
- 第六遍 2025.2.11 -
❌ // 1、模版编译的阶段名称错误：parse - optimize - generate
❌ // 2、函数使用方法错误：Object.defineProperty(obj, 属性, { get, set })
- 第五遍 2025.1.23 -
- 第四遍 2025.1.18 -
- 第三遍 -
1、模板编译： ⭐️ // AOT 参与全程 
❌ // 1、getter 被劫持是结果，「劫持方式是 Object.defineProperty(target, property, {get:()=>{}, set:()=>{}})」/Proxy
❌ // 2、「每一个响应式对象属性都会创建一个对应的 Dep 类的实例」 -> 我写的这里理解有误，同时数据劫持之后，触发订阅的时机是「渲染组件，实例化 Watcher 时，执行到 getter 触发对应的 Dep 收集正在执行的 Watcher」
- 第二遍 -
❌ // 1、执行步骤的最后一步是 generate
// 三个步骤分别作用：① parse 词法解析+语法解析 template 得到 AST ② optimize 对AST静态内容优化 ③ generate 递归转换 AST 得到 render 函数
❌ // 2、AOT 预编译功能是针对 template 的，不是针对 js 的（第一次做的时候知道，这次做的时候误以为预编译是针对 js 的 -> 其实通过 AOT 和 JIT 的区别就可以推断，AOT 既然依赖的是静态编译，就是需要像模版语法这种，方便标记静态节点 - js 那么动态肯定是不行🚫的）
⭐️ // Dep 用于依赖收集，作为容器管理多个订阅者 Watcher
- 第一遍 -
❌ // 1、整个渲染「不止是 render + patch」，应该分成4步，①html：先「模版编译，得到render函数」 ②js：「实例化组件，同时收集依赖」(也就是数据双向绑定-实现响应式数据) ③html+js：「执行渲染函数/更新，得到 VDOM」 ④Diff/patch：「计算最小更新，应用到真实 DOM」

// 作业62：fiber架构是什么？优点和实现方式？
- 第七遍 2025.2.17 -
Schedueler：调度器，优先级调度，不直接参与渲染，宏观调控
Reconciler：架构器，时间分片，在重绘前根据 shouldYield 判断是否够时间分片 ⭐️ // 协调器
Render：渲染器，对应 commit 阶段
Schedueler Reconciler：异步，因为这两个在内存中计算，随时可能被以下情况打断 报错、时间分片时间不够、有更高优先级
Render：同步，将最小更新 UI 量应用到真实 UI，无法被打断
优点：
1、时间分片：之前 react 是同步渲染的，因为要更新整棵 VDOM 树，对比+计算较长时间占用主线程，阻塞重绘；使用 fiber架构后，利用中断恢复机制，将渲染分成多个小的渲染任务单元 ⭐️ // 在重绘和空闲时间执行
2、渐进式渲染 + 优先级调度：优先渲染视口部分的视图、或者用户交互
3、增量式 Diff：不再整棵树比较实现 Diff，而是根据渲染任务的执行，逐步计算 diff 得到最小更新 UI，提高 diff 效率
- 第六遍 2025.2.10 -
❌ // 1、时间切片的优点 - 少写了：之前 react 会对整棵树 对比+更新，同步执行，会长时间占用主线程，阻塞重绘 ； 描述优化：小的单元任务，在空闲 + 重绘判断执行
- 第五遍 2025.1.22 -
// ⭐️ 增量式 Diff- 根据任务的执行进度，逐步比较和更新部分节点
- 第四遍 2025.1.18 -
❌ // 1、忘记中文：Scheduelor 是调度器
❌ // 2、少：应该先说明 react 每次更新都要递归构建整棵 fiber 树+比较+更新，长时间占用主线程，会阻塞重绘 + 改：[Scheduelor+中断恢复机制]
❌ // 3、改：[Scheduelor+优先级调度机制]
❌ // 4、修改描述：不是一次性比较整棵树，而是根据任务执行进度，逐步比较、更新部分节点 - 减少了每次比较的范围，提高了效率
- 第三遍 -
// ⭐️ 不是「三大部分」，是「三个主流程」
❌ // 1、不是「Commit」，是「Reconciler」，叫做「协调器」，作用是「调用 shouldYield 判断当前 Time Slice 是否有剩余时间」
❌ // 2、不是因为「异步」才可以被打断，是以为「他们都在内存中执行，不会更新宿主环境 UI」
❌ // 3、不是「Reconciliator」，是「Render」「渲染器」
❌ /** 上述三个主流程记忆法：
	Scheduler 调度器 - 优先级宏观调控 
	Reconciler 协调器 - render 阶段，用于判断时间切片剩余时间
	Render 渲染器 - commit 阶段（更新UI）*/
❌ /** 1、第一个优点的关键词是「渐进式渲染」。
	描述内容和上述很像，但是「占用主线程」不是重点，是「长时间」占用主线程。
	不是「react 的解析、渲染」在占用，是「react 每次更新都要递归构建整棵 fiber 树、比较、更新」，重点要突出导致访问卡顿感的原因是渲染卡住了。
	实现方式：Scheduler调度器 + 中断恢复机制*/
❌ // 2、第二个优点的关键词是「优先级调度」。实现方式：Scheduler 调度器 + 优先级调度机制
❌ /** 3、第三个优点，现在描述的是怎么实现 diff，但是 fiber 对 diff 的优化主要是「增量式Diff」。
	「不是一次性比较整棵树，而是根据任务的执行进度，逐步比较和更新部分节点，根据时间和优先级安排，逐步更新，减少了每次比较的范围，提高了效率」。
	实现方式：Scheduler调度器 + 中断恢复机制 + Reconciler协调器 + 双缓存机制*/
❌ /** 4、少一个优点「时间分片」。
	「有效利用浏览器空闲时间，在每帧开始之前检查剩余时间，是否执行一个小的渲染任务单元」。
	实现方式：Reconciler协调器 + 中断恢复机制*/
- 第二遍 -
⭐️ // 总结：「渐进式渲染」、「暂停恢复渲染能力」、「优先级调度」、「时间分片管理」
⭐️ // 「优先级调度器」其实是两样，「任务调度」 + 「优先级管理」
❌ // 1、这里缺少一个 Diff 算法的执行优化：增量式 
- 第一遍 -
❌ // 1、不是「连续的 js 执行」会长时间占用主线程，是「React递归构建整颗 DOM 树、比较、更新」
❌ // 2、明确 React 由于每次构建的都是整颗树 + 之前是同步渲染 - fiber 做到了异步渲染
❌ // 3、分成小模块的自然也不只是「代码执行」，是「渲染工作」被分解成了「小任务单元」 + 同时可以「暂停 + 恢复」 -> 使得 在每帧开始前检查剩余时间，能否执行的也就是「小渲染任务单元」
❌ // 4、少写了：渐进式渲染
❌ // 上述写的都是原理，并不是具体实现 1、双缓存机制 current tree 和 work-in-progress tree 2、任务调度和优先级管理 3、Diff 算法优化为增量式 Diff

// 作业58：React和Vue是怎么描述UI的
- 第六遍 2025.2.17 -
React:JSX=HTML+JS、类组件+函数组件、state组件状态+props传入的属性、花括号{}
Vue:模版语法 + 指令 v-model、v-if/v-else-if/v-else、v-show、v-for + 双花括号
- 第五遍 2025.2.10 -
❌ // 1、React 少写了 ：类组件+函数组件
❌ // 2、Vue 少写了：模版语法 + v-show
- 第四遍 2025.1.22 -
⭐️ // Vue 少写了：v-show
- 第三遍 2025.1.18 -
- 第二遍 -
❌ // 1、React 少写了 ①自定义组件-函数组件+类组件 ②state-状态，组件内部自变量；props-属性，外部传入自变量
⭐️ // Vue 指令还有 v-for v-bind v-else/v-else-if v-on v-model等
- 第一遍 -
// ❌ 1、React 少写了： 可以自定义组件 + 使用花括号{}将js嵌入JSX {note} + state-状态，组件内部自变量、props-属性，其他组件传入的自变量
// ❌ 2、Vue 少写了：模拟语法 - 结合数据+预先定义的模版 + 使用双大括号展示数据 + 指令v-if="show"/v-for="item in items"

// 作业86：Nextjs 中 Link 的变更是哪个版本开始的，有什么变更？从这个版本开始对路由有什么变更？
- 第四遍 2025.2.16 -
13.x Link 之后都直接渲染为 a 标签了，所以 Link 添加属性 href 即可，不需要在里面写 a 标签
路由：路由管理系统改为 src/app/pages.tsx + layout.tsx + global.css
api 也改为 src/app/api 管理后端接口路由
- 第三遍 2025.1.31 -
- 第二遍 2025.1.26 -
- 第一遍 2025.1.22 -
❌ // 1、只写了「文件路由系统」的变更，还少写了「后端路由系统」的变更 从 pages/api 变更为 src/app/api

// 作业80：对DOM 树的理解 - 定义和作用
- 第四遍 2025.2.16 -
DOM 是对 HTML 的对象模型，表示 HTML 的结构 ⭐️ // 对象化表示 - 树形结构的对象模型
浏览器：是浏览器渲染页面的基础，按照 DOM 结构渲染 ⭐️ // 浏览器根据 DOM 结构构建页面布局
框架：可以通过 VDOM 模拟真实 DOM，计算出最小更新量 UI 后，再应用到真实 DOM，提高性能 ⭐️ // 提高页面更新性能
js：提供了可以和 HTML 交互的接口，可以访问
- 第三遍 2025.1.31 -
❌ // 1、少写了浏览器视角-渲染页面的依据 和 框架视角-VDOM Diff 计算提高更新性能
- 第二遍 2025.1.25 -
- 第一遍 2025.1.24 -
⭐️ // DOM 是 HTML 文档的「对象化表示」，是按照 HTML 结构转换的树形结构的对象模型
⭐️ // 提供了一个编程接口 - DOM 是 js 可以访问、修改 HTML 的基础
❌ // 1、除了 js，还少写了 浏览器 + 框架 视角
/**
	对浏览器而言，DOM 是「渲染页面的依据」，浏览器根据 DOM 结构构建页面布局
	对框架而言，框架通过比较 虚拟DOM 和实际 DOM 树的差异，以最小 UI 更新量，提高页面更新性能
*/

// 作业82：写一个复杂的 SQL： ①只返回某列不同的值，相同的忽略 ②拼接A列和B列为字符串后输出 ③将某一列转换为大写输出 ④计算某列行数，一个包含null的个数，一个不包含null个数 ⑤求和、求最大、求最小、求平均某列的值 ⑥给表起别名 ⑦查询条件涵盖 id为1,同时price大于10，或者是NULL，或者是 5-10之间，或者是 1或2，或者年份为2025 ⑧按照某列分组 ⑨按照某列排序(降序)
- 第四遍 2025.2.16 -
SELECT DISTINCT t.name, 
    CONCAT('(', t.age, ')') AS t_age, 
    UPPER(t.sex) AS t_sex, 
    COUNT(*) AS num_with_null,
	COUNT(t.nums) AS num_without_null,
    SUM(t.age) AS sum_age, (MAX MIN AVG)
FROM table AS t, serials AS s
WHERE t.id = 1 AND
	(t.price > 10 OR
    t.price IS NULL OR
    t.price BETWEEN 5 AND 10 OR
     t.price IN (1, 2) OR
	YEAR(t.time) = 2025
)
GROUP BY t.age ⭐️ // 优先于 SORT 执行
SORT BY t.age DESC ⭐️ // LIMIT 在 SORT 之后
- 第三遍 2025.1.30 -
- 第二遍 2025.1.26 -
- 第一遍 2025.1.23 -
❌ // 1、由于 from 中有两张表，如果查询的 column 名在两张表都存在，有重名就会报错 - 所以查询的时候最好声明表名 t.name1 t.age
SELECT constinct name1, age,  ❌ // 2、关键词错了 distinct
    concat(sex, height) as answer2, // ⭐️ concat(t.sex, '(', t.height, ')') as answer2
    toUpperCase(weight3) as weight3, ❌ // 3、函数名错了 upper
    count(name) as name42, count() as name41, ❌ // 4、关键词参数错了 包含 null - 查询时传递 count(*) as name41_with_null；不包含 null - 查询时包含 column 名是对的
    sum(age) as age5, max(age) as max5, min(age) as min5, avg(age) as avg5
from table as t, sex as s
where t.id = 1 
And 
(t.price > 10 
 or t.price = Null ❌ // 5、关键词错了：IS 操作符主要用于判断某个值是否为 NULL，且 t.price = null 的比较结果始终是 UNKNOWN, 因为 NULL 表示未知的值，无法确定它是否和另一个值相等 - t.price is null
 or t.price between 5 to 10 ❌ // 6、关键词错了 between-and：t.price between 5 and 10
 or t.price in [1,2] ❌ // 7、关键词错了，应该是()：t.price in (1,2)
or year(s.time) = 2025)
group by age
sort age desc ❌ // 8、关键词错了 sort by

// 作业84：path.join()和path.resolve()的区别？process.cwd()和__dirname的区别？
- 第四遍 2025.2.16 -
path.join() 纯拼接路径
path.resolve() 解析绝对路径，默认绝对路径为 /
process.cwd() 当前 node 执行所在环境路径
__dirname 当前文件所属路径
- 第二遍 2025.1.29 -
⭐️ // path.resolve()：绝对路径解析
- 第二遍 1.26 -
⭐️ // path.resolve()：把 / 当做根路径
- 第一遍 2025.1.22 -
⭐️ // path.join(a,b)：纯拼接
❌ // 1、path.resolve(a，b)：是「绝对路径解析」，把 / 当做根目录 -> /a/b
❌ // 2、process.cwd()：node 执行时所在目录

// 2020.03 改变原数组+结束循环+性能排序
- 第三遍 2025.2.16 -
改变原数组: pop shift push unshift sort reverse splice fill
结束循环:使用 return break 无法退出循环 forEach map reduce filter
性能排序: for > for...of > forEach > map > for...in
- 第二遍 2025.1.21 -
- 第一遍 -

// 2021.06 BFC特点、触发、存在/解决的问题
- 第三遍 2025.2.16 -
BFC：①独立容器 ②不和外部的 float 重叠 ③从上至下，垂直排列 ④计算盒子空间时，包含浮动元素
触发：①float: 不为 none ②position: absolute/fixed ⑤根元素 
③overflow: hidden/scroll/auto ⭐️ // overflow不为visible
④display: flex/table-cell/inline-block ⭐️ // 少写了 table-captoin
存在的问题： BFC 内部的上下盒子 margin 会重叠 解决方案：给父元素 display: flex ⭐️ // 外边距重叠
- 第二遍 2025.1.21 - 
- 第一遍 -

// 作业57：“假装成功”的意义是什么
- 第三遍 2025.2.16 -
心态能够改变行为 -> 行为同时也能够改变心态，扩展占用空间的姿势可以提升控制激素的分泌、抑制压力激素的分泌
⭐️ // 控制激素-睾丸酮，压力激素-皮质醇
Fake it until you become it! You deserved to be here.
- 第二遍 2025.1.21 -
⭐️ // 提高睾丸酮，降低皮质醇 - 提高自信心，降低压力 fake it until you become it
- 第一遍 -

// 作业34：写出强缓存、协商缓存的流程及相关属性
- 第三遍 2025.2.16 -
请求链接 url 有缓存时，直接使用缓存，强缓存生效
如果本地有缓存，但缓存失效 - 服务器状态码为 304 时，使用缓存并刷新缓存有效时间，协商缓存生效
If-modified-since/Last-modified If-none-match/Etag
Cache-control:max-age=2000; 秒[优先级高]
Expires deadline 事件
- 第二遍 2025.1.21 -
⭐️ // 刷新本地缓存时间
- 第一遍 -

// 作业26：给出一个场景，要求A、B请求执行结束后，再执行C请求，其中A、B请求同时开始，怎么实现
- 第三遍 2025.2.16 -
Promise.all([A(), B()]).then(C);
(async function () {
    await Promise.all([A(), B()]);
    C();
})()
- 第二遍 2025.1.21 -
- 第一遍 -

// 作业17：对斐波那切数列进行尾调用优化
- 第三遍 2025.2.16 -
function fib(n) {
    if(n<2){
        return n
    }
    return fib(n-1)+fib(n-2)
} 0 1 1 2 3 5
function optiFib(a = 0, b = 1, n) {
    if(n===0) {
        return a
    }
    return optiFib(b, a+b, n-1)
}
- 第二遍 2025.1.20 -
- 第一遍 -

// 2021.09 Object属性排序、与Map的区别
- 第五遍 2025.2.16 -
Object属性排序: 正整数>字符串>负数>浮点数>Symbol
Map区别：①键：任意值 VS Object只有字符串/Symbol ②记录插入顺序 VS Object 无法记录 ③Map 可迭代对象 ④ 数据量大的时候使用 Map，内存小，增删快 ⑤ 数量计算方便 m.size() VS Object.keys(obj).length
- 第四遍 2025.1.28 -
- 第三遍 2025.1.25 -
- 第二遍 2025.1.21 -
Object属性排序: 正整数>字符串>负数>Symbol  ❌ // 1、少写了浮点数
- 第一遍 -

// 作业20：浏览器打开一个 URL 发生了什么
- 第五遍 2025.2.16 -
1、浏览器进程 UI线程 - 将用户输入内容、链接转换成完整的 url
2、IPC 协议传输给 网络线程 查询是否有缓存 - 有缓存，且有效，直接返回 ⭐️ // 强缓存生效
	- 无缓存/有缓存但失效，进行 DNS 解析，得到 ip
    - TCP 队列排队，三次握手，建立连接
    - 组装请求头，包括 cookie 等信息
    - 发送请求 301/302 Moved Permanently/Temperaily 重定向，使用响应头中的 Location 重新导航
    	 	  304 使用缓存，并刷新缓存有效时间
              200 若是 o-stream 下载类型，触发下载，结束导航；若是 html 和 渲染进程建立管道
3、渲染进程：主线程、预解析线程、合成线程
	- 建立管道后，边下载边解析，并使用预解析线程，遇到 js、css提前下载
    - 下载后，解析还没完成，出现 解析白屏
    - 下载后，会通知浏览器进程更新 页面、安全锁、url、前进后退按钮
主线程：解析 DOM（DOM树 - 样式解析（CSS样式表 - 布局（布局树 - 分层（分层树 - 合成（合成指令 ⭐️ // 绘制（绘制指令列表
合成线程：栅格化（图块-位图，GPU 进程加速
浏览器进程 UI线程：合成（帧
- 第四遍 2025.1.28 -
- 第三遍 2025.1.25 -
- 第二遍 2025.1.20 -
❌ // 1、协议名错了：IPC - 进程通信协议
❌ // 2、少了：有缓存但缓存失效
❌ // 3、应该是先判断状态码，200的状态码下再判断类型
❌ // 4、少写了 304，使用本地缓存，并刷新缓存有效时间
- 第一遍 -

// 2021.07 bind、apply/call三者异同+apply/call实现bind
- 第五遍 2025.2.15 -
同：改变函数中 this 指向；不传第一个参数时，this 指向 window
异：bind 改变 this 指向后返回函数副本；apply、call 改变 this 指向后立即执行；apply 的第二个参数是 类数组/数组，call 的第二个参数是接收多个参数
fun.bind(thisArg,...args)
Function.prototype.fakeBind = function(thisArg, ...args1) {
    const func = this;
    return function F(...args2) {
        if(func instanceof F) {
            return new func(...args1, ...args2);
        }
        func.call(thisArg, ...args1, ...args2);
    }
}
- 第四遍 2025.1.25 -
- 第三遍 2025.1.24 -
❌ // 1、bind 实现应该绑定在原型对象上实现： Function.prototype.fakeBind - 这样 this 才是指向调用 bind 的函数
- 第二遍 2025.1.19 -
❌ // 1、「bind 有多个参数，第一个是 this 指向，后面接收多个参数 」...arg1
❌ // 2、return new cb(...arg1, ...arg)
❌ // 3、cb.apply(thisArg, [...arg1, ...arg])
- 第一遍 -
❌ // 1、遗漏了判断是否为 new 调用
/**
return function F(...arg2) {
	if(func instanceof F) {
		return new func(...arg1, ...arg2);
	}
	func.call(thisArg, ...arg1, ...arg2);
}*/

// 2021.06 CSS 选择器 - 权重/匹配方式
- 第四遍 2025.2.15 -
#id > .red a[href] :hover LVHA> div ::after> *
从右向左 解析
!important > 行内 > 外联/内联（只和下载完顺序有关）
- 第三遍 1.28 -
- 第二遍 1.25 -
- 第一遍 1.20 -
!important > 内联 > 行内  ❌ // 1、行内 > 内联/外联

// 作业39：shim 和 polyfill 区别
- 第四遍 2025.2.15 -
shim 垫片，提供新的 API，解决兼容性问题，利用浏览器原生功能实现功能，优雅降级
polyfill 补丁，不提供新的 API，利用原生功能实现浏览器功能 ⭐️ // 实现浏览器原生 API 缺少的功能
- 第三遍 1.28 -
⭐️ // shim：优雅降级
⭐️ // polyfill：实现浏览器原生 API 中缺少的功能
- 第二遍 1.25 -
⭐️ // 实现浏览器原生 API 缺少的功能
- 第一遍 1.20 -
❌ // 1、记反了，shim 是处理兼容性问题-优雅降级，polyfill 是实现浏览器不支持的原生API-实现原生API中缺少的功能

// 作业42：TED 如何和大脑正确交流沟通
- 第四遍 2025.2.15 -
1、I want it, I like it , I have chosen it!
大脑只会对我们给它的语言和图像，大脑也天然追逐快乐(把想做的事情关联到快乐，把不想做的事情、停留在原地绑定到痛苦)
2、Make it familiar! 大脑喜欢熟悉的东西
- 第三遍 1.28 -
- 第二遍 1.25 -
- 第一遍 1.20 -
❌ // 1、少写了：I like it!I want it!I've chosen it! 大脑天然逃避痛苦、追逐快乐：将想要做的事情和巨大的快乐联系起来；将停滞在当下的痛苦细细描述
❌ // 2、大脑喜欢熟悉的事情：让大脑对想要做的事情变熟悉

// 作业43：TED 怎么提升自信
- 第四遍 2025.2.15 -
1、repetition！repetition！repetition！ 重复一千遍，做好准备
2、不批评做得不好的事情，而是夸奖做得好的事情！ 做自己最好的引导者
3、用自己的语言解释世界 - 世界上没有客观，只有主观
- 第三遍 1.28 -
- 第二遍 1.25 -
- 第一遍 1.20 -
❌ // 1、少写：重复训练！用足够多次的练习带来信心
❌ // 2、少写：而是不断夸奖正确行为 - 自己的或别人的 - 引导自己去学习和改变
2、用自己的语言解释世界

// 作业76：显卡的作用？
- 第四遍 2025.2.15 -
合成图像，放入到后缓存区
- 第三遍 2025.2.10 -
- 第二遍 2025.2.2 -
⭐️ // 合成新的图像，并将图形保存到后缓存区

// 作业73：react 的 setState 是同步还是异步？为什么React有时候有两次 setState，却只执行一次？
- 第五遍 2025.2.15 -
异步：React 合成事件 + 生命周期函数 中，react 提供了批量执行机制，在执行事件处理函数执行过程中，如果遇到 setState 会投入一个队列中，执行结束后，统一处理 setState ，修改 state 一次，触发一次渲染
同步：原生事件，setState 执行一次，触发一次渲染
- 第四遍 2025.2.10 -
- 第三遍 2025.2.2 -
❌ // 1、除了合成事件，还有「生命周期函数」中都是异步
⭐️ // 批量处理机制 + 更新一次 state ，触发一次重新渲染
⭐️ // 原生事件：setState 一次，就会触发一次渲染
- 第一遍 -
❌ // 1、除了合成事件，还有生命周期函数

// 作业61：常见的数据结构有哪些
- 第五遍 2025.2.15 -
按逻辑结构划分，结构型：栈，队列，数组，链表
非结构型：树，图
- 第四遍 2025.2.9 -
- 第三遍 2025.2.2 -
❌ // 1、少写了一个类型：数组

// 作业59：什么是高阶函数?什么是高阶组件？什么是副作用？简单举例
- 第六遍 2025.2.15 -
高阶函数 - 输入/输出是函数，map
高阶组件 - 输入是组件
const high = (My) => {
    return class extends React.Component {
        constructor(props) {
            super(props);
        }
        render() {
            return <My {...this.props} />
        }
    }
}
副作用 - 函数编程的说法，除了返回值，还会对外部产生影响，IO下载交互、全局变量等 ⭐️ // 改变输入参数
- 第五遍 2025.2.9 -
- 第四遍 2025.2.2 -
⭐️ // 副作用，少写了：除了返回值
render() {
    return Child
    ❌ // 1、<Child {...this.props} />
}

// 作业55：flex 常见缩写
- 第六遍 2025.2.15 -
flex: none; 0 0 auto
flex: 1; 1 1 0
flex: inital;  0 1 auto
flex: auto; 1 1 auto
- 第五遍 2025.2.9 -
❌ // 1、把 0 0 auto 的缩写写错，应该是 flex: none;
- 第四遍 2025.2.2 -
❌ // 1、少写了一个 flex: initial; // 0 1 auto
- 第二遍 -
❌ // 1、把 0 0 auto 的缩写写错，应该是 flex: none;
- 第一遍 -
❌ // 1、把 0 0 auto 的缩写写错，应该是 flex: none;

// 作业74：起舞弄清影 是那首诗？谁写的？下一句是什么？
- 第四遍 2025.2.15 -
苏轼 《水调歌头 明月几时有》
明月几时有，把酒问青天，不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间。
转朱阁，低绮户，照无眠。
不应有恨，千里共婵娟。 ⭐️ // 不应有恨，何事长向别时圆。人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟
- 第三遍 2025.2.9 -
⭐️ // 顺序反了 - 起舞弄清影，何似在人间。转朱阁，低绮户，照无眠。
⭐️ // 不应有恨，何事长向别时圆。人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。
- 第二遍 2025.2.2 -
宋 苏轼/苏东坡  ❌ // 1、题目记不起来：《水调歌头 明月几时有》
❌ // 2、乱序：起舞弄清影，何似在人间

// 作业25：简单写下 请求创建过程
- 第六遍 2025.2.15 -
function xmlRequest(url) {
    const xhr = new XMLHttpRequest();
    xhr.onerror = ()=>{};
    xhr.ontimeout = ()=>{};
    xhr.onreadystatechange = function(res) {
        switch(res.readySate) {
            case 0:
                break;
            case 4:
                if(this.status === 200 || this.status === 301) { ⭐️ // 304
                    console.log(this.responseText);
                }
                break;
        }
    }
    xhr.open('GET', url, true);
    xhr.timeout = 3000;
    xhr.responseType = 'text';
    xhr.setRequestHeader(key, value);
    xhr.send();
}
- 第五遍 2025.2.9 -
case 4:
	if(res.status === 200 || res.status === 301) { ⭐️ // status 在this上
		console.log(this.responseText)
}
- 第四遍 2025.2.2 -
xhr.onreadystate = function (res) {  ❌ // 1、函数名称错误：onreadystatechange
	switch(this.readyState) { ❌ // 2、属性不在 this 上，在 res 上：res.readyState
		 case 0:// 还未开始请求
		 ❌ // 3、switch 中 0 表示请求还没开始，要使用 break 跳出循环
}}
- 第二遍 -
❌ // 1、属性名称记错 ：res.readyState
- 第一遍 -
❌ // 1、open 的参数顺序记错了：xhr.open('GET', url, true)

// 2021.04 02 网络协议 - IP/UDP/TCP协议
- 第二遍 2025.2.15 -
应用层 HTTP
传输层 TCP/UDP：通过端口找程序
网络层 IP：通过 ip 找电脑
网际层 MAC：通过 mac 找网络服务
传输顺序 data]TCP]IP]---data]TCP]---data
- 第一遍 2025.1.9 -

// 作业56：对那些没有 deadline 的事情，怎么解决拖延症
- 第二遍 2025.2.15 -
有 deadline 的事情，脑中有一个怪兽可以警醒
但人生很多事情是，不做出行动就不会有改变，要做出行动，掌握到主动性才可以有所改变
想要解决人生的拖延症，就要明确人生是有限的，人就活这么多天，不去做，就少一天
- 第一遍 2025.1.9 -

// 作业52：道可道，非常道 翻译一下，有什么含义
- 第二遍 2025.2.15 -
如果真理是能够被语言描述的，那就不是永恒不变的道了
语言是有局限性的，真理只能身教，无法言传
- 第一遍 2025.1.9 -

// 作业51： 如何停止过度思考？如何停止焦虑
- 第二遍 2025.2.15 -
思考是一件非常容易上瘾的事情，不想过度思考的话，就把思维当做一条线，出现、get it、let it go
如果焦虑，应该是害怕自己会失败，那就把可能导致失败、会导向成功的可能性都列出来
- 第一遍 2025.1.9 -

// 作业50：学习的感觉是？
- 第二遍 2025.2.15 -
学如飞鸟过，脑内了无痕
- 第一遍 2025.1.9 -

// 作业48： input 和 textarea 对比（宽度设置，初始值设置）；option 标签的初始值设置
- 第二遍 2025.2.15 -
input：size宽度、value 初始值、maxLength 最大长度 ⭐️ // 单行，单位为字符数
textarea：cols宽度、标签中间内容 为初始值、rows 高度 ⭐️ // 多行，单位为字符数
option：有 value 时取 value，没有 value 属性时，取标签中间内容
- 第一遍 2025.1.9 -

// 作业44：怎么能够不把所有事情、语言往心里去
- 第二遍 2025.2.14 -
1、It is not about me. 和我无关的事情，看看说话人的目的
2、It is about me. 给自己一些同情，同时学会表达自己的情绪，没有指责，只是表达
you will always keep your value
- 第一遍 2025.1.9 -

// 作业29：Promise的进度通知
- 第二遍 2025.2.14 -
class MyPromise extends Promise {
    constructor(executor) {
        let handles = [];
        super((resolve, reject) => {
            return executor(resolve, reject, (state) => {
                handles.forEach(it => it(state));
            })
        })
        this.handles = handles;
    }
    notify(fn) {
        this.handles.push(fn);
    }
}
const p = new MyPromise((resolve, reject, notifyFunc) => {
    function count(n) {
        if(n>0){
            setTimeout(() => {
                count(n-1);
                notifyFunc(`${n*20} remained`)
            }, 0)
            ⭐️ // 这里的写法可以优化，需要间隔时间执行的只有 count(n-1)
            /**
            	notifyFunc(`${n*20} remained`);
            	setTimeout(() => count(n-1), 0);
            */
        } else {
            resolve()
        }
    }
    count(5);
})
p1.notify((it) => { console.log(it) })
p1.then(() => console.log('completed'))
- 第一遍 2025.1.9 -

// 作业10：分别用两种方式新建一个映射实例、一个集合实例
- 第二遍 2025.2.14 -
const m1 = new Map([['a', 1], ['b', 2], ['c', 2]]);
const m2 = new Map().set('a', 1).set('b', 2).set('c', 3);
const s1 = new Set([1,2,3]);
const s2 = new Set({ *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3
} })
- 第一遍 2025.1.9 -

// 2021-06 Position属性 - 占位？相对什么定位？
- 第二遍 2025.2.14 -
static：占位，原文件流 // ⭐️ 标准文档流
relative：占位，原文件流 // ⭐️「相对自己本身的定位」
absolute：不占位，相对于上级 position 非 static 属性的节点
fixed：不占位，相对于 window、视口
sticky：占位，超过阈值后不占位-fixed
- 第一遍 2024.12.25 -

// 2019.10 三栏，两边固定，中间自适应
- 第四遍 2025.2.14 -
.left,.right{ width: 100px }
1、.left,.right{ position: absolute;top: 0; } .right{ right:0 } .middle{ margin: 0 100px }
2、.outer{ display:flex; } .middle{ flex:1 }
3、.outer{ display:table;width:100%; } .left,.right,.middle{ display: table-cell }
.outer{ display:grid;grid-template-columns:100px auto 100px; }
4、.left,.right,.middle{ float: left } .middle{ width:cacl(100%-200px) }
- 第三遍 2025.1.24 -
- 第二遍 2025.1.19 -
- 第一遍 -
float 会导致 right 换行在第二行 - 要调整 左中右 的DOM布局(BFC也不行了)
2、flex
.outer { display: flex; justify-content: space-between; } // ⭐️ 横向布局可不写
.middle { flex: 1 }
4、calc
.left, .right { float: left } // ❌ 1、三浮动，否则 right 就会因为向左靠齐换行了
.middle { width: calc(100% - 400px) }

// 2019.10 两栏，左边固定，右边自适应的布局
- 第四遍 2025.2.14 -
.left { width: 200px };
1、marign-left+float：.left{ float: left } .right { marign-left: 200px }
2、marign-left+absolute：.left{ position: absolute } .right { marign-left: 200px }
3、BFC：.left{ float: left } .right{ overflow: hidden }
4、flex：.outer{ display: flex } .right{ flex:1; } 1 1 auto  ⭐️ //  1 1 0
5、calc：.left, .right{ float: left } .right{ width: calc(100% - 200px) }
6、table+grid：.outer{ display: table; width: 100% } .left, .right{ display: table-cell }
.outer{ display: gird; grid-tenplate-columns: 200px auto; }
- 第三遍 2025.1.24 -
- 第二遍 2025.1.19 -
.outer {
    display: grid;
    grid-template-column: 100px auto; ❌❌ // 1、grid-template-columns
}
- 第一遍 -
4、flex
.outer { display: flex }
❌ // 1、父盒子变成弹性盒子后， right 要变成可拉伸 .right { flex: 1 }

// 2022.08 包管理工具
- 第五遍 2025.2.14 -
npm：将依赖打平提升到 node_modules；npm>5开始有 lock文件；package-lock.json .npmrc
yarn classic：将依赖打平提升到 node_modules；为了解决早期 npm 的加载慢问题，并行加载多个依赖；yarn.lock .yarnrc
pnpm：依赖依旧结构化存储在node_modules；内存依赖存储，物理地址单一存储；pnpm-lock.yml .npmrc ⭐️ // 内容寻址存储
yarn berry：不再使用node_modules；依赖查找表 .pnp.cjs+.yarn/cache zip存储；yarn.lock .yarnrc.yml ⭐️ // 即插即用
- 第四遍 2025.1.24 -
- 第三遍 2025.1.19 -
⭐️ // pnpm：内容寻址存储
⭐️ // yarn berry：老是想不到 - 即插即用
- 第二遍 -
❌ // 1、yarn v2/Berry：即插即用，且lock文件和配置文件分别为 yarn.lock + .yarnrc.yml
- 第一遍 -
❌ // 1、pnpm：「不是pnpm.yml，而是 pnpm-lock.yml」
// ⭐️ yarn v2/Berry：「即插即用」

// 2024.10 怎么实现跨域
- 第四遍 2025.2.14 -
1、jsonp：只能处理 GET 请求，依赖于script的 src 可以引入第三方资源
2、CORS：跨域资源共享 Access-Control-Allow-Origin 服务端允许访问的域名。可多个
3、websocket 双全工双向实时通讯协议，不受同源协议限制
4、代理：nginx ⭐️ // 同源协议只存在于浏览器端，服务端之间没有限制
- 第三遍 2025.1.24 -
- 第二遍 -
- 第一遍 -
// ❌ 1、CORS：哪些域名可以访问资源 - 是为了让浏览器知道哪些域名可以访问，而不是从客户端角度描述

// 2024.11 简单的发布 - 订阅模式实现 EventEmitter
- 第五遍 2025.2.14 -
class EventEmitter {
    constructor() {
        this.events = {};
        this._max = 10;
    }
    add(event, listener) {
        if(!this.events[event]) {
            this.events[event] = [];
        }
        this.events[event].push(listener);
        if(this.events[event].length > this._max) {
            throw Error('max exceed')
        }
    }
    remove(event, listener) {
        if(!listener) {
            delete this.events[event];
        }
        if(Array.isArray(this.events[event])) {
            const index = this.events[event].indexOf(listener);
            if(index > -1) {
                this.events[event].splice(index, 1);
            }
        }
    } 
    once(event, listener){
        const onceF = (...args) => {
            listener(...args);
            this.remove(event, onceF);
        }
        this.add(event, onceF);
    }
    emit(event) {
        const args = [].shift.call(arguments);
        if(Array.isArray(this.events[event])) {
            const static = [...this.events[event]];
            static.forEach((it, index) => {
                const arg = args[index];
                Array.isArray(arg) ? it(...arg) : it(arg);
            })
        }
    }
    setMax(v) {
        this._max = v;
    }
}
- 第四遍 2025.1.24 -
- 第三遍 2025.1.19 -
- 第二遍 -
❌ // 1、remove：这里要判断 index 存在才去删除：if(index>-1){ ... }
emit(event) {
    const args = arguments.slice(1);
    const list = this.events[event];
    ❌❌ // 2、不能直接赋值，要拷贝下来，才能避免 const list = [...this.events[event]];
    list.forEach((it, index) => {
        const arg = args[index];
        Array.isArray(arg) ? it(...arg) : it(arg);
    })
}
- 第一遍 -
❌ // 4、add：少了计算监听事件数量 if(this.events[event].length > this._max) { throw Error('exceed') }
❌ // 1、remove：这里要判断 index > -1，也就是 listener 已存在才删除
❌ // 2、emit：这里一定要注意，由于 once 的存在，this.events[event] 在执行过程是动态改变的，所以这里一定要将 this.events[event] 拷贝下来再处理 let static = [...this.events[event]]
❌ // 3、emit：args 还是要传进函数的 Array.isArray(args) ? it(...args) : it(args)

// 2021.07 数组扁平化（一层、全部展开、指定深度）
- 第七遍 2025.2.12 -
一层：arr.flat() [].concat(...arr) [].concat.call([], ...arr) [].concat.apply([], arr)
全部展开：arr.flat(Infinity) arr.toString().split(',') 
function expense(arr, deep = 1) {
    return arr.reduce((pre, cur) => pre.concat(Array.isArray(cur)&& deep>1 ? expense(cur, deep - 1) : cur ), [])
}
- 第六遍 2025.2.9 -
- 第五遍 2025.1.31 -
全部展开：arr.flat(Infinity)、arr.toString().split(',')、JSON.parse(JSON.stringify(arr))
❌ //  JSON.parse(JSON.stringify(arr)) 是用于深拷贝的，不能展开
- 第四遍 2025.1.25 -
- 第三遍 2025.1.24 -
❌ // 1、少写了 arr.flat(Infinity)
❌ // 2、JSON.stringify 不会展开数组
❌ // 3、全部展开递归函数中，pre 的值不要使用 push 来更新 - concat 既能处理数组，也能处理非数组
- 第二遍 2025.1.19 -
❌ // 1、deep 传递的时候要减一

// 作业72：react 的 生命周期有哪些，在不同生命周期中做什么事情？
- 第八遍 2025.2.12 -
挂载阶段 componentDidMount、render、constructor 初始化 state 和 事件处理函数的 this、getDerivedStateFromProps
更新阶段 componentDidUpdate ⭐️ // (prevProps, prevState)
render、getDerivedStateFromProps、shouldComponentUpdate(nextProps, nextState)
卸载阶段 componentWillUnMount
useEffect - 模拟生命周期 componentDidMount+componentDidUpdate+componentWillUnMount
useLayoutEffect - 在 commit 之后，会阻塞帧的渲染 ⭐️ // 阻塞重绘
- 第七遍 2025.2.9 -
- 第六遍 2025.1.31 -
挂载阶段 ❌ // 1、少写了 constructor - 初始化 state 和绑定事件处理函数的 this
- 第五遍 2025.1.25 -
- 第四遍 2025.1.24 -
❌ // 1、shouldComponentUpdate 写错在挂载阶段，实际应该归属于更新阶段
❌ // 2、阶段划分是：挂载-更新-卸载，其中更新阶段记错了 - 应该是当组件的 state/props 变化，进入更新阶段，重新执行 render 函数来更新 DOM
- 第三遍 2025.1.19 -
❌ // 1、挂载阶段：少写了 constructor - 初始化 state 和绑定时间处理函数的 this
❌ // 2、除了类组件函数的生命周期，还要意识到函数组件也通过 hooks 模拟生命周期

// 作业78：使一个标签看不见的几种样式及其区别
- 第四遍 2025.2.12 -
display: none; 不占位，DOM 节点还在，触发回流重绘
VS v-if 移除 DOM 节点
opacity: 0; 占位，只是透明，可以触发节点上的绑定事件，只重绘
visibility: hidden; 占位，但不能触发节点上的绑定事件，只重绘；v-show
- 第三遍 2025.1.23 -
- 第二遍 2025.1.19 -
⭐️ // display: none 触发回流+重绘
⭐️ // visibility: hidden 触发重绘（不影响结构）
- 第一遍 -
❌ // 1、display: none 元素仍在 DOM 中，会触发回流+重绘； v-if 移除了 DOM 节点
❌ // 2、visibility: hidden 依旧占位，不影响结构，会触发重绘

// 作业65： ①computed/watch/methods 的区别？ ②父子组件挂载顺序 ③vue组件中的data为什么是函数 ④ 常见生命周期
- 第六遍 2025.2.11 -
①computed：有缓存值，除非依赖值变化，否则不重新计算
watch：监听，改变一次，触发执行一次
methods：每次组件渲染都会重新执行
②父子组件挂载顺序：父 beforeCreate created beforeMount 子 beforeCreate created beforeMount mounted 父 mounted
卸载 父 beforeDestroy 子 beforeDestroy destroyed 父 destroyed
③每个组件实例化时，如果 data 不是函数，会导致多个实例间共享；使用函数后，每个实例间有独立的作用域
④ beforeCreate created：此时data/computed/watch/methods都初始化了 beforeMount mounted：挂载到 DOM 上 beforeUpdate：VDOM 已生成 updated beforeDestroy：清理 destroyed
- 第五遍 2025.1.23 -
- 第四遍 2025.1.18 -
- 第三遍 -
❌ // 1、大虐，卸载是 beforeDestroy 和 destroyed
❌ // 2、大虐，和第一个一样的错误，名称错啦！ beforeDestroy+destroyed，一般在 beforeDestroy 中清理一些 - 定时器、订阅时间、监听事件等，防止内存溢出
- 第二遍 -
❌ // 1、computed：咦，和上次错误的逻辑一样，不是「存储的值」是否变化，是「依赖的值」是否变化
❌❌ // 2、和上次错得一样 - 因为上次答案就是错的 😅，这就纠正了，下次不许再错了：子组件在父组件执行 父 beforeMounte 后触发
- 第一遍 -
❌ // 1、computed：这里其实对 computed 缓存的内容理解有误差，不是「值」，是「计算属性依赖的值」，同时 computed 必须return 返回
❌ // 2、watch：执行回调
❌ // 3、methods：每次页面发生变化，都会被调用
❌ // 子组件挂载完成后，父组件才会挂载 - 子组件在父组件执行 父 beforeMount 后触发
⭐️ // 这里补充：每个组件实例都有自己的「作用域」，不会互相影响

// 作业63：React渲染怎么实现的？涉及到哪些生命周期/hooks？以 const [count,setCount]=useState(0)具体说明
- 第六遍 2025.2.11 -
JIT 运行时编译，将 JSX 编译为 React.createReactElement 方法 ⭐️ // React.createElement
render阶段：生成 fiberNode 树 + 遍历执行全部 hooks + 收集副作用链 + Diff
	- hooks: useState useEffect
commit阶段：将Diff计算出的结果应用到真实 DOM + 生命周期函数+副作用链表
	- componentDidMount/componentDidUpdate/componentWillUnMount
	- useLayoutEffect
count 值改变，找到对应节点，修改值，触发 React 渲染整棵树，渲染某组件时，执行 fiberNode.memorizedState 存储的所有 hooks，如果有副作用，则收集副作用链 fiberNode.queue ⭐️ // fiberNode.updateQueue
计算 Diff 更新到真实 DOM，执行副作用链
- 第五遍 2025.1.23 -
- 第四遍 2025.1.18 -
render： fiber树 + hooks按序全部执行 + 副作用链表收集 + Diff
// ⭐️ FiberRootNode HostRootFiber beginWork-completeWork wip.tag
commit：// ⭐️ useLayoutEffect
- 第三遍 -
❌ // 0、渲染之前，React 已经通过 JIT 将 JSX 描述的 UI 编译为 React createElement方法
render阶段：❌ // 1、FiberRootNode 才是「根节点」，「HostRootFiber」只是新的 fiber 树的遍历起始点，也就是 FiberRootNode.current
❌ // 2、「遍历AST逐个生成 fiberNode」可以更详细得表述为「遍历执行 beginWork，根据不同的 wip.tag 进行不同标签的处理，执行到叶子节点 completeWork，生成 WIP Tree」
❌ // 3、render 阶段也是有生命周期在执行的，例如每次渲染执行前的 shouldComponentUpdate 
❌ // 4、遍历执行 hooks 时，如果遇到有副作用的节点，除了被副作用链表收集，react 也会在节点 Node 上标记 fiberNode.subtreeFlags
⭐️ // fiberNode.updateQueue
⭐️ // 生命周期是类组件的概念
⭐️ // useLayoutEffect、ref引用也在这个时机
❌ // 1、「触发更新」其实应该描述成「更新 count 状态对应的节点」
❌ // 2、这里应该将「如果有副作用」改写为「要注意是否有 useEffect 的作用：根据依赖数组是否变化确定是否要更新」
- 第二遍 -
❌ // 1、在 render 之前，运行时就会执行 JIT 先将 JSX 描述的 UI 编译为 React createElement 方法
1.render ：创建一颗完整的Fibernode的虚拟树 + diff
❌ // 2、中间少写了两个关键步骤：存储 hooks + 标记、收集副作用链表
❌ // 3、创建 FiberRootNode 后，创建 fiber 作为 HostRootFiber，也就是 FiberRootNode.current
❌ // 4、以单个组件为例，fiberNode 存储 hooks，按序执行时标记、收集副作用链表
❌ // 5、更新时会重新调用渲染函数，按序执行所有 hooks，所以也算是流程的一部分
- 第一遍 -