[{"data":1,"prerenderedAt":1163},["ShallowReactive",2],{"doc-\u002Fdocs\u002Finterview-framework-tooling":3,"docs-all":1061},{"id":4,"title":5,"body":6,"category":1047,"date":1048,"description":1049,"draft":1050,"extension":1051,"meta":1052,"navigation":300,"path":1053,"seo":1054,"source":1055,"stem":1056,"tags":1057,"__hash__":1060},"docs\u002Fdocs\u002Finterview-framework-tooling.md","框架与工程化考点",{"type":7,"value":8,"toc":1017},"minimark",[9,14,19,33,44,48,51,60,79,83,93,96,105,109,120,124,139,143,146,176,183,187,191,194,197,219,223,226,229,232,235,238,242,255,419,429,535,546,567,571,578,625,639,643,650,654,657,914,918,921,924,934,938,952,956,959,963,976,979,998,1013],[10,11,13],"h2",{"id":12},"react","React",[15,16,18],"h3",{"id":17},"diff-算法","diff 算法",[20,21,22,23,27,28,32],"p",{},"把树形结构按层级分解，",[24,25,26],"strong",{},"只比较同级元素","。给列表结构的每个单元添加唯一 ",[29,30,31],"code",{},"key"," 方便比较。React 只匹配相同 class（组件名）的 component。",[20,34,35,36,39,40,43],{},"调用 ",[29,37,38],{},"setState"," 时 React 将组件标记为 dirty，到每个事件循环结束时检查所有 dirty 组件并重新绘制，实现合并操作。此外支持选择性子树渲染，开发者可以重写 ",[29,41,42],{},"shouldComponentUpdate"," 来提高 diff 性能。",[15,45,47],{"id":46},"setstate-的同步与异步","setState 的同步与异步",[20,49,50],{},"这里的\"异步\"不是指异步代码实现，而是 React 会先收集变更再统一更新。",[20,52,53],{},[24,54,55,56,59],{},"在原生事件和 ",[29,57,58],{},"setTimeout"," 中是同步的，在合成事件和钩子函数中是异步的。",[20,61,62,63,66,67,70,71,74,75,78],{},"内部通过 ",[29,64,65],{},"isBatchingUpdates"," 判断是直接更新还是稍后更新，默认值为 ",[29,68,69],{},"false","。React 调用事件处理函数前会先调用 ",[29,72,73],{},"batchedUpdates"," 把它设为 ",[29,76,77],{},"true","，因此由 React 控制的事件处理过程就变成了批量更新。",[15,80,82],{"id":81},"高阶组件-hoc","高阶组件 HOC",[20,84,85,88,89,92],{},[24,86,87],{},"高阶组件接收 React 组件作为参数并返回一个新组件，它本身是一个函数而不是组件","，是重用组件逻辑的高级方法。Redux 提供的 ",[29,90,91],{},"connect"," 就是典型的高阶组件。",[15,94,95],{"id":95},"性能优化生命周期",[20,97,98,100,101,104],{},[29,99,42],{}," 用来判断是否需要调用 ",[29,102,103],{},"render"," 重新描绘 DOM。DOM 描绘非常消耗性能，在这个方法中写出更优的判断逻辑可以极大提升性能。",[15,106,108],{"id":107},"操作-dom","操作 DOM",[20,110,111,112,115,116,119],{},"在需要操作的标签上设置 ",[29,113,114],{},"ref"," 属性（保证值不重复），后续通过 ",[29,117,118],{},"this.refs.属性名"," 获取对应的虚拟 DOM 对象。",[15,121,123],{"id":122},"jsx-中的平行标签","JSX 中的平行标签",[20,125,126,127,130,131,134,135,138],{},"用 ",[29,128,129],{},"\u003C>...\u003C\u002F>"," 或 ",[29,132,133],{},"\u003CReact.Fragment>...\u003C\u002FReact.Fragment>"," 包裹，两种方式本质相同，底层都是通过 ",[29,136,137],{},"document.createDocumentFragment()"," 创建虚拟 DOM 标签。",[10,140,142],{"id":141},"redux","Redux",[20,144,145],{},"Redux 是状态管理工具，不仅可用于 React，也可在其他框架中使用，甚至能脱离框架独立使用。",[20,147,148,149,152,153,156,157,160,161,164,165,168,169,172,173,175],{},"三个核心组成部分：",[29,150,151],{},"store"," 是存储数据的对象，必须通过 ",[29,154,155],{},"createStore"," 创建；",[29,158,159],{},"action"," 是更新数据的规则，必须有一个 ",[29,162,163],{},"type"," 属性且值为字符串；",[29,166,167],{},"reducer"," 是更新数据的函数，接收 ",[29,170,171],{},"state"," 和 ",[29,174,159],{}," 两个参数。",[20,177,178,179,182],{},"在 React 中通常配合 ",[29,180,181],{},"react-redux"," 简化使用步骤。",[10,184,186],{"id":185},"vue","Vue",[15,188,190],{"id":189},"mvvm-与设计思想","MVVM 与设计思想",[20,192,193],{},"Vue 负责 VM（视图模型）的工作，将视图和模型相关联——模型变化时视图自动更新，也可以通过视图操作模型。核心思想是组件化开发和声明式编程。",[15,195,196],{"id":196},"常考清单",[20,198,199,200,203,204,207,208,203,211,214,215,218],{},"双向绑定原理、组件通信方式、生命周期、",[29,201,202],{},"created"," 与 ",[29,205,206],{},"mounted"," 的区别、",[29,209,210],{},"computed",[29,212,213],{},"watch"," 的区别、路由原理、",[29,216,217],{},"keep-alive"," 的作用、常用指令与修饰符、路由传参方式、Vuex 的理解与使用场景及优缺点。",[10,220,222],{"id":221},"ssr-服务端渲染","SSR 服务端渲染",[20,224,225],{},"SSR 全称 Server Side Rendering，让页面渲染在服务端完成。生产环境必须部署 Node.js 环境，因为服务端渲染需要借助 Node 完成。Vue 生态中可以使用 Nuxt 框架实现。",[10,227,228],{"id":228},"构建工具",[15,230,231],{"id":231},"为什么需要构建工具",[20,233,234],{},"习惯了在 Node 中编写代码后，回到前端会遇到两个问题：浏览器兼容性导致不能放心使用模块化规范；即使能用模块化，模块过多时也会面临加载性能问题。",[20,236,237],{},"构建工具将使用 ESM 规范编写的代码转换为旧的 JS 语法并打包成单个文件，同时解决了兼容性和模块过多的问题。",[15,239,241],{"id":240},"webpack","Webpack",[20,243,244,245,172,247,250,251,254],{},"基本使用步骤是初始化项目、安装 ",[29,246,240],{},[29,248,249],{},"webpack-cli","、创建 ",[29,252,253],{},"src"," 目录编写代码、执行打包命令。",[256,257,262],"pre",{"className":258,"code":259,"language":260,"meta":261,"style":261},"language-js shiki shiki-themes github-light github-dark","const path = require('path')\n\nmodule.exports = {\n  mode: 'production',\n  entry: '.\u002Fsrc\u002Findex.js',\n  output: {},\n  module: {\n    rules: [\n      { test: \u002F\\.css$\u002Fi, use: ['style-loader', 'css-loader'] }\n    ]\n  }\n}\n","js","",[29,263,264,295,302,319,331,342,348,354,360,401,407,413],{"__ignoreMap":261},[265,266,269,273,277,280,284,288,292],"span",{"class":267,"line":268},"line",1,[265,270,272],{"class":271},"szBVR","const",[265,274,276],{"class":275},"sj4cs"," path",[265,278,279],{"class":271}," =",[265,281,283],{"class":282},"sScJk"," require",[265,285,287],{"class":286},"sVt8B","(",[265,289,291],{"class":290},"sZZnC","'path'",[265,293,294],{"class":286},")\n",[265,296,298],{"class":267,"line":297},2,[265,299,301],{"emptyLinePlaceholder":300},true,"\n",[265,303,305,308,311,314,316],{"class":267,"line":304},3,[265,306,307],{"class":275},"module",[265,309,310],{"class":286},".",[265,312,313],{"class":275},"exports",[265,315,279],{"class":271},[265,317,318],{"class":286}," {\n",[265,320,322,325,328],{"class":267,"line":321},4,[265,323,324],{"class":286},"  mode: ",[265,326,327],{"class":290},"'production'",[265,329,330],{"class":286},",\n",[265,332,334,337,340],{"class":267,"line":333},5,[265,335,336],{"class":286},"  entry: ",[265,338,339],{"class":290},"'.\u002Fsrc\u002Findex.js'",[265,341,330],{"class":286},[265,343,345],{"class":267,"line":344},6,[265,346,347],{"class":286},"  output: {},\n",[265,349,351],{"class":267,"line":350},7,[265,352,353],{"class":286},"  module: {\n",[265,355,357],{"class":267,"line":356},8,[265,358,359],{"class":286},"    rules: [\n",[265,361,363,366,369,373,377,380,383,386,389,392,395,398],{"class":267,"line":362},9,[265,364,365],{"class":286},"      { test:",[265,367,368],{"class":290}," \u002F",[265,370,372],{"class":371},"snhLl","\\.",[265,374,376],{"class":375},"sA_wV","css",[265,378,379],{"class":271},"$",[265,381,382],{"class":290},"\u002F",[265,384,385],{"class":271},"i",[265,387,388],{"class":286},", use: [",[265,390,391],{"class":290},"'style-loader'",[265,393,394],{"class":286},", ",[265,396,397],{"class":290},"'css-loader'",[265,399,400],{"class":286},"] }\n",[265,402,404],{"class":267,"line":403},10,[265,405,406],{"class":286},"    ]\n",[265,408,410],{"class":267,"line":409},11,[265,411,412],{"class":286},"  }\n",[265,414,416],{"class":267,"line":415},12,[265,417,418],{"class":286},"}\n",[20,420,421,424,425,428],{},[24,422,423],{},"Babel 集成","用于把新 JS 语法转换为旧语法提高兼容性。安装 ",[29,426,427],{},"babel-loader @babel\u002Fcore @babel\u002Fpreset-env"," 后配置：",[256,430,432],{"className":258,"code":431,"language":260,"meta":261,"style":261},"module: {\n  rules: [\n    {\n      test: \u002F\\.m?js$\u002F,\n      exclude: \u002Fnode_modules\u002F,\n      use: {\n        loader: 'babel-loader',\n        options: { presets: ['@babel\u002Fpreset-env'] }\n      }\n    }\n  ]\n}\n",[29,433,434,441,449,454,477,491,496,506,516,521,526,531],{"__ignoreMap":261},[265,435,436,438],{"class":267,"line":268},[265,437,307],{"class":282},[265,439,440],{"class":286},": {\n",[265,442,443,446],{"class":267,"line":297},[265,444,445],{"class":282},"  rules",[265,447,448],{"class":286},": [\n",[265,450,451],{"class":267,"line":304},[265,452,453],{"class":286},"    {\n",[265,455,456,459,461,463,466,469,471,473,475],{"class":267,"line":321},[265,457,458],{"class":286},"      test:",[265,460,368],{"class":290},[265,462,372],{"class":371},[265,464,465],{"class":375},"m",[265,467,468],{"class":271},"?",[265,470,260],{"class":375},[265,472,379],{"class":271},[265,474,382],{"class":290},[265,476,330],{"class":286},[265,478,479,482,484,487,489],{"class":267,"line":333},[265,480,481],{"class":286},"      exclude:",[265,483,368],{"class":290},[265,485,486],{"class":375},"node_modules",[265,488,382],{"class":290},[265,490,330],{"class":286},[265,492,493],{"class":267,"line":344},[265,494,495],{"class":286},"      use: {\n",[265,497,498,501,504],{"class":267,"line":350},[265,499,500],{"class":286},"        loader: ",[265,502,503],{"class":290},"'babel-loader'",[265,505,330],{"class":286},[265,507,508,511,514],{"class":267,"line":356},[265,509,510],{"class":286},"        options: { presets: [",[265,512,513],{"class":290},"'@babel\u002Fpreset-env'",[265,515,400],{"class":286},[265,517,518],{"class":267,"line":362},[265,519,520],{"class":286},"      }\n",[265,522,523],{"class":267,"line":403},[265,524,525],{"class":286},"    }\n",[265,527,528],{"class":267,"line":409},[265,529,530],{"class":286},"  ]\n",[265,532,533],{"class":267,"line":415},[265,534,418],{"class":286},[20,536,537,538,541,542,545],{},"同时在 ",[29,539,540],{},"package.json"," 中设置 ",[29,543,544],{},"browserslist"," 兼容列表。",[20,547,548,551,552,555,556,126,559,562,563,566],{},[24,549,550],{},"插件","用于扩展 webpack 功能，",[29,553,554],{},"html-webpack-plugin"," 可以在打包后自动生成 HTML 页面。",[24,557,558],{},"开发服务器",[29,560,561],{},"webpack-dev-server","，",[29,564,565],{},"devtool: \"inline-source-map\""," 配置源码映射。",[15,568,570],{"id":569},"vite","Vite",[20,572,573,574,577],{},"Vite 与 webpack 的运行方式根本不同：",[24,575,576],{},"开发时不打包，直接以 ESM 方式运行项目；只在部署时才打包。"," 这是它启动速度快的根本原因。",[256,579,581],{"className":258,"code":580,"language":260,"meta":261,"style":261},"import { defineConfig } from 'vite'\n\nexport default defineConfig({\n  plugins: []\n})\n",[29,582,583,597,601,615,620],{"__ignoreMap":261},[265,584,585,588,591,594],{"class":267,"line":268},[265,586,587],{"class":271},"import",[265,589,590],{"class":286}," { defineConfig } ",[265,592,593],{"class":271},"from",[265,595,596],{"class":290}," 'vite'\n",[265,598,599],{"class":267,"line":297},[265,600,301],{"emptyLinePlaceholder":300},[265,602,603,606,609,612],{"class":267,"line":304},[265,604,605],{"class":271},"export",[265,607,608],{"class":271}," default",[265,610,611],{"class":282}," defineConfig",[265,613,614],{"class":286},"({\n",[265,616,617],{"class":267,"line":321},[265,618,619],{"class":286},"  plugins: []\n",[265,621,622],{"class":267,"line":333},[265,623,624],{"class":286},"})\n",[20,626,627,628,630,631,634,635,638],{},"开发命令 ",[29,629,569],{}," 启动服务器，",[29,632,633],{},"vite build"," 打包，",[29,636,637],{},"vite preview"," 预览打包结果。Vite 的源码目录就是项目根目录。",[15,640,642],{"id":641},"webpack-与-gulp-的区别","Webpack 与 Gulp 的区别",[20,644,645,646,649],{},"在代码合并这件事上，",[24,647,648],{},"webpack 基于 CommonJS 模块化规范进行合并，而 gulp 只是简单的文件拼接","。常见的前端构建工具还有 grunt。",[10,651,653],{"id":652},"git","Git",[15,655,656],{"id":656},"常用命令",[256,658,662],{"className":659,"code":660,"language":661,"meta":261,"style":261},"language-bash shiki shiki-themes github-light github-dark","git init                      # 初始化仓库\ngit add \u003Cfile>                # 添加到暂存区\ngit commit -m \"message\"       # 提交到本地仓库\ngit push \u003Cremote> \u003Cbranch>    # 推送到远程仓库\ngit pull                      # 拉取并自动合并\ngit clone \u003Curl>               # 克隆仓库\n\ngit branch                    # 查看分支\ngit branch \u003Cname>             # 创建分支\ngit switch \u003Cname>             # 切换分支\ngit switch -c \u003Cname>          # 创建并切换\ngit merge \u003Cname>              # 合并分支\n\ngit log --oneline             # 查看简洁日志\ngit reflog                    # 查看所有日志\ngit reset --hard \u003Ccommit-id>  # 版本回退\n","bash",[29,663,664,675,697,713,742,752,772,776,786,804,822,842,860,865,879,890],{"__ignoreMap":261},[265,665,666,668,671],{"class":267,"line":268},[265,667,652],{"class":282},[265,669,670],{"class":290}," init",[265,672,674],{"class":673},"sJ8bj","                      # 初始化仓库\n",[265,676,677,679,682,685,688,691,694],{"class":267,"line":297},[265,678,652],{"class":282},[265,680,681],{"class":290}," add",[265,683,684],{"class":271}," \u003C",[265,686,687],{"class":290},"fil",[265,689,690],{"class":286},"e",[265,692,693],{"class":271},">",[265,695,696],{"class":673},"                # 添加到暂存区\n",[265,698,699,701,704,707,710],{"class":267,"line":304},[265,700,652],{"class":282},[265,702,703],{"class":290}," commit",[265,705,706],{"class":275}," -m",[265,708,709],{"class":290}," \"message\"",[265,711,712],{"class":673},"       # 提交到本地仓库\n",[265,714,715,717,720,722,725,727,729,731,734,737,739],{"class":267,"line":321},[265,716,652],{"class":282},[265,718,719],{"class":290}," push",[265,721,684],{"class":271},[265,723,724],{"class":290},"remot",[265,726,690],{"class":286},[265,728,693],{"class":271},[265,730,684],{"class":271},[265,732,733],{"class":290},"branc",[265,735,736],{"class":286},"h",[265,738,693],{"class":271},[265,740,741],{"class":673},"    # 推送到远程仓库\n",[265,743,744,746,749],{"class":267,"line":333},[265,745,652],{"class":282},[265,747,748],{"class":290}," pull",[265,750,751],{"class":673},"                      # 拉取并自动合并\n",[265,753,754,756,759,761,764,767,769],{"class":267,"line":344},[265,755,652],{"class":282},[265,757,758],{"class":290}," clone",[265,760,684],{"class":271},[265,762,763],{"class":290},"ur",[265,765,766],{"class":286},"l",[265,768,693],{"class":271},[265,770,771],{"class":673},"               # 克隆仓库\n",[265,773,774],{"class":267,"line":350},[265,775,301],{"emptyLinePlaceholder":300},[265,777,778,780,783],{"class":267,"line":356},[265,779,652],{"class":282},[265,781,782],{"class":290}," branch",[265,784,785],{"class":673},"                    # 查看分支\n",[265,787,788,790,792,794,797,799,801],{"class":267,"line":362},[265,789,652],{"class":282},[265,791,782],{"class":290},[265,793,684],{"class":271},[265,795,796],{"class":290},"nam",[265,798,690],{"class":286},[265,800,693],{"class":271},[265,802,803],{"class":673},"             # 创建分支\n",[265,805,806,808,811,813,815,817,819],{"class":267,"line":403},[265,807,652],{"class":282},[265,809,810],{"class":290}," switch",[265,812,684],{"class":271},[265,814,796],{"class":290},[265,816,690],{"class":286},[265,818,693],{"class":271},[265,820,821],{"class":673},"             # 切换分支\n",[265,823,824,826,828,831,833,835,837,839],{"class":267,"line":409},[265,825,652],{"class":282},[265,827,810],{"class":290},[265,829,830],{"class":275}," -c",[265,832,684],{"class":271},[265,834,796],{"class":290},[265,836,690],{"class":286},[265,838,693],{"class":271},[265,840,841],{"class":673},"          # 创建并切换\n",[265,843,844,846,849,851,853,855,857],{"class":267,"line":415},[265,845,652],{"class":282},[265,847,848],{"class":290}," merge",[265,850,684],{"class":271},[265,852,796],{"class":290},[265,854,690],{"class":286},[265,856,693],{"class":271},[265,858,859],{"class":673},"              # 合并分支\n",[265,861,863],{"class":267,"line":862},13,[265,864,301],{"emptyLinePlaceholder":300},[265,866,868,870,873,876],{"class":267,"line":867},14,[265,869,652],{"class":282},[265,871,872],{"class":290}," log",[265,874,875],{"class":275}," --oneline",[265,877,878],{"class":673},"             # 查看简洁日志\n",[265,880,882,884,887],{"class":267,"line":881},15,[265,883,652],{"class":282},[265,885,886],{"class":290}," reflog",[265,888,889],{"class":673},"                    # 查看所有日志\n",[265,891,893,895,898,901,903,906,909,911],{"class":267,"line":892},16,[265,894,652],{"class":282},[265,896,897],{"class":290}," reset",[265,899,900],{"class":275}," --hard",[265,902,684],{"class":271},[265,904,905],{"class":290},"commit-i",[265,907,908],{"class":286},"d",[265,910,693],{"class":271},[265,912,913],{"class":673},"  # 版本回退\n",[15,915,917],{"id":916},"merge-与-rebase","merge 与 rebase",[20,919,920],{},"两者最终结果一样，但 rebase 会让提交记录更整洁清晰。",[20,922,923],{},"变基的原理是：找到两条分支最近的共同祖先，对比当前分支相对于祖先的历史提交并提取到临时文件，将当前分支指向目标基底，最后以新基底为起点重新执行历史操作。",[20,925,926,929,930,933],{},[24,927,928],{},"重要约束","：大部分情况下 merge 和 rebase 可以互换，但",[24,931,932],{},"如果分支已经推送到远程仓库，就不要再变基","。",[15,935,937],{"id":936},"fetch-与-pull","fetch 与 pull",[20,939,940,943,944,947,948,951],{},[29,941,942],{},"git fetch"," 从远程下载所有代码但",[24,945,946],{},"不会自动合并","，需要手动合并；",[29,949,950],{},"git pull"," 拉取并自动合并。本地版本低于远程时 push 会被拒绝，必须先确保版本一致。",[15,953,955],{"id":954},"git-与-svn-的区别","Git 与 SVN 的区别",[20,957,958],{},"Git 是分布式仓库管理系统，每个人本地都有完整仓库；SVN 是集中式，仓库只有一个。SVN 一般需要服务端为每人分配账号密码，Git 使用 SSH 公钥\u002F私钥对区分不同开发者。",[15,960,962],{"id":961},"github-pages-部署要求","GitHub Pages 部署要求",[20,964,965,966,969,970,973,974,933],{},"静态页面的分支必须叫 ",[29,967,968],{},"gh-pages","。如果希望通过 ",[29,971,972],{},"xxx.github.io"," 访问，需要将仓库名配置为 ",[29,975,972],{},[10,977,978],{"id":978},"小程序",[20,980,981,172,984,987,988,990,991,994,995,997],{},[29,982,983],{},"onLoad",[29,985,986],{},"onShow"," 的区别在于触发时机。首次加载时 ",[29,989,983],{}," 在页面加载时调用，可通过 ",[29,992,993],{},"options"," 获取参数；",[29,996,986],{}," 在页面显示时调用。",[20,999,1000,1009,1010,1012],{},[24,1001,1002,1003,1005,1006,1008],{},"从其他页面返回时，",[29,1004,986],{}," 会重新调用，",[29,1007,983],{}," 不会。"," 因此有内容需要及时更新时应把逻辑放在 ",[29,1011,986],{},"，但要注意每次返回都执行会带来性能开销。",[1014,1015,1016],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .snhLl, html code.shiki .snhLl{--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":261,"searchDepth":304,"depth":304,"links":1018},[1019,1027,1028,1032,1033,1039,1046],{"id":12,"depth":297,"text":13,"children":1020},[1021,1022,1023,1024,1025,1026],{"id":17,"depth":304,"text":18},{"id":46,"depth":304,"text":47},{"id":81,"depth":304,"text":82},{"id":95,"depth":304,"text":95},{"id":107,"depth":304,"text":108},{"id":122,"depth":304,"text":123},{"id":141,"depth":297,"text":142},{"id":185,"depth":297,"text":186,"children":1029},[1030,1031],{"id":189,"depth":304,"text":190},{"id":196,"depth":304,"text":196},{"id":221,"depth":297,"text":222},{"id":228,"depth":297,"text":228,"children":1034},[1035,1036,1037,1038],{"id":231,"depth":304,"text":231},{"id":240,"depth":304,"text":241},{"id":569,"depth":304,"text":570},{"id":641,"depth":304,"text":642},{"id":652,"depth":297,"text":653,"children":1040},[1041,1042,1043,1044,1045],{"id":656,"depth":304,"text":656},{"id":916,"depth":304,"text":917},{"id":936,"depth":304,"text":937},{"id":954,"depth":304,"text":955},{"id":961,"depth":304,"text":962},{"id":978,"depth":297,"text":978},"interview","2024-11-03","React diff 与 setState 机制、Redux 核心组成、Vue 常考清单，以及 Webpack、Vite、Git 的面试要点。",false,"md",{},"\u002Fdocs\u002Finterview-framework-tooling",{"title":5,"description":1049},null,"docs\u002Finterview-framework-tooling",[185,1058,240,569,1059],"javascript","notes","oh5SDGD3aju7thKGxxL4ECPJswWUKEaV3HGncqrrJWE",[1062,1073,1082,1088,1098,1104,1112,1117,1119,1124,1131,1137,1144,1151,1157],{"path":1063,"title":1064,"description":1065,"date":1066,"category":1067,"tags":1068},"\u002Fdocs\u002Ffrontend-coding-standards","前端团队编码规范","HTML \u002F CSS \u002F JavaScript 三端统一的团队编码约定，含缩进、命名、语法与禁用项，可直接作为 Code Review 依据。","2025-12-17","standards",[1069,376,1058,1070,1071,1072],"html","es6","best-practice","guide",{"path":1074,"title":1075,"description":1076,"date":1077,"category":1078,"tags":1079},"\u002Fdocs\u002Fwindows-mklink","Windows mklink 符号链接用法","mklink 各参数区别与实用场景：目录联接、符号链接与硬链接的选择。","2024-12-18","toolchain",[1080,1081],"windows","cheatsheet",{"path":1083,"title":1084,"description":1085,"date":1086,"category":1078,"tags":1087},"\u002Fdocs\u002Frandom-color-utils","JS 随机颜色生成方法","几种生成随机 RGB \u002F HEX 颜色的实现方式与各自适用场景。","2024-12-11",[1058,1081],{"path":1089,"title":1090,"description":1091,"date":1092,"category":1093,"tags":1094},"\u002Fdocs\u002Fcanvas-vs-svg","Canvas 与 SVG 绘图方案选型","对比 Canvas 与 SVG 两种绘图方案的优缺点与适用场景，给出选型判断依据。","2024-12-09","visualization",[1095,1096,1097,1071],"canvas","svg","performance",{"path":1099,"title":1100,"description":1101,"date":1048,"category":1078,"tags":1102},"\u002Fdocs\u002Ffree-commercial-fonts","免费可商用字体整理","整理思源黑体、思源宋体等可商用中文字体，规避字体版权风险。",[1103,376,1059],"font",{"path":1105,"title":1106,"description":1107,"date":1048,"category":1047,"tags":1108},"\u002Fdocs\u002Finterview-browser-network","浏览器与网络考点","从输入 URL 到页面呈现的完整链路，涵盖渲染流程、回流重绘、HTTP 报文与状态码、跨域同源策略与常见攻击方式。",[1109,1110,1111,1097,1059],"browser","http","network",{"path":1113,"title":1114,"description":1115,"date":1048,"category":1047,"tags":1116},"\u002Fdocs\u002Finterview-css-layout","CSS 与布局考点","em 与 rem 的区别、移动端三种适配方案对比、viewport 标准设置与 REM 布局的媒体查询实现。",[376,1069,1071,1059],{"path":1053,"title":5,"description":1049,"date":1048,"category":1047,"tags":1118},[185,1058,240,569,1059],{"path":1120,"title":1121,"description":1122,"date":1048,"category":1047,"tags":1123},"\u002Fdocs\u002Finterview-javascript-core","JavaScript 核心考点","数据类型、this 绑定、闭包、原型链、异步与数组方法，前端面试中 JS 部分的高频考点与代码示例。",[1058,1070,1059],{"path":1125,"title":1126,"description":1127,"date":1048,"category":1128,"tags":1129},"\u002Fdocs\u002Fjs-module-systems","JavaScript 模块化方案","梳理 CommonJS、AMD、ES Module 等模块化方案的差异与使用方式。","fundamentals",[1058,1130,1070,1059],"module-system",{"path":1132,"title":1133,"description":1134,"date":1048,"category":1128,"tags":1135},"\u002Fdocs\u002Fwebsocket-basics","WebSocket 基础","WebSocket 全双工通信协议的事件、方法与基本用法整理。",[1136,1111,1058,1059],"websocket",{"path":1138,"title":1139,"description":1140,"date":1141,"category":1093,"tags":1142},"\u002Fdocs\u002Fgojs-getting-started","GoJS 入门实战","从引入方式、画布初始化到节点模板与数据绑定，一份可直接上手的 GoJS 流程图开发笔记。","2024-08-22",[1143,1058,1059],"gojs",{"path":1145,"title":1146,"description":1147,"date":1148,"category":1093,"tags":1149},"\u002Fdocs\u002Fecharts-options-notes","ECharts 配置项速查","整理 ECharts 常用 option 配置：数据格式、坐标轴、图例与交互项的实际用法。","2024-08-09",[1150,1058,1081],"echarts",{"path":1152,"title":1153,"description":1154,"date":1155,"category":1128,"tags":1156},"\u002Fdocs\u002Fhttp-status-codes","HTTP 响应状态码详解","按 1xx 到 5xx 分类梳理 HTTP 状态码的含义与典型使用场景。","2024-06-27",[1110,1111,1081],{"path":1158,"title":1159,"description":1160,"date":1161,"category":1128,"tags":1162},"\u002Fdocs\u002Fhtml-basics","HTML 基础笔记","HTML 语法规范、常用标签、表格与表单元素速查。","2022-06-10",[1069,1059,1081],1788337378848]