不压缩的项目

\n \n

\n```\n\nCSS:\n\n```css\n.flex-container {\n display: flex;\n /* 添加其他需要的flex布局属性 */\n}\n\n.flex-item {\n flex-shrink: 0; /* 这使得该flex项目不会被压缩 */\n /* 设置宽度或其他样式 */\n}\n```\n\n在这个例子中，任何带有`flex-item`类的元素都不会在容器空间不足时被压缩。\n\n此外，`flex`属性是`flex-grow`、`flex-shrink`和`flex-basis`这三个属性的简写。如果你想在保证元素不被压缩的同时，具体控制元素的放大行为或基础大小，也可以直接使用`flex`属性进行设置。例如，如果你还希望元素不放大，并且有一个固定的基础大小，可以这样设置：\n\n```css\n.flex-item {\n flex: 0 0 auto; /* 不放大，不缩小，基础大小为auto */\n}\n```\n\n这种方式提供了更细致的控制，`0 0 auto`分别对应`flex-grow`、`flex-shrink`和`flex-basis`的值。这告诉浏览器该项目即不应放大，也不应缩小，并且以其默认大小作为基础大小。\n",{"_54":421,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/881/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/881/timeline",{"_54":424,"_56":57,"_58":425,"_60":426,"_62":427,"_64":428,"_66":429,"_68":430,"_70":431,"_72":432,"_74":433,"_107":434,"_127":128,"_129":26,"_130":-5,"_131":437,"_133":438,"_155":148,"_149":440,"_151":440,"_154":-5,"_159":160,"_161":441,"_166":-5,"_167":442,"_169":443,"_181":445,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/876","https://api.github.com/repos/pro-collection/interview-question/issues/876/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/876/comments","https://api.github.com/repos/pro-collection/interview-question/issues/876/events","https://github.com/pro-collection/interview-question/issues/876",2526772397,"I_kwDOJGDC6c6Wm3yt",876,"eslint 如何设置只校验本次 MR 变更的文件内容【热度: 200】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[435,436],{"_66":271,"_68":272,"_54":273,"_113":274,"_115":275,"_117":26,"_118":276},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":439,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-09-15T06:58:14Z",{"_163":148,"_164":148,"_165":148},"**关键词**：eslint 和 git 结合校验\n\n要让 ESLint 只校验在 Merge Request (MR)、Pull Request (PR)或代码提交中变更的文件，可以采用几种方法。下面是几个可能的方案：\n\n### 1. 命令行 Git 和 ESLint 组合使用\n\n通过组合`git`命令和`eslint`命令来实现。首先，使用`git diff`获取变更的文件列表，然后将这些文件传递给`eslint`进行校验。\n\n```bash\n# 获取master分支与当前分支变更的文件列表，然后对这些文件执行eslint校验\ngit diff --name-only --diff-filter=d master | grep '\\.js$' | xargs eslint\n```\n\n这里的命令解释：\n\n- `git diff --name-only --diff-filter=d master`：获取相对于`master`分支变更的文件列表，`--diff-filter=d`表示排除已删除的文件。\n- `grep '\\.js$'`：过滤出`.js`结尾的文件。\n- `xargs eslint`：将过滤后的文件列表作为参数传递给`eslint`命令。\n\n注意：这个命令以`master`分支作为对比对象，如果你需要对比其他分支，请将`master`替换为相应的分支名。\n\n### 2. 使用 lint-staged 运行 ESLint\n\n[lint-staged](https://github.com/okonet/lint-staged) 是一个在 git 暂存文件上运行 linters 的工具，它非常适合与 pre-commit 钩子结合使用，确保只有符合代码规范的代码才能被提交。\n\n首先，安装`lint-staged`和`husky`（用于管理 git 钩子的工具）：\n\n```bash\nnpm install lint-staged husky --save-dev\n```\n\n然后，你可以在项目的`package.json`文件中配置`lint-staged`：\n\n```json\n{\n \"husky\": {\n \"hooks\": {\n \"pre-commit\": \"lint-staged\"\n }\n },\n \"lint-staged\": {\n \"*.js\": [\"eslint --fix\", \"git add\"]\n }\n}\n```\n\n这样配置后，每次执行`git commit`操作时，`husky`会触发`pre-commit`钩子，运行`lint-staged`，再由`lint-staged`运行 ESLint 检查所有暂存的`.js`文件。通过这种方式，只有变更的并且被 git track 的文件会被 ESLint 校验。\n\n### 3. CI/CD 中集成 ESLint\n\n在持续集成/持续部署 (CI/CD) 流程中，你也可以配置脚本使用类似于第一个方案的命令，只校验在 MR/PR 中变更的文件。具体实现方式会依赖于你使用的 CI/CD 工具（如 GitLab CI、GitHub Actions、Jenkins 等）。\n\n通过在 CI/CD 流程中加入这一步，可以确保只有通过 ESLint 校验的代码变更才能合并到主分支。\n",{"_54":444,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/876/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/876/timeline",{"_54":447,"_56":57,"_58":448,"_60":449,"_62":450,"_64":451,"_66":452,"_68":453,"_70":454,"_72":455,"_74":456,"_107":457,"_127":128,"_129":26,"_130":-5,"_131":466,"_133":467,"_155":156,"_149":469,"_151":470,"_154":-5,"_159":160,"_161":471,"_166":-5,"_167":472,"_169":473,"_181":475,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/874","https://api.github.com/repos/pro-collection/interview-question/issues/874/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/874/comments","https://api.github.com/repos/pro-collection/interview-question/issues/874/events","https://github.com/pro-collection/interview-question/issues/874",2498696947,"I_kwDOJGDC6c6U7xbz",874,"如何开启 ts 类型强校验，ts 类型错误 webpack 直接编译失败【热度: 232】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[458,465],{"_66":459,"_68":460,"_54":461,"_113":462,"_115":463,"_117":26,"_118":464},5232527330,"LA_kwDOJGDC6c8AAAABN-IH4g","https://api.github.com/repos/pro-collection/interview-question/labels/TypeScript","TypeScript","258B51","TypeScript 语法部分",{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":468,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-08-31T07:09:46Z","2024-08-31T07:38:22Z",{"_163":148,"_164":148,"_165":148},"**关键词**：ts 类型强校验\n\n要开启 TypeScript 的类型强校验，并使得 Webpack 在遇到类型错误时编译失败，可以通过以下步骤实现：\n\n### 1. 开启 TS 严格模式\n\n首先，在`tsconfig.json`中启用严格模式。这是通过设置`\"strict\": true`来实现的，这个选项会启用一系列严格的类型检查，帮助你写出更健壮的代码。\n\n```json\n{\n \"compilerOptions\": {\n \"strict\": true,\n ...\n },\n ...\n}\n```\n\n`\"strict\": true`基本等同于下面这些选项全部开启：\n\n- `noImplicitAny`\n- `strictNullChecks`\n- `strictFunctionTypes`\n- `strictBindCallApply`\n- `strictPropertyInitialization`\n- `noImplicitThis`\n- `alwaysStrict`\n\n### 2. 使用`ForkTsCheckerWebpackPlugin`并配置使编译失败\n\n当使用 Webpack 和`ts-loader`时，你可以通过安装并配置`ForkTsCheckerWebpackPlugin`来进行强类型校验。这个插件可以并行运行 TypeScript 类型检查器和 ESLint，并能在检测到错误时使 Webpack 编译失败。\n\n首先，安装`ForkTsCheckerWebpackPlugin`（如果你还没安装）：\n\n```bash\nnpm install --save-dev fork-ts-checker-webpack-plugin\n```\n\n然后，在你的`webpack.config.js`配置文件中，修改`ForkTsCheckerWebpackPlugin`的配置，确保在遇到 TypeScript 类型错误时构建失败：\n\n```javascript\nconst ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');\n\nmodule.exports = {\n ... // 其他webpack配置\n plugins: [\n new ForkTsCheckerWebpackPlugin({\n async: false, // 关键配置：这将使得webpack等待TypeScript类型检查器和ESLint完成，如果发现任何错误都将导致构建失败\n }),\n ],\n ... // 其他webpack配置\n};\n```\n\n### 注意\n\n- 设置`async: false`，会使得 Webpack 等待类型检查完成，如果有任何错误则构建失败。这对于生产构建很有用，但可能会降低开发环境的迭代速度。\n\n- 由于这个插件是并行在一个单独的进程中运行的，它不会延长 Webpack 的编译时间。然而，如果设置了`async: false`，则 Webpack 会等待该插件的结果，从而影响到构建的总时间。\n",{"_54":474,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/874/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/874/timeline",{"_54":477,"_56":57,"_58":478,"_60":479,"_62":480,"_64":481,"_66":482,"_68":483,"_70":484,"_72":485,"_74":486,"_107":487,"_127":128,"_129":26,"_130":-5,"_131":496,"_133":497,"_155":148,"_149":499,"_151":499,"_154":-5,"_159":160,"_161":500,"_166":-5,"_167":501,"_169":502,"_181":504,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/869","https://api.github.com/repos/pro-collection/interview-question/issues/869/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/869/comments","https://api.github.com/repos/pro-collection/interview-question/issues/869/events","https://github.com/pro-collection/interview-question/issues/869",2498581712,"I_kwDOJGDC6c6U7VTQ",869,"实现阿拉伯数字转中文【热度: 673】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[488,489],{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},{"_66":490,"_68":491,"_54":492,"_113":493,"_115":494,"_117":26,"_118":495},5931045040,"LA_kwDOJGDC6c8AAAABYYSQsA","https://api.github.com/repos/pro-collection/interview-question/labels/%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0/%E7%AE%97%E6%B3%95","代码实现/算法","1d76db","代码实现或者算法实现",[],{"_54":202,"_64":203,"_58":204,"_66":205,"_68":206,"_70":207,"_72":208,"_118":209,"_143":498,"_145":211,"_147":148,"_127":128,"_149":212,"_151":213,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-08-31T03:12:35Z",{"_163":148,"_164":148,"_165":148},"**关键词**：数字转中文\n\n将阿拉伯数字转换成中文数字，主要考虑到以下几个转换规则：\n\n1. **基本数字**：0-9 对应的汉字数字。\n2. **单位**：十、百、千、万、亿等。\n3. **规则**：数字从右到左，每 4 位一小节，小节内部和小节之间的转换规则。\n\n### 实现思路\n\n1. 将阿拉伯数字分解成单个数字，从右到左进行处理。\n2. 对每 4 位数字进行处理，即一个小节，处理完再根据小节的位置添加对应的单位（万、亿等）。\n3. 处理当前小节内部的数字，并添加十、百、千的单位，注意去除连续的零，并且在必要时加入“零”字。\n4. 将各个小节合并得到最终结果。\n\n下面的 JavaScript 函数实现了阿拉伯数字到中文数字的基本转换：\n\n```js\nconst number2text = (number, type = \"upper\") => {\n // 配置\n const confs = {\n lower: {\n num: [\"零\", \"一\", \"二\", \"三\", \"四\", \"五\", \"六\", \"七\", \"八\", \"九\"],\n unit: [\"\", \"十\", \"百\", \"千\", \"万\"],\n level: [\"\", \"万\", \"亿\"],\n },\n upper: {\n num: [\"零\", \"壹\", \"贰\", \"叁\", \"肆\", \"伍\", \"陆\", \"柒\", \"捌\", \"玖\"],\n unit: [\"\", \"拾\", \"佰\", \"仟\"],\n level: [\"\", \"万\", \"亿\"],\n },\n decimal: {\n unit: [\"分\", \"角\"],\n },\n maxNumber: 999999999999.99,\n };\n\n // 过滤不合法参数\n if (Number(number) > confs.maxNumber) {\n console.error(`The maxNumber is ${confs.maxNumber}. ${number} is bigger than it!`);\n return false;\n }\n\n const conf = confs[type];\n const numbers = String(Number(number).toFixed(2)).split(\".\");\n const integer = numbers[0].split(\"\");\n const decimal = Number(numbers[1]) === 0 ? [] : numbers[1].split(\"\");\n\n // 四位分级\n const levels = integer.reverse().reduce((pre, item, idx) => {\n let level = pre[0] && pre[0].length < 4 ? pre[0] : [];\n let value = item === \"0\" ? conf.num[item] : conf.num[item] + conf.unit[idx % 4];\n level.unshift(value);\n\n if (level.length === 1) {\n pre.unshift(level);\n } else {\n pre[0] = level;\n }\n\n return pre;\n }, []);\n\n // 整数部分\n const _integer = levels.reduce((pre, item, idx) => {\n let _level = conf.level[levels.length - idx - 1];\n let _item = item.join(\"\").replace(/(零)\\1+/g, \"$1\"); // 连续多个零字的部分设置为单个零字\n\n // 如果这一级只有一个零字，则去掉这级\n if (_item === \"零\") {\n _item = \"\";\n _level = \"\";\n\n // 否则如果末尾为零字，则去掉这个零字\n } else if (_item[_item.length - 1] === \"零\") {\n _item = _item.slice(0, _item.length - 1);\n }\n\n return pre + _item + _level;\n }, \"\");\n\n // 小数部分\n let _decimal = decimal\n .map((item, idx) => {\n const unit = confs.decimal.unit;\n const _unit = item !== \"0\" ? unit[unit.length - idx - 1] : \"\";\n\n return `${conf.num[item]}${_unit}`;\n })\n .join(\"\");\n\n // 如果是整数，则补个整字\n return `${_integer}元` + (_decimal || \"整\");\n};\n```\n",{"_54":503,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/869/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/869/timeline",{"_54":506,"_56":57,"_58":507,"_60":508,"_62":509,"_64":510,"_66":511,"_68":512,"_70":513,"_72":514,"_74":515,"_107":516,"_127":128,"_129":26,"_130":-5,"_131":519,"_133":520,"_155":148,"_149":522,"_151":522,"_154":-5,"_159":160,"_161":523,"_166":-5,"_167":524,"_169":525,"_181":527,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/857","https://api.github.com/repos/pro-collection/interview-question/issues/857/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/857/comments","https://api.github.com/repos/pro-collection/interview-question/issues/857/events","https://github.com/pro-collection/interview-question/issues/857",2494831272,"I_kwDOJGDC6c6UtBqo",857,"可有办法判断用户的网络条件, 判断网速快慢，网络状态？【热度: 195】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[517,518],{"_66":264,"_68":265,"_54":266,"_113":267,"_115":268,"_117":26,"_118":269},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":202,"_64":203,"_58":204,"_66":205,"_68":206,"_70":207,"_72":208,"_118":209,"_143":521,"_145":211,"_147":148,"_127":128,"_149":212,"_151":213,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-08-29T15:18:24Z",{"_163":148,"_164":148,"_165":148},"**关键词**：网络状态\n\n确定用户的网络条件，包括网络速度和连接状态，对于提供优质用户体验至关重要。以下是一些方法可以帮助你判断用户的网络条件：\n\n### 1. **Navigator Connection API**\n\n这个 API 提供有关系统的网络连接的信息，如网络的类型和下载速度。这个 API 的支持度不是全局性的，但在许多现代浏览器上可用。使用这个 API，你可以获取到有关用户网络连接的详细信息。\n\n```javascript\nif (\"connection\" in navigator) {\n const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;\n\n console.log(`网络类型: ${connection.effectiveType}`);\n console.log(`估计的下行速度: ${connection.downlink}Mbps`);\n console.log(`RTT: ${connection.rtt}ms`);\n\n // 监听网络类型变化\n connection.addEventListener(\"change\", (e) => {\n console.log(`网络类型变化为: ${connection.effectiveType}`);\n });\n}\n```\n\n- `connection.effectiveType` 提供了网络的类型，如 `'4g'`，`'3g'`，代表网络速度。\n- `connection.downlink` 提供了网络的下载速度信息，单位是 Mbps。\n- `connection.rtt` 提供了来回时间信息，单位是毫秒。\n\n### 2. **观测发送请求的速度**\n\n通过发送一个小请求（可能是一个小文件或 API 请求）并测量它完成的时间，可以粗略地估计当前的网络速度。\n\n```javascript\nlet startTime = new Date().getTime(); // 记录开始时间\nfetch(\"your-small-file-or-api-url\").then((response) => {\n let endTime = new Date().getTime(); // 记录结束时间\n let duration = endTime - startTime; // 请求持续时间\n console.log(`请求持续时间: ${duration}ms`);\n // 根据持续时间和文件大小估计网速\n});\n```\n\n### 3. **监听在线和离线事件**\n\nHTML5 引入了在线和离线事件监听，可以用来简单判断用户是否连接到网络。\n\n```javascript\nwindow.addEventListener(\"online\", () => console.log(\"网络已连接\"));\nwindow.addEventListener(\"offline\", () => console.log(\"网络已断开\"));\n```\n\n根据`navigator.onLine`的属性值，你可以检测用户是否在线。\n\n```javascript\nif (navigator.onLine) {\n console.log(\"用户在线\");\n} else {\n console.log(\"用户离线\");\n}\n```\n\n### 结论\n\n虽然无法精确地测量用户的网速，但以上方法提供了一些手段来估计用户的网络状况。这样的信息可以用来动态调整网站或应用的行为，例如，通过降低图像质量、推迟非关键资源的加载或取消某些动画，以改善慢速连接下的用户体验。\n",{"_54":526,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/857/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/857/timeline",{"_54":529,"_56":57,"_58":530,"_60":531,"_62":532,"_64":533,"_66":534,"_68":535,"_70":536,"_72":537,"_74":538,"_107":539,"_127":128,"_129":26,"_130":-5,"_131":542,"_133":543,"_155":148,"_149":545,"_151":546,"_154":-5,"_159":160,"_161":547,"_166":-5,"_167":548,"_169":549,"_181":551,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/738","https://api.github.com/repos/pro-collection/interview-question/issues/738/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/738/comments","https://api.github.com/repos/pro-collection/interview-question/issues/738/events","https://github.com/pro-collection/interview-question/issues/738",2279578472,"I_kwDOJGDC6c6H35to",738,"jsBridge 是什么？原理是啥？【热度: 220】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[540,541],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":544,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-05-05T15:12:09Z","2024-05-05T15:12:10Z",{"_163":148,"_164":148,"_165":148},"**关键词**：jsBridge 原理\n\n`jsBridge`是一种在 Web 开发中常用的技术，通常指的是 JavaScript Bridge 的缩写，它是一种在 Web 视图（如 WebView）和原生应用之间进行通信的机制。jsBridge 使得原生代码（如 Android 的 Java/Kotlin 或 iOS 的 Objective-C/Swift）能够与嵌入到 WebView 中的 JavaScript 代码相互调用和通信。\n\n在具体实现上，jsBridge 的原理可能因平台而异，但大致的原理如下：\n\n1. **从 JavaScript 调用原生代码**：\n\n - **注册原生函数**：首先，原生应用会在 WebView 中注册一些可以供 JavaScript 调用的方法或函数。\n - **调用原生函数**：然后，JavaScript 可以通过特定的接口调用这些注册的原生方法。这通常是通过注入对象（例如，在 Android 中可以使用`addJavascriptInterface`方法）或监听特定的 URL scheme。\n - **消息传递**：当 JavaScript 需要与原生应用通信时，它会发送消息（或调用方法），这个消息包含必要的指令和数据。\n - **原生处理**：原生代码接收到这个消息后，会执行对应的指令，并将结果返回给 JavaScript（如果需要）。\n\n2. **从原生代码调用 JavaScript**：\n - **执行 JavaScript 代码**：原生应用可以执行 WebView 中的 JavaScript 代码。例如，通过 WebView 的`evaluateJavaScript`（iOS）或`loadUrl(\"javascript:...\")`（Android）方法。\n - **回调 JavaScript**：原生应用还可以通过执行回调函数的方式，将数据或结果传递回 JavaScript。\n\njsBridge 在移动应用开发中尤为重要，因为它提供了一种方式来整合 Web 技术和原生应用功能，让开发者能够利用 Web 技术来编写跨平台的应用，同时还能够访问设备的原生功能，如相机、GPS 等。\n\n这种机制特别适合于混合应用的开发，在这些应用中，部分界面和逻辑使用 Web 技术实现，而另一部分则利用原生代码以获取更好的性能和更丰富的设备功能支持。通过 jsBridge，两种不同的代码和技术可以互相协作，提供统一的用户体验。\n",{"_54":550,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/738/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/738/timeline",{"_54":553,"_56":57,"_58":554,"_60":555,"_62":556,"_64":557,"_66":558,"_68":559,"_70":560,"_72":561,"_74":562,"_107":563,"_127":128,"_129":26,"_130":-5,"_131":566,"_133":567,"_155":148,"_149":569,"_151":570,"_154":-5,"_159":160,"_161":571,"_166":-5,"_167":572,"_169":573,"_181":575,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/737","https://api.github.com/repos/pro-collection/interview-question/issues/737/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/737/comments","https://api.github.com/repos/pro-collection/interview-question/issues/737/events","https://github.com/pro-collection/interview-question/issues/737",2279572791,"I_kwDOJGDC6c6H34U3",737,"在 JS 中，如何解决递归导致栈溢出问题？【热度: 269】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[564,565],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":568,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-05-05T14:58:37Z","2024-05-05T14:58:38Z",{"_163":148,"_164":148,"_165":148},"**关键词**：栈溢出问题\n\n在 JavaScript 中，递归如果执行过深，确实有可能导致“栈溢出(stack overflow)”错误，因为每次函数调用都会向调用栈中添加一个新的帧，而每个线程的调用栈都有其最大容量限制。当这个容量被超过时，就会发生栈溢出。为了解决这个问题，你可以使用几种不同的方法：\n\n### 尾调用优化（Tail Call Optimization）\n\n在 ES6 中，引入了尾调用优化。这意味着如果函数的最后一个操作是返回另一个函数的调用（即尾调用），那么这个调用可以在不增加新栈帧的情况下执行。但是，截至我知识更新的时间，大多数 JavaScript 引擎还没有实现这项优化，或者它在默认情况下并未激活。\n\n### 转化为循环\n\n大多数递归函数都可以重写为循环，这样可以避免调用栈问题。这种方法需要手动维护一个栈来存储必要的状态信息，而这个栈通常是存储在堆（heap）中的数组，不受调用栈大小限制。\n\n例如，下面递归计算阶乘的代码：\n\n```javascript\nfunction factorial(n) {\n if (n === 1) return 1;\n return n * factorial(n - 1);\n}\n```\n\n可以重写为循环形式：\n\n```javascript\nfunction factorial(n) {\n let result = 1;\n for (let i = 2; i <= n; i++) {\n result *= i;\n }\n return result;\n}\n```\n\n### 用 Trampoline 函数\n\nTrampoline 是一个高阶函数，使您可以在递归调用的情况下避免栈溢出。它通过在每个递归步骤返回一个函数而不是值，然后持续调用这些函数，直到获得最终结果为止。\n\n```javascript\nfunction trampoline(fn) {\n return function (...args) {\n let result = fn.apply(this, args);\n\n while (typeof result === \"function\") {\n result = result();\n }\n\n return result;\n };\n}\n```\n\n然后，将原始递归函数改写为每次递归调用返回一个函数：\n\n```javascript\nfunction recursiveFunction(args) {\n if (baseCase) {\n return finalValue;\n } else {\n return function () {\n return recursiveFunction(newArgs);\n };\n }\n}\n\nconst trampolinedFunction = trampoline(recursiveFunction);\n```\n\n调用 `trampolinedFunction` 会避免栈溢出，因为它不是真正的递归调用，只是同步循环调用那些返回的函数。\n\n### 生成器和 Promises\n\n使用 ES6 的生成器(generator)和/或 Promises 也可以用来避免递归调用过深。这些特性可以帮助您生成异步递归调用，其允许事件循环（event loop）介入，避免单次执行过多递归调用造成的栈溢出。\n\n### 使用异步递归\n\n将递归函数改造成异步函数（async function），并确保每一次递归调用都有机会返回控制权给 JavaScript 事件循环，这可以通过`setTimeout`、`setImmediate`或者`process.nextTick`（在 Node.js 环境下）实现。\n\n例如，可以将一个同步递归函数改写为：\n\n```javascript\nfunction recursiveAsyncFunction(i) {\n if (i < 0) return Promise.resolve();\n console.log(\"Recursion \", i);\n return new Promise((resolve) => {\n setImmediate(() => {\n resolve(recursiveAsyncFunction(i - 1));\n });\n });\n}\n```\n\n记得确保递归终止条件是正确的，否则即便以上方法也可能导致无限循环或者内存泄漏。每一种方法都有其适用场景，具体使用哪一种方法取决于问题的具体需求。\n",{"_54":574,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/737/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/737/timeline",{"_54":577,"_56":57,"_58":578,"_60":579,"_62":580,"_64":581,"_66":582,"_68":583,"_70":584,"_72":585,"_74":586,"_107":587,"_127":128,"_129":26,"_130":-5,"_131":590,"_133":591,"_155":148,"_149":593,"_151":594,"_154":-5,"_159":160,"_161":595,"_166":-5,"_167":596,"_169":597,"_181":599,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/666","https://api.github.com/repos/pro-collection/interview-question/issues/666/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/666/comments","https://api.github.com/repos/pro-collection/interview-question/issues/666/events","https://github.com/pro-collection/interview-question/issues/666",2079163200,"I_kwDOJGDC6c577YNA",666,"git 仓库迁移应该怎么操作【热度: 160】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[588,589],{"_66":271,"_68":272,"_54":273,"_113":274,"_115":275,"_117":26,"_118":276},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":592,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-01-12T15:55:20Z","2024-01-12T15:55:21Z",{"_163":148,"_164":148,"_165":148},"**关键词**：git 仓库迁移\n\n如果你想迁移仓库并保留原始仓库的所有提交历史、分支和标签，你可以使用以下步骤：\n\n### 方法一：使用 `git clone` 和 `git push`\n\n1. **在仓库 B 中创建新的仓库。**\n\n2. **在本地克隆仓库 A：**\n```bash\ngit clone --mirror <仓库 A URL>\ncd <仓库 A 目录>\n```\n\n使用 `--mirror` 选项克隆仓库会保留所有分支、标签和提交历史。\n\n3. **修改远程仓库地址为仓库 B：**\n```bash\ngit remote set-url --push origin <仓库 B URL>\n```\n\n4. **推送到仓库 B：**\n```bash\ngit push --mirror\n```\n\n### 方法二：使用 `git bundle`\n\n1. **在仓库 A 中创建 bundle 文件：**\n```bash\ngit bundle create repoA.bundle --all\n```\n\n2. **将 `repoA.bundle` 文件传输到仓库 B 所在位置。**\n\n3. **在仓库 B 中克隆：**\n```bash\ngit clone repoA.bundle <仓库 B 目录>\n```\n\n这两种方法都会保留所有分支、标签和提交历史。选择哪种方法取决于你的具体需求和迁移环境。\n\n**注意：**\n- 使用 `--mirror` 或 `--all` 选项在 `git clone` 或 `git bundle` 中时，会将所有的分支和标签复制到目标仓库。\n- 在执行之前，请确保仓库 B 是空的或者是一个你可以覆盖的目标仓库，因为这些操作会覆盖目标仓库的内容。\n- 如果仓库 A 中包含子模块，你可能需要额外处理子模块的迁移。\n",{"_54":598,"_172":156,"_173":156,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/666/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/666/timeline",{"_54":601,"_56":57,"_58":602,"_60":603,"_62":604,"_64":605,"_66":606,"_68":607,"_70":608,"_72":609,"_74":610,"_107":611,"_127":128,"_129":26,"_130":-5,"_131":614,"_133":615,"_155":148,"_149":617,"_151":617,"_154":-5,"_159":160,"_161":618,"_166":-5,"_167":619,"_169":620,"_181":622,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/640","https://api.github.com/repos/pro-collection/interview-question/issues/640/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/640/comments","https://api.github.com/repos/pro-collection/interview-question/issues/640/events","https://github.com/pro-collection/interview-question/issues/640",1997052702,"I_kwDOJGDC6c53CJse",640,"后端一次性返回树形结构数据，数据量非常大, 前端该如何处理？【热度: 171】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[612,613],{"_66":271,"_68":272,"_54":273,"_113":274,"_115":275,"_117":26,"_118":276},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":202,"_64":203,"_58":204,"_66":205,"_68":206,"_70":207,"_72":208,"_118":209,"_143":616,"_145":211,"_147":148,"_127":128,"_149":212,"_151":213,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-11-16T14:55:16Z",{"_163":148,"_164":148,"_165":148},"**关键词**：大数据处理\n\n当后端一次性返回的树形结构数据量非常大，导致前端一次性计算和渲染会栈溢出的情况时，可以考虑以下几种处理方式：\n\n1. 分批处理：将大量的树形数据分为多个批次进行处理和渲染。前端可以通过递归或循环的方式，每次处理一部分数据，并在渲染完成后再处理下一部分数据。这样可以避免一次性处理大量数据造成栈溢出的问题。\n\n2. 异步处理：使用异步处理的方式进行数据的计算和渲染。前端可以利用JavaScript的异步特性，将数据处理和渲染任务分为多个异步任务，并通过事件循环机制依次执行这些任务。这样可以避免一次性计算和渲染大量数据导致栈溢出的问题。\n\n3. 虚拟化渲染：使用虚拟化渲染技术，只渲染当前可见区域的树节点，而不是全部节点。可以根据页面的滚动位置和用户操作，只渲染当前需要展示的节点，而对于不可见的节点只保留其占位符。这样可以减少实际渲染的节点数量，降低内存占用和渲染时间。\n\n4. 数据分级处理：对于树形结构数据，可以考虑对数据进行分级处理。将数据根据节点的层级关系进行分组，每次只处理和渲染当前层级的节点数据。这样可以减少每次处理的数据量，降低栈溢出的风险。\n\n根据具体的业务需求和技术实现情况，可以选择适合的处理方式来解决栈溢出问题。同时，也可以结合多种处理方式来提高页面性能和用户体验。\n",{"_54":621,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/640/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/640/timeline",{"_54":624,"_56":57,"_58":625,"_60":626,"_62":627,"_64":628,"_66":629,"_68":630,"_70":631,"_72":632,"_74":633,"_107":634,"_127":128,"_129":26,"_130":-5,"_131":637,"_133":638,"_155":156,"_149":640,"_151":641,"_154":-5,"_159":160,"_161":642,"_166":-5,"_167":643,"_169":644,"_181":646,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/615","https://api.github.com/repos/pro-collection/interview-question/issues/615/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/615/comments","https://api.github.com/repos/pro-collection/interview-question/issues/615/events","https://github.com/pro-collection/interview-question/issues/615",1983708784,"I_kwDOJGDC6c52PP5w",615,"介绍一下迭代器 Iterator, 以及有哪些用法【热度: 645】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[635,636],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":202,"_64":203,"_58":204,"_66":205,"_68":206,"_70":207,"_72":208,"_118":209,"_143":639,"_145":211,"_147":148,"_127":128,"_149":212,"_151":213,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-11-08T14:13:30Z","2025-03-06T09:50:17Z",{"_163":148,"_164":148,"_165":148},"**关键词**：迭代器 Iterator\n\n### 1、Iterator 的概念\n\nJavaScript 原有的表示 “ 集合 ” 的数据结构，主要是数组（ Array ）和对象（ Object ）， ES6 又添加了 Map 和 Set 。\n这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员是 Map ， Map 的成员是对象。\n这样就需要一种统一的接口机制，来处理所有不同的数据结构。 \n遍历器（ Iterator ）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。\n任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。 \nIterator 的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是 ES6 创造了一种新的遍历命令for...of循环， Iterator 接口主要供for...of消费。\n\nIterator 的遍历过程是这样的。\n- （ 1 ）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。\n- （ 2 ）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。\n- （ 3 ）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。\n- （ 4 ）不断调用指针对象的next方法，直到它指向数据结构的结束位置。\n\n每一次调用next方法，都会返回数据结构的当前成员的信息。\n具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。\n\n\n### 2、数据结构的默认 Iterator 接口\n\nIterator 接口的目的，就是为所有数据结构，提供了一种统一的访问机制，即for...of循环（详见下文）。当使用for...of循环遍历某种数据结构时，该循环会自动去寻找 Iterator 接口。 \n在 ES6 中，有三类数据结构原生具备 Iterator 接口：数组、某些类似数组的对象、 Set 和 Map 结构。\n\n实例：\n```javascript\n let arr = ['a', 'b', 'c'];\n let iter = arr[Symbol.iterator]();\n iter.next() // { value: 'a', done: false }\n iter.next() // { value: 'b', done: false }\n iter.next() // { value: 'c', done: false }\n iter.next() // { value: undefined, done: true }\n```\n\n上面提到，原生就部署 Iterator 接口的数据结构有三类，对于这三类数据结构，不用自己写遍历器生成函数，for...of循环会自动遍历它们。除此之外，其他数据结构（主要是对象）的 Iterator 接口，都需要自己在Symbol.iterator属性上面部署，这样才会被for...of循环遍历。\n\n\n### 3、调用 Iterator 接口的场合\n有一些场合会默认调用 Iterator 接口（即Symbol.iterator方法），除了下文会介绍的for...of循环，还有几个别的场合。\n\n#### 3.1、解构赋值\n对数组和 Set 结构进行解构赋值时，会默认调用Symbol.iterator方法。 \n实例1：\n```javascript\n let set = new Set().add('a').add('b').add('c');\n let [x,y] = set;\n // x='a'; y='b'\n let [first, ...rest] = set;\n // first='a'; rest=['b','c'];\n```\n\n#### 3.2、扩展运算符\n扩展运算符（ ... ）也会调用默认的 iterator 接口。 \n实例2：\n```javascript\n // 例一\n var str = 'hello';\n [...str] // ['h','e','l','l','o']\n // 例二\n let arr = ['b', 'c'];\n ['a', ...arr, 'd']\n // ['a', 'b', 'c', 'd']\n```\n\n#### 3.3、yield*\nyield* 后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。 \n实例3：\n```javascript\n let generator = function* () {\n yield 1;\n yield* [2,3,4];\n yield 5;\n };\n var iterator = generator();\n iterator.next() // { value: 1, done: false }\n iterator.next() // { value: 2, done: false }\n iterator.next() // { value: 3, done: false }\n iterator.next() // { value: 4, done: false }\n iterator.next() // { value: 5, done: false }\n iterator.next() // { value: undefined, done: true }\n```\n\n#### 3.4、其他场合\n由于数组的遍历会调用遍历器接口，所以任何接受数组作为参数的场合，其实都调用了遍历器接口。下面是一些例子。\n- for...of\n- Array.from()\n- Map(), Set(), WeakMap(), WeakSet() （比如new Map([['a',1],['b',2]])）\n- Promise.all()\n- Promise.race()\n\n\n### 4、Iterator 接口与 Generator 函数\nSymbol.iterator方法的最简单实现，还是使用下一章要介绍的 Generator 函数。 \n实例：\n```javascript\n var myIterable = {};\n myIterable[Symbol.iterator] = function* () {\n yield 1;\n yield 2;\n yield 3;\n };\n [...myIterable] // [1, 2, 3]\n \n // 或者采用下面的简洁写法\n let obj = {\n * [Symbol.iterator]() {\n yield 'hello';\n yield 'world';\n }\n };\n for (let x of obj) {\n console.log(x);\n }\n // hello\n // world\n```\n",{"_54":645,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/615/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/615/timeline",{"_54":648,"_56":57,"_58":649,"_60":650,"_62":651,"_64":652,"_66":653,"_68":654,"_70":655,"_72":656,"_74":657,"_107":658,"_127":128,"_129":26,"_130":-5,"_131":661,"_133":662,"_155":148,"_149":664,"_151":664,"_154":-5,"_159":160,"_161":665,"_166":-5,"_167":666,"_169":667,"_181":669,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/613","https://api.github.com/repos/pro-collection/interview-question/issues/613/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/613/comments","https://api.github.com/repos/pro-collection/interview-question/issues/613/events","https://github.com/pro-collection/interview-question/issues/613",1977199006,"I_kwDOJGDC6c512ame",613,"箭头函数的作用以及使用场景【热度: 760】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[659,660],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":202,"_64":203,"_58":204,"_66":205,"_68":206,"_70":207,"_72":208,"_118":209,"_143":663,"_145":211,"_147":148,"_127":128,"_149":212,"_151":213,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-11-04T06:35:45Z",{"_163":148,"_164":148,"_165":148},"**特点**\n\n1. **简洁的语法形式**：箭头函数使用了更简洁的语法形式，省略了传统函数声明中的`function`关键字和大括号。它通常可以在更少的代码行数中表达相同的逻辑。\n2. **没有自己的this**：箭头函数没有自己的`this`绑定，它会捕获所在上下文的`this`值。这意味着箭头函数中的`this`与其定义时所在的上下文中的`this`保持一致，而不是在函数被调用时动态绑定。这可以避免传统函数中常见的`this`指向问题，简化了对`this`的使用和理解。\n3. **没有`arguments`对象**：箭头函数也没有自己的`arguments`对象。如果需要访问函数的参数，可以使用剩余参数（Rest Parameters）或使用展开运算符（Spread Operator）将参数传递给其他函数。\n4. **无法作为构造函数**：箭头函数不能用作构造函数，不能使用`new`关键字调用。它们没有`prototype`属性，因此无法使用`new`关键字创建实例。\n5. **隐式的返回值**：如果箭头函数的函数体只有一条表达式，并且不需要额外的处理逻辑，那么可以省略大括号并且该表达式将隐式作为返回值返回。\n6. **不能绑定自己的this、super、new.target**：由于箭头函数没有自己的`this`绑定，也无法使用`super`关键字引用父类的方法，也无法使用`new.target`获取构造函数的引用。\n\n**作用**\n\n1. **简化普通函数**：箭头函数提供了更简洁的语法形式，可以在需要定义函数的地方使用更短的代码来表达同样的逻辑。这可以提高代码的可读性和维护性。\n2. **保留上下文**：箭头函数没有自己的`this`绑定，它会捕获所在上下文的`this`值。这意味着在箭头函数中，`this`的值是在函数定义时确定的，而不是在函数被调用时动态绑定。这种特性可以避免传统函数中的`this`绑定问题，并使代码更易于理解和维护。\n\n**使用场景**\n\n1. 简化函数表达式：当需要定义一个简单的函数表达式时，可以使用箭头函数代替传统的函数表达式，减少代码量。\n\n ```js\n // 传统函数表达式\n const sum = function(a, b) {\n return a + b;\n };\n\n // 箭头函数\n const sum = (a, b) => a + b;\n ```\n\n2. 箭头函数作为回调函数：当需要传递回调函数时，箭头函数可以提供更简洁的语法形式，同时保留外层上下文中的`this`。\n\n ```js\n // 传统回调函数\n someFunction(function() {\n console.log(this); // 外层上下文的this\n });\n\n // 箭头函数作为回调函数\n someFunction(() => {\n console.log(this); // 外层上下文的this\n });\n ```\n\n3. 简化函数中的`this`绑定问题：由于箭头函数没有自己的`this`绑定，可以避免使用传统函数中常见的`bind`、`call`或`apply`等方法来绑定`this`。\n\n ```js\n // 传统函数中的this绑定\n const obj = {\n value: 42,\n getValue: function() {\n setTimeout(function() {\n console.log(this.value); // undefined，因为此时this指向全局对象\n }, 1000);\n }\n };\n\n // 使用箭头函数避免this绑定问题\n const obj = {\n value: 42,\n getValue: function() {\n setTimeout(() => {\n console.log(this.value); // 42，箭头函数捕获了外层上下文的this\n }, 1000);\n }\n };\n\n // ```\n ```\n",{"_54":668,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/613/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/613/timeline",{"_54":671,"_56":57,"_58":672,"_60":673,"_62":674,"_64":675,"_66":676,"_68":677,"_70":678,"_72":679,"_74":680,"_107":681,"_127":128,"_129":26,"_130":-5,"_131":684,"_133":685,"_155":148,"_149":687,"_151":688,"_154":-5,"_159":160,"_161":689,"_166":-5,"_167":690,"_169":691,"_181":693,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/544","https://api.github.com/repos/pro-collection/interview-question/issues/544/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/544/comments","https://api.github.com/repos/pro-collection/interview-question/issues/544/events","https://github.com/pro-collection/interview-question/issues/544",1878538861,"I_kwDOJGDC6c5v-Dpt",544,"web 网页如何禁止别人移除水印【热度: 540】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[682,683],{"_66":271,"_68":272,"_54":273,"_113":274,"_115":275,"_117":26,"_118":276},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":686,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-09-02T09:42:16Z","2023-09-02T09:42:17Z",{"_163":148,"_164":148,"_165":148},"**关键词**：前端防止移除水印\n\n关于加水印的问题，可以看这篇文档： https://github.com/pro-collection/interview-question/issues/351\n\n关于如何防止移除水印：\n\n可以通过监听 DOM 的变化来检测是否有人删除水印，可以使用 `MutationObserver API`。\n`MutationObserver` 可以观察 DOM 树的变化，并在变化发生时触发回调函数。你可以在回调函数中检查是否有水印被删除，然后采取相应的措施。\n\n以下是一个简单的示例代码，演示了如何使用 MutationObserver 监听 DOM 变化：\n\n```javascript\n// 目标节点\nconst targetNode = document.body;\n\n// 创建 MutationObserver 实例\nconst observer = new MutationObserver((mutationsList) => {\n for (let mutation of mutationsList) {\n // 检查是否有子节点被删除\n if (mutation.removedNodes.length > 0) {\n // 在此处判断是否有水印被删除\n // 如果水印被删除，则重新插入水印的 DOM 元素到目标节点\n // 例如： targetNode.appendChild(watermarkElement);\n }\n }\n});\n\n// 配置 MutationObserver\nconst config = { childList: true, subtree: true };\n\n// 开始观察目标节点\nobserver.observe(targetNode, config);\n```\n\n在上述代码中，我们创建了一个 MutationObserver 实例，并通过 `observe` 方法将其绑定到目标节点上。在回调函数中，我们使用 `mutation.removedNodes` 来检查是否有子节点被删除，如果发现水印被删除，则可以采取相应的措施来重新插入水印的 DOM 元素。\n\n需要注意的是，MutationObserver API 是现代浏览器提供的功能，在老旧的浏览器中可能不支持。因此，在实际使用时，你需要对浏览器的兼容性进行测试和处理。\n\n另外，如果水印被删除后立即加回去，你可以在检测到水印被删除时，立即执行插入水印的代码，以确保水印能够迅速地重新出现在页面上。\n",{"_54":692,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/544/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/544/timeline",{"_54":695,"_56":57,"_58":696,"_60":697,"_62":698,"_64":699,"_66":700,"_68":701,"_70":702,"_72":703,"_74":704,"_107":705,"_127":128,"_129":26,"_130":-5,"_131":708,"_133":709,"_155":148,"_149":711,"_151":712,"_154":-5,"_159":160,"_161":713,"_166":-5,"_167":714,"_169":715,"_181":717,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/533","https://api.github.com/repos/pro-collection/interview-question/issues/533/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/533/comments","https://api.github.com/repos/pro-collection/interview-question/issues/533/events","https://github.com/pro-collection/interview-question/issues/533",1867203688,"I_kwDOJGDC6c5vS0Ro",533,"单点登录是什么，具体流程是什么【热度: 1,168】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[706,707],{"_66":271,"_68":272,"_54":273,"_113":274,"_115":275,"_117":26,"_118":276},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":710,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-08-25T14:54:28Z","2023-08-25T14:54:49Z",{"_163":148,"_164":148,"_165":148},"**关键词**：单点登录流程\n\nSSO 一般都需要一个独立的认证中心（passport），子系统的登录均得通过 passport，子系统本身将不参与登录操作，当一个系统成功登录以后，passport 将会颁发一个令牌给各个子系统，子系统可以拿着令牌会获取各自的受保护资源，为了减少频繁认证，各个子系统在被 passport 授权以后，会建立一个局部会话，在一定时间内可以无需再次向 passport 发起认证。\n\n\n具体流程是：\n\n1. 用户访问系统 1 的受保护资源，系统 1 发现用户未登录，跳转至 sso 认证中心，并将自己的地址作为参数\n2. sso 认证中心发现用户未登录，将用户引导至登录页面\n3. 用户输入用户名密码提交登录申请\n4. sso 认证中心校验用户信息，创建用户与 sso 认证中心之间的会话，称为全局会话，同时创建授权令牌\n5. sso 认证中心带着令牌跳转会最初的请求地址（系统 1）\n6. 系统 1 拿到令牌，去 sso 认证中心校验令牌是否有效\n7. sso 认证中心校验令牌，返回有效，注册系统 1\n8. 系统 1 使用该令牌创建与用户的会话，称为局部会话，返回受保护资源\n9. 用户访问系统 2 的受保护资源\n10. 系统 2 发现用户未登录，跳转至 sso 认证中心，并将自己的地址作为参数\n11. sso 认证中心发现用户已登录，跳转回系统 2 的地址，并附上令牌\n12. 系统 2 拿到令牌，去 sso 认证中心校验令牌是否有效\n13. sso 认证中心校验令牌，返回有效，注册系统 2\n14. 系统 2 使用该令牌创建与用户的局部会话，返回受保护资源\n",{"_54":716,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/533/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/533/timeline",{"_54":719,"_56":57,"_58":720,"_60":721,"_62":722,"_64":723,"_66":724,"_68":725,"_70":726,"_72":727,"_74":728,"_107":729,"_127":128,"_129":26,"_130":-5,"_131":732,"_133":733,"_155":148,"_149":735,"_151":736,"_154":-5,"_159":160,"_161":737,"_166":-5,"_167":738,"_169":739,"_181":741,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/532","https://api.github.com/repos/pro-collection/interview-question/issues/532/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/532/comments","https://api.github.com/repos/pro-collection/interview-question/issues/532/events","https://github.com/pro-collection/interview-question/issues/532",1867192918,"I_kwDOJGDC6c5vSxpW",532,"什么是 JWT【热度: 428】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[730,731],{"_66":264,"_68":265,"_54":266,"_113":267,"_115":268,"_117":26,"_118":269},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":202,"_64":203,"_58":204,"_66":205,"_68":206,"_70":207,"_72":208,"_118":209,"_143":734,"_145":211,"_147":148,"_127":128,"_149":212,"_151":213,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-08-25T14:47:51Z","2023-08-25T14:48:04Z",{"_163":148,"_164":148,"_165":148},"**关键词**：jwt 基本概念\n\nJWT是JSON Web Token的缩写，是一种用于在不同系统之间安全传输信息的开放标准。JWT通常用于身份验证和授权，它由三部分组成：头部（header）、载荷（payload）和签名（signature）。\n\n头部包含了关于令牌的元数据和算法信息，通常包括令牌的类型（例如JWT）、使用的加密算法（例如HMAC SHA256或RSA）等。\n\n载荷包含了要传输的数据，可以是用户的身份信息、权限、角色等。载荷可以自定义，但常见的标准字段有iss（令牌的签发者）、exp（令牌的过期时间）、sub（令牌的主题）等。\n\n签名是使用头部和载荷中的数据以及秘密密钥生成的，用于验证令牌的真实性和完整性。接收方可以使用相同的密钥对收到的令牌进行验证。\n\nJWT的优点包括可扩展性、易于使用和跨平台支持，它可以在各种语言和框架中使用。由于JWT是基于标准的JSON格式，因此它易于解析和处理。\n",{"_54":740,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148,"_180":148},"https://api.github.com/repos/pro-collection/interview-question/issues/532/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/532/timeline",{"_54":743,"_56":57,"_58":744,"_60":745,"_62":746,"_64":747,"_66":748,"_68":749,"_70":750,"_72":751,"_74":752,"_107":753,"_127":128,"_129":26,"_130":-5,"_131":762,"_133":763,"_155":148,"_149":765,"_151":766,"_154":-5,"_159":160,"_161":767,"_166":-5,"_167":768,"_169":769,"_181":771,"_183":-5,"_184":-5,"_185":156},"https://api.github.com/repos/pro-collection/interview-question/issues/518","https://api.github.com/repos/pro-collection/interview-question/issues/518/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/518/comments","https://api.github.com/repos/pro-collection/interview-question/issues/518/events","https://github.com/pro-collection/interview-question/issues/518",1858121854,"I_kwDOJGDC6c5uwLB-",518,"HTML 属性 crossorigin 的作用是什么【热度: 267】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[754,761],{"_66":755,"_68":756,"_54":757,"_113":758,"_115":759,"_117":26,"_118":760},5252299764,"LA_kwDOJGDC6c8AAAABOQ-79A","https://api.github.com/repos/pro-collection/interview-question/labels/%E6%B5%8F%E8%A7%88%E5%99%A8","浏览器","f9d0c4","浏览器相关知识点",{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":202,"_64":203,"_58":204,"_66":205,"_68":206,"_70":207,"_72":208,"_118":209,"_143":764,"_145":211,"_147":148,"_127":128,"_149":212,"_151":213,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-08-20T13:16:17Z","2023-08-20T13:16:30Z",{"_163":148,"_164":148,"_165":148},"**关键词**：crossorigin 属性、crossorigin 作用、crossorigin 资源错误处理\n\n`crossorigin` 属性在 `