\n {/* 在这里编写组件的内容 */}\n

\n );\n}\n\n// 使用 withRouter 高阶组件将路由信息传递给组件\nexport default withRouter(MyComponent);\n```\n\n在上面的代码中，我们使用了 `useEffect` 钩子函数来添加路由变化的监听器。在 `useEffect` 的回调函数中，我们定义了 `handleRouteChange` 方法来处理路由变化的逻辑。然后，通过 `props.history.listen` 方法来添加监听器，并将返回的取消监听函数赋值给 `unlisten` 变量。\n\n同时，我们还在 `useEffect` 返回的清理函数中调用了 `unlisten` 函数，以确保在组件卸载时移除监听器。\n\n需要注意的是，由于 `useEffect` 的依赖数组中包含了 `props.history`，所以每当 `props.history` 发生变化时（即路由发生变化时），`useEffect` 的回调函数会被调用，从而更新路由变化的监听器。\n\n总结起来，通过使用 `useEffect` 钩子函数和 `props.history.listen` 方法，可以在函数组件中监听和响应路由的变化。\n",{"_58":477,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/496/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/496/timeline",{"_58":480,"_60":61,"_62":481,"_64":482,"_66":483,"_68":484,"_70":485,"_72":486,"_74":487,"_76":488,"_78":489,"_111":490,"_131":132,"_133":24,"_134":-5,"_135":497,"_137":498,"_159":152,"_153":500,"_155":501,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":502,"_169":503,"_175":504,"_177":505,"_189":507,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/493","https://api.github.com/repos/pro-collection/interview-question/issues/493/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/493/comments","https://api.github.com/repos/pro-collection/interview-question/issues/493/events","https://github.com/pro-collection/interview-question/issues/493",1822698095,"I_kwDOJGDC6c5spCpv",493,"为什么 SPA 应用都会提供一个 hash 路由，好处是什么？【热度: 681】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[491,492],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":493,"_72":494,"_58":495,"_117":496,"_119":129,"_121":24,"_122":130},5597058003,"LA_kwDOJGDC6c8AAAABTZxT0w","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%BF%AB%E6%89%8B","快手",[],{"_58":268,"_68":269,"_62":270,"_70":271,"_72":272,"_74":273,"_76":274,"_122":275,"_147":499,"_149":277,"_151":152,"_131":132,"_153":278,"_155":279,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-07-26T15:41:29Z","2023-07-26T15:41:30Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：hash路由优势、hash路由和history路由区别\n\nSPA（单页应用）通常会使用 hash 路由的方式来实现页面的导航和路由功能。这种方式将路由信息存储在 URL 的片段标识符（hash）中，例如：`www.example.com/#/home`。\n\n以下是使用 hash 路由的 SPA 的一些好处：\n\n1. 兼容性：Hash 路由对浏览器的兼容性非常好，可以在所有主流浏览器上运行，包括较旧的浏览器版本。这是因为 hash 路由不需要对服务端进行特殊的配置或支持。\n\n2. 简单实现：实现 hash 路由非常简单，只需要在页面中添加一个监听器来监听 `hashchange` 事件，然后根据不同的 hash 值加载对应的页面内容。这种方式不需要对服务器进行特殊配置，服务器只需传送一个初始页面，之后的页面切换完全由前端控制。\n\n3. 防止页面刷新：使用 hash 路由可以防止页面的完全刷新。因为 hash 路由只改变 URL 的片段标识符，不会引起整个页面的重新加载，所以用户在不同页面之间切换时，不会丢失当前页面的状态和数据。\n\n4. 前进后退支持：由于 hash 路由不会引起页面的刷新，因此可以方便地支持浏览器的前进和后退操作。浏览器的前进和后退按钮可以触发 `hashchange` 事件，从而实现页面的导航和页面状态的管理。\n\n5. 无需服务端配置：使用 hash 路由，不需要对服务端进行特殊的配置。所有的路由和页面切换逻辑都由前端控制，服务器只提供一个初始页面。这样可以减轻服务器的负担，并且可以将更多的逻辑放在前端处理，提升用户体验。\n\n虽然 hash 路由有一些好处，但也有一些局限性。例如，hash 路由的 URL 不够美观，也不利于 SEO（搜索引擎优化）。为了解决这些问题，现代的 SPA 框架通常使用更先进的路由方式，例如 HTML5 的 History API，它可以在不刷新整个页面的情况下改变 URL。不过，hash 路由仍然是一个简单可靠的选择，特别适用于简单的 SPA 或需要兼容较旧浏览器的情况。\n",{"_58":506,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/493/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/493/timeline",{"_58":509,"_60":61,"_62":510,"_64":511,"_66":512,"_68":513,"_70":514,"_72":515,"_74":516,"_76":517,"_78":518,"_111":519,"_131":132,"_133":24,"_134":-5,"_135":522,"_137":523,"_159":152,"_153":525,"_155":525,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":526,"_169":527,"_175":528,"_177":529,"_189":531,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/485","https://api.github.com/repos/pro-collection/interview-question/issues/485/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/485/comments","https://api.github.com/repos/pro-collection/interview-question/issues/485/events","https://github.com/pro-collection/interview-question/issues/485",1820698058,"I_kwDOJGDC6c5shaXK",485,"script 标签上有那些属性，分别作用是啥？【热度: 744】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[520,521],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":302,"_72":303,"_58":304,"_117":305,"_119":129,"_121":24,"_122":130},[],{"_58":268,"_68":269,"_62":270,"_70":271,"_72":272,"_74":273,"_76":274,"_122":275,"_147":524,"_149":277,"_151":152,"_131":132,"_153":278,"_155":279,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-07-25T16:25:30Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：script 标签属性、script 标签属性作用、常用 script 标签属性\n\n在HTML中，``。通过这个属性，浏览器会下载并执行指定的外部脚本文件。\n\n2. `async`：可选属性，用于指示浏览器异步加载脚本。这意味着脚本会在下载的同时继续解析HTML文档，不会阻塞其他资源的加载。例如：``。\n\n3. `defer`：可选属性，用于指示浏览器延迟执行脚本，直到文档解析完成。这样可以确保脚本在文档完全呈现之前不会执行。例如：``。\n\n4. `type`：指定脚本语言的MIME类型。通常是`text/javascript`或者`module`（用于ES6模块）。如果未指定该属性，浏览器默认将其视为JavaScript类型。例如：``。\n\n5. `charset`：指定外部脚本文件的字符编码。例如：``。\n\n6. `integrity`：用于指定外部脚本文件的Subresource Integrity（SRI）。SRI可以确保浏览器在加载脚本时验证其完整性，防止通过恶意更改文件来执行潜在的攻击。例如：``。\n\n**不常用属性**\n\n7. `crossorigin`：正常的 script 元素将最小的信息传递给 window.onerror，用于那些没有通过标准 CORS 检查的脚本。要允许对静态媒体使用独立域名的网站进行错误记录，请使用此属性。参见 CORS 设置属性。\n\n8. `fetchpriority`：提供一个指示，说明在获取外部脚本时要使用的相对优先级。\n\n9. `nomodule`：这个布尔属性被设置来标明这个脚本不应该在支持 ES 模块的浏览器中执行。实际上，这可用于在不支持模块化 JavaScript 的旧浏览器中提供回退脚本。\n\n10. `nonce`: 在 `script-src Content-Security-Policy (en-US)` 中允许脚本的一个一次性加密随机数（nonce）。服务器每次传输策略时都必须生成一个唯一的 nonce 值。提供一个无法猜测的 nonce 是至关重要。\n \n11. `referrerpolicy`: 表示在获取脚本或脚本获取资源时，要发送哪个 referrer。\n\n\n可以参考文档：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script\n",{"_58":530,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/485/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/485/timeline",{"_58":533,"_60":61,"_62":534,"_64":535,"_66":536,"_68":537,"_70":538,"_72":539,"_74":540,"_76":541,"_78":542,"_111":543,"_131":132,"_133":24,"_134":-5,"_135":546,"_137":547,"_159":152,"_153":549,"_155":550,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":551,"_169":552,"_175":553,"_177":554,"_189":556,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/473","https://api.github.com/repos/pro-collection/interview-question/issues/473/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/473/comments","https://api.github.com/repos/pro-collection/interview-question/issues/473/events","https://github.com/pro-collection/interview-question/issues/473",1791673348,"I_kwDOJGDC6c5qysQE",473,"package.json 里面 sideEffects 属性的作用是啥【热度: 629】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[544,545],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":262,"_72":263,"_58":264,"_117":265,"_119":129,"_121":24,"_122":130},[],{"_58":268,"_68":269,"_62":270,"_70":271,"_72":272,"_74":273,"_76":274,"_122":275,"_147":548,"_149":277,"_151":152,"_131":132,"_153":278,"_155":279,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-07-06T14:25:20Z","2023-07-06T14:25:33Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：sideEffects作用、package.json sideEffects 属性、webpack Tree Shaking 优化、Tree Shaking 优化\n\n### sideEffects 作用\n\n`sideEffects`是`package.json`文件中的一个字段，它用于指定一个模块是否具有副作用。副作用是指模块在加载时会执行一些特定的操作，而不仅仅是导出一个函数或对象。\n\n`sideEffects`字段可以有以下几种取值：\n\n- `true`：表示模块具有副作用，即模块加载时会执行一些操作。这是默认值，如果没有在`package.json`中明确指定`sideEffects`字段，则假设为`true`。\n- `false`：表示模块没有副作用，即模块加载时不会执行任何操作。这意味着该模块只导出函数、对象或其他静态内容，并且不依赖于其他模块的副作用。\n- 数组：可以将模块的具体文件路径或文件匹配模式（使用glob模式）列在数组中，以指定哪些文件具有副作用，哪些文件没有副作用。例如，`[\"./src/*.js\", \"!./src/utils/*.js\"]`表示`src`目录下的所有`.js`文件都具有副作用，但是`src/utils`目录下的`.js`文件没有副作用。\n\n使用`sideEffects`字段可以帮助构建工具（如Webpack）进行优化。如果模块没有副作用，构建工具可以进行更好的摇树优化（tree shaking），即只保留项目所需的代码，而将未使用的代码消除，从而减小最终打包文件的大小。\n\n注意：在使用`sideEffects`字段时，需要确保你的代码确实没有副作用，否则可能会导致意外的行为。\n\n### sideEffects 是如何辅助 webpack 进行优化的？\n\n`sideEffects`字段可以帮助Webpack进行摇树优化（Tree Shaking），从而减小最终打包文件的大小。摇树优化是指只保留项目所需的代码，而将未使用的代码消除。\n\n当Webpack打包时，它会通过静态分析来确定哪些导入的模块实际上被使用了，然后只保留这些被使用的代码，并将未使用的代码从最终的打包文件中删除。\n\n在这个过程中，Webpack会检查模块的`sideEffects`字段。如果一个模块具有`sideEffects`字段，并且设置为`false`，Webpack会认为该模块没有副作用。Webpack会在摇树优化过程中将未使用的导出从该模块中删除，因为它不会影响项目的功能。\n\n然而，如果一个模块具有`sideEffects`字段，并且设置为`true`或是一个数组，Webpack会认为该模块具有副作用。在摇树优化过程中，Webpack会保留该模块的所有导出，因为它不能确定哪些代码是副作用的。这样可以确保项目中需要的副作用代码不会被误删除。\n\n因此，通过正确使用`sideEffects`字段，可以帮助Webpack更好地优化打包文件，减少不必要的代码，提高应用程序的性能。\n",{"_58":555,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/473/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/473/timeline",{"_58":558,"_60":61,"_62":559,"_64":560,"_66":561,"_68":562,"_70":563,"_72":564,"_74":565,"_76":566,"_78":567,"_111":568,"_131":132,"_133":24,"_134":-5,"_135":571,"_137":572,"_159":152,"_153":574,"_155":575,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":576,"_169":577,"_175":578,"_177":579,"_189":581,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/472","https://api.github.com/repos/pro-collection/interview-question/issues/472/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/472/comments","https://api.github.com/repos/pro-collection/interview-question/issues/472/events","https://github.com/pro-collection/interview-question/issues/472",1791635103,"I_kwDOJGDC6c5qyi6f",472,"用 nodejs 实现一个命令行工具，统计输入目录下面指定代码的行数【热度: 732】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[569,570],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":268,"_68":269,"_62":270,"_70":271,"_72":272,"_74":273,"_76":274,"_122":275,"_147":573,"_149":277,"_151":152,"_131":132,"_153":278,"_155":279,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-07-06T14:03:51Z","2023-07-06T14:04:04Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：统计指定目录下代码行数\n\n要实现一个命令行工具来统计输入目录下指定代码的行数，你可以使用Node.js的`fs`模块来读取文件内容并进行行数统计。以下是一个简单的实现示例：\n\n```javascript\nconst fs = require('fs');\nconst path = require('path');\n\nfunction countLinesInDirectory(dirPath, fileExtension) {\n let totalLines = 0;\n\n function countLinesInFile(filePath) {\n const content = fs.readFileSync(filePath, 'utf-8');\n const lines = content.split('\\n');\n totalLines += lines.length;\n }\n\n function processDirectory(directoryPath) {\n const files = fs.readdirSync(directoryPath);\n\n files.forEach((file) => {\n const filePath = path.join(directoryPath, file);\n const stats = fs.statSync(filePath);\n\n if (stats.isFile() && path.extname(file) === fileExtension) {\n countLinesInFile(filePath);\n } else if (stats.isDirectory()) {\n processDirectory(filePath);\n }\n });\n }\n\n processDirectory(dirPath);\n\n return totalLines;\n}\n\n// 命令行参数，第一个参数是目录路径，第二个参数是文件扩展名\nconst [_, __, dirPath, fileExtension] = process.argv;\n\nconst linesCount = countLinesInDirectory(dirPath, fileExtension);\nconsole.log(`Total lines of ${fileExtension} files in ${dirPath}: ${linesCount}`);\n```\n\n你可以将上述代码保存为一个JavaScript文件，比如`line-counter.js`。然后，在终端中运行以下命令：\n\n```\nnode line-counter.js /path/to/directory .js\n```\n\n其中`/path/to/directory`是你要统计的目录路径，`.js`是你要统计的文件扩展名。运行命令后，程序将会输出指定文件类型在指定目录中的总行数。\n\n你可以根据需要自定义输出格式、文件过滤规则等。此示例只是一个基本的实现，你可以根据具体需求进行扩展和优化。\n",{"_58":580,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/472/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/472/timeline",{"_58":583,"_60":61,"_62":584,"_64":585,"_66":586,"_68":587,"_70":588,"_72":589,"_74":590,"_76":591,"_78":592,"_111":593,"_131":132,"_133":24,"_134":-5,"_135":596,"_137":597,"_159":152,"_153":599,"_155":600,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":601,"_169":602,"_175":603,"_177":604,"_189":606,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/471","https://api.github.com/repos/pro-collection/interview-question/issues/471/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/471/comments","https://api.github.com/repos/pro-collection/interview-question/issues/471/events","https://github.com/pro-collection/interview-question/issues/471",1791623083,"I_kwDOJGDC6c5qyf-r",471,"webpack 如何配置按需加载的模块【热度: 693】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[594,595],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":302,"_72":303,"_58":304,"_117":305,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":598,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-07-06T13:57:35Z","2023-07-06T14:25:42Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：webpack 配置按需加载、webpack 按需加载、react lazy 加载\n\n### 如何配置 webpack 按需加载\n\n要配置webpack项目模块按需加载，你可以使用webpack的代码分割（code splitting）功能和动态导入（dynamic import）语法。\n\n以下是一些配置步骤：\n\n1. 在webpack配置文件中，设置`output`选项中的`chunkFilename`属性，用于指定按需加载模块的输出文件名。例如：\n\n```javascript\noutput: {\n filename: 'bundle.js',\n chunkFilename: '[name].bundle.js',\n path: path.resolve(__dirname, 'dist')\n}\n```\n\n2. 在应用程序中使用动态导入语法加载需要按需加载的模块。例如：\n\n```javascript\nimport(/* webpackChunkName: \"moduleName\" */ './module')\n .then(module => {\n // 使用加载的模块\n })\n .catch(error => {\n // 处理加载错误\n });\n```\n\n注意：在动态导入语法中，`/* webpackChunkName: \"moduleName\" */`是可选的，用于指定生成的输出文件的名称。\n\n3. 运行webpack构建，它将根据动态导入语法将模块拆分为单独的文件。\n\n4. 当需要按需加载模块时，webpack将自动异步加载并将模块添加到页面中。\n\n\n### webpack 配置按需加载和 react lazy 有什么关系\n\nWebpack配置按需加载和React的`lazy`函数是实现按需加载的两个不同方面，它们可以一起使用来优化React应用的性能。\n\nWebpack配置按需加载是通过代码分割（code splitting）的方式，将应用程序的代码分割成多个小块，并在需要时按需加载这些块。这样可以减小初始加载的文件大小，提高页面加载速度。Webpack提供了一些配置选项和动态导入语法来实现按需加载。\n\n而React的`lazy`函数是React 16.6版本引入的新特性，用于实现组件的按需加载。通过使用`lazy`函数，你可以将组件的加载延迟到它们实际需要被渲染到页面上的时候。这样可以减小初始加载的组件数量，并且提高应用程序的性能。\n\n结合Webpack配置按需加载和React的`lazy`函数，在React应用中你可以按需加载组件，并且Webpack会自动将这些组件拆分为单独的文件进行按需加载。这样可以实现在需要时动态加载组件，以及减小初始加载的文件大小，提高应用程序的性能。\n\n下面是一个示例，展示了如何使用Webpack配置按需加载和React的`lazy`函数：\n\n```javascript\nimport React, { lazy, Suspense } from 'react';\n\nconst LazyComponent = lazy(() => import('./LazyComponent'));\n\nfunction App() {\n return (\n

\n Loading...

}>\n \n \n \n );\n}\n```\n\n在上面的示例中，`lazy`函数用于按需加载`./LazyComponent`组件。`Suspense`组件用于在组件加载时提供一个加载中的提示（fallback）。当`LazyComponent`组件需要渲染时，Webpack将会按需加载`./LazyComponent`组件的代码。\n\n使用Webpack配置按需加载和React的`lazy`函数可以有效地优化React应用的性能，提高应用程序的加载速度。\n\n\n### 要支持 React lazy， webpack 还需要配置什么吗？\n\n为了支持React的`lazy`函数，还需要在Webpack配置中添加一些额外的配置。\n\n首先，你需要确保你的Webpack配置中启用了代码分割（code splitting）功能。这可以通过以下方式配置：\n\n```javascript\n// webpack.config.js\n\nmodule.exports = {\n // ...其他配置\n optimization: {\n splitChunks: {\n chunks: 'all',\n },\n },\n};\n```\n\n这个配置会告诉Webpack在生成代码块时将公共的依赖模块提取到单独的文件中，以实现代码的共享和按需加载。\n\n然后，你需要使用`@babel/preset-react`预设配置Babel，以支持React的`lazy`函数。你可以在`.babelrc`文件中添加以下配置：\n\n```json\n{\n \"presets\": [\n \"@babel/preset-react\"\n ]\n}\n```\n\n最后，确保你的React代码使用了`lazy`函数进行组件的按需加载，如前面的示例所示：\n\n```javascript\nimport React, { lazy, Suspense } from 'react';\n\nconst LazyComponent = lazy(() => import('./LazyComponent'));\n\nfunction App() {\n return (\n

\n Loading...

}>\n \n \n \n );\n}\n```\n\n通过以上步骤配置Webpack，你就可以使用React的`lazy`函数实现组件的按需加载了。Webpack会自动将按需加载的组件拆分为单独的文件，并在需要时进行加载。这样可以提高React应用的性能和加载速度。\n\n\n",{"_58":605,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/471/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/471/timeline",{"_58":608,"_60":61,"_62":609,"_64":610,"_66":611,"_68":612,"_70":613,"_72":614,"_74":615,"_76":616,"_78":617,"_111":618,"_131":132,"_133":24,"_134":-5,"_135":621,"_137":622,"_159":152,"_153":624,"_155":625,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":626,"_169":627,"_175":628,"_177":629,"_189":631,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/470","https://api.github.com/repos/pro-collection/interview-question/issues/470/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/470/comments","https://api.github.com/repos/pro-collection/interview-question/issues/470/events","https://github.com/pro-collection/interview-question/issues/470",1788148316,"I_kwDOJGDC6c5qlPpc",470,"如果不使用脚手架，如果用 webpack 构建一个自己的 react 应用【热度: 729】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[619,620],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":493,"_72":494,"_58":495,"_117":496,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":623,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-07-04T15:35:41Z","2023-07-04T15:35:42Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：构建 react 应用\n\n### 利用 webpack 初始化基本应用构建\n\n要在Webpack配置中添加对Less和Ant Design组件库的支持，需要进行以下步骤：\n\n1. 安装所需的依赖。\n\n```bash\nnpm install less less-loader antd\n```\n\n2. 在Webpack配置文件中添加对Less的支持。\n\n```javascript\nmodule.exports = {\n // ...其他配置\n\n module: {\n rules: [\n // ...其他规则\n\n {\n test: /\\.less$/, // 匹配Less文件\n use: [\n 'style-loader', // 将CSS插入到页面中\n 'css-loader', // 解析CSS文件\n 'less-loader' // 将Less转换为CSS\n ]\n }\n ]\n },\n\n // ...其他配置\n};\n```\n\n3. 在入口文件中引入Ant Design的样式文件。\n\n```javascript\n// 入口文件 index.js\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport 'antd/dist/antd.css'; // 引入Ant Design的样式文件\nimport App from './App';\n\nReactDOM.render(, document.getElementById('root'));\n```\n\n现在你可以在React组件中使用Ant Design的组件和样式了。例如，在`App.js`中使用Ant Design的Button组件：\n\n```javascript\n// App.js\n\nimport React from 'react';\nimport { Button } from 'antd';\n\nfunction App() {\n return (\n

Hello, React!

\n \n

\n );\n}\n\nexport default App;\n```\n\n重新运行Webpack开发服务器，你应该能够看到Ant Design的Button组件正常显示在页面上。\n\n以上是一种简单的配置方法，你还可以根据需要进行更高级的配置，例如按需加载、自定义主题等。有关更多信息，请参阅Webpack和Ant Design的官方文档。\n\n### 使用 less 应该如何配置，同时支持 css module 和非 css module\n\n如果你想在Webpack配置中同时支持Less和CSS Module（局部作用域的CSS），可以使用以下配置。\n\n1. 安装所需的依赖。\n\n```bash\nnpm install less less-loader css-loader style-loader\n```\n\n2. 在Webpack配置文件中添加对Less和CSS的支持。\n\n```javascript\nmodule.exports = {\n // ...其他配置\n\n module: {\n rules: [\n // ...其他规则\n\n {\n test: /\\.less$/, // 匹配Less文件\n exclude: /\\.module\\.less$/, // 排除CSS Module的Less文件\n use: [\n 'style-loader', // 将CSS插入到页面中\n 'css-loader', // 解析CSS文件\n 'less-loader' // 将Less转换为CSS\n ]\n },\n {\n test: /\\.module\\.less$/, // 匹配CSS Module的Less文件\n use: [\n 'style-loader', // 将CSS插入到页面中\n {\n loader: 'css-loader', // 解析CSS文件\n options: {\n modules: true // 启用CSS Module\n }\n },\n 'less-loader' // 将Less转换为CSS\n ]\n }\n ]\n },\n\n // ...其他配置\n};\n```\n\n现在，你可以同时使用普通的Less文件和CSS Module的Less文件。例如，`styles.module.less`是一个CSS Module的Less文件，`styles.less`是一个普通的Less文件。\n\n```less\n/* styles.module.less */\n\n.container {\n background-color: red;\n}\n```\n\n```less\n/* styles.less */\n\n.text {\n color: blue;\n}\n```\n\n在React组件中使用这些样式：\n\n```javascript\nimport React from 'react';\nimport styles from './styles.module.less'; // 导入CSS Module的样式\nimport './styles.less'; // 导入普通的Less样式\n\nfunction App() {\n return (\n

Hello, React!

\n );\n}\n\nexport default App;\n```\n\n这样，`styles.container`将应用CSS Module的样式，`.text`将应用普通的Less样式。\n\n重新运行Webpack开发服务器，你应该能够看到样式正常应用到组件中。\n\n### 如何引入 antd 组件并且支持按需加载\n\n要引入antd组件并支持按需加载，你需要进行以下配置。\n\n1. 安装antd和babel插件。\n\n```bash\nnpm install antd babel-plugin-import --save\n```\n\n2. 在.babelrc文件中配置babel插件。\n\n```json\n{\n \"plugins\": [\n [\n \"import\",\n {\n \"libraryName\": \"antd\",\n \"style\": \"css\"\n }\n ]\n ]\n}\n```\n\n3. 在Webpack配置文件中添加对Less和CSS的支持。\n\n```javascript\nmodule.exports = {\n // ...其他配置\n\n module: {\n rules: [\n // ...其他规则\n\n {\n test: /\\.less$/, // 匹配Less文件\n exclude: /node_modules/,\n use: [\n 'style-loader', // 将CSS插入到页面中\n 'css-loader', // 解析CSS文件\n 'less-loader' // 将Less转换为CSS\n ]\n }\n ]\n },\n\n // ...其他配置\n};\n```\n\n4. 在你的组件中引入antd组件。\n\n```javascript\nimport React from 'react';\nimport { Button } from 'antd';\n\nfunction App() {\n return ;\n}\n\nexport default App;\n```\n\n现在，你可以使用antd组件并且只加载你需要的组件样式。Webpack会根据需要自动按需加载antd组件的样式文件。\n",{"_58":630,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/470/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/470/timeline",{"_58":633,"_60":61,"_62":634,"_64":635,"_66":636,"_68":637,"_70":638,"_72":639,"_74":640,"_76":641,"_78":642,"_111":643,"_131":132,"_133":24,"_134":-5,"_135":646,"_137":647,"_159":152,"_153":649,"_155":650,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":651,"_169":652,"_175":653,"_177":654,"_189":656,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/469","https://api.github.com/repos/pro-collection/interview-question/issues/469/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/469/comments","https://api.github.com/repos/pro-collection/interview-question/issues/469/events","https://github.com/pro-collection/interview-question/issues/469",1788135892,"I_kwDOJGDC6c5qlMnU",469,"如何通过设置失效时间清除本地存储的数据？【热度: 1,085】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[644,645],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":302,"_72":303,"_58":304,"_117":305,"_119":129,"_121":24,"_122":130},[],{"_58":268,"_68":269,"_62":270,"_70":271,"_72":272,"_74":273,"_76":274,"_122":275,"_147":648,"_149":277,"_151":152,"_131":132,"_153":278,"_155":279,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-07-04T15:26:21Z","2023-07-04T15:26:22Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：定时清除本地存储\n\n要清除本地存储的数据，可以通过设置失效时间来实现。以下是一种常见的方法：\n\n1. 将数据存储到本地存储中，例如使用localStorage或sessionStorage。\n\n2. 在存储数据时，同时设置一个失效时间。可以将失效时间存储为一个时间戳或特定的日期时间。\n\n3. 在读取数据时，检查当前时间是否超过了失效时间。如果超过了失效时间，则认为数据已过期，需要清除。\n\n4. 如果数据已过期，则使用localStorage.removeItem(key)或sessionStorage.removeItem(key)方法删除该数据。\n\n以下是一个示例代码：\n\n```javascript\n// 存储数据\nfunction setLocalStorageData(key, data, expiration) {\n var item = {\n data: data,\n expiration: expiration\n };\n localStorage.setItem(key, JSON.stringify(item));\n}\n\n// 读取数据\nfunction getLocalStorageData(key) {\n var item = localStorage.getItem(key);\n if (item) {\n item = JSON.parse(item);\n if (item.expiration && new Date().getTime() > item.expiration) {\n // 数据已过期，清除数据\n localStorage.removeItem(key);\n return null;\n }\n return item.data;\n }\n return null;\n}\n\n// 示例用法\nvar data = {name: 'John', age: 30};\nvar expiration = new Date().getTime() + 3600 * 1000; // 设置失效时间为当前时间后的1小时\nsetLocalStorageData('user', data, expiration);\n\nvar storedData = getLocalStorageData('user');\nconsole.log(storedData);\n```\n\n在示例代码中，setLocalStorageData函数用于存储数据，并接受一个失效时间参数。getLocalStorageData函数用于读取数据，并检查失效时间是否已过期。如果数据已过期，则清除数据。示例中的失效时间设置为当前时间后的1小时。\n",{"_58":655,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/469/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/469/timeline",{"_58":658,"_60":61,"_62":659,"_64":660,"_66":661,"_68":662,"_70":663,"_72":664,"_74":665,"_76":666,"_78":667,"_111":668,"_131":132,"_133":24,"_134":-5,"_135":671,"_137":672,"_159":152,"_153":674,"_155":675,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":676,"_169":677,"_175":678,"_177":679,"_189":681,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/468","https://api.github.com/repos/pro-collection/interview-question/issues/468/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/468/comments","https://api.github.com/repos/pro-collection/interview-question/issues/468/events","https://github.com/pro-collection/interview-question/issues/468",1775100941,"I_kwDOJGDC6c5pzeQN",468,"前端如何用 canvas 来做电影院选票功能",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[669,670],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":268,"_68":269,"_62":270,"_70":271,"_72":272,"_74":273,"_76":274,"_122":275,"_147":673,"_149":277,"_151":152,"_131":132,"_153":278,"_155":279,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-26T15:55:34Z","2023-06-26T15:55:35Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"电影院选票功能可以通过 Canvas 来实现，具体实现步骤如下：\n\n1. 绘制座位图案：使用 Canvas 绘制座位图案，可以用矩形或圆形来表示每个座位，还可以添加不同颜色来表示该座位的状态（已售、已选、可选等）。\n\n2. 添加鼠标事件：添加鼠标事件，如鼠标移动、鼠标单击等，来实现用户交互操作。例如，当用户点击座位时，将该座位的状态改为已选状态，并更新座位图案的颜色。\n\n3. 统计已选座位：在用户选票的过程中，需要统计已选座位的数量和位置，并将选票信息展示给用户。可以通过遍历座位图案数组来实现。\n\n4. 添加检查功能：为了防止用户在选票过程中出现错误，可以添加检查功能，如检查座位是否已被售出或已被其他人选中等。\n\n5. 添加确认和支付功能：当用户选好座位后，需要确认并支付，可以通过弹出确认对话框来实现，并将用户的选票信息发送至后台进行处理。\n\n\n\n**代码实现如下**\n\n```html\n\n\n\n \n Title\n\n\n

\n\n\n\n\n\n\n```\n\n\n",{"_58":680,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/468/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/468/timeline",{"_58":683,"_60":61,"_62":684,"_64":685,"_66":686,"_68":687,"_70":688,"_72":689,"_74":690,"_76":691,"_78":692,"_111":693,"_131":132,"_133":24,"_134":-5,"_135":696,"_137":697,"_159":152,"_153":699,"_155":700,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":701,"_169":702,"_175":703,"_177":704,"_189":706,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/458","https://api.github.com/repos/pro-collection/interview-question/issues/458/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/458/comments","https://api.github.com/repos/pro-collection/interview-question/issues/458/events","https://github.com/pro-collection/interview-question/issues/458",1755238267,"I_kwDOJGDC6c5ons97",458,"如何判断dom元素是否在可视区域【热度: 846】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[694,695],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":464,"_72":465,"_58":466,"_117":467,"_119":129,"_121":24,"_122":130},[],{"_58":268,"_68":269,"_62":270,"_70":271,"_72":272,"_74":273,"_76":274,"_122":275,"_147":698,"_149":277,"_151":152,"_131":132,"_153":278,"_155":279,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-13T16:07:11Z","2023-06-13T16:07:12Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：元素是否在可视区域\n\n判断 DOM 元素是否在可视区域可以使用以下方法：\n\n1. getBoundingClientRect() 方法\n\n该方法返回元素的大小及其相对于视口的位置，包括 top、right、bottom、left 四个属性。我们可以根据这四个属性来判断元素是否在可视区域内。\n\n```javascript\nfunction isInViewport(element) {\n const rect = element.getBoundingClientRect();\n return (\n rect.top >= 0 &&\n rect.left >= 0 &&\n rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n rect.right <= (window.innerWidth || document.documentElement.clientWidth)\n );\n}\n\n// Example usage\nconst element = document.getElementById('my-element');\nif (isInViewport(element)) {\n console.log('Element is in viewport');\n} else {\n console.log('Element is not in viewport');\n}\n```\n\n2. IntersectionObserver API\n\n该 API 可以观察元素与其祖先元素或视口交叉的情况，并且可以设置回调函数，当元素的可见性发生变化时会调用该回调函数。\n\n```javascript\nfunction callback(entries, observer) {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n console.log('Element is in viewport');\n } else {\n console.log('Element is not in viewport');\n }\n });\n}\n\nconst observer = new IntersectionObserver(callback);\n\nconst element = document.getElementById('my-element');\nobserver.observe(element);\n```\n\n使用 IntersectionObserver API 的优点是可以减少不必要的计算和事件监听，提高了性能。\n",{"_58":705,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/458/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/458/timeline",{"_58":708,"_60":61,"_62":709,"_64":710,"_66":711,"_68":712,"_70":713,"_72":714,"_74":715,"_76":716,"_78":717,"_111":718,"_131":132,"_133":24,"_134":-5,"_135":721,"_137":722,"_159":152,"_153":724,"_155":725,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":726,"_169":727,"_175":728,"_177":729,"_189":731,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/446","https://api.github.com/repos/pro-collection/interview-question/issues/446/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/446/comments","https://api.github.com/repos/pro-collection/interview-question/issues/446/events","https://github.com/pro-collection/interview-question/issues/446",1753017098,"I_kwDOJGDC6c5ofOsK",446,"移动端如何实现上拉加载，下拉刷新？【热度: 718】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[719,720],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":262,"_72":263,"_58":264,"_117":265,"_119":129,"_121":24,"_122":130},[],{"_58":268,"_68":269,"_62":270,"_70":271,"_72":272,"_74":273,"_76":274,"_122":275,"_147":723,"_149":277,"_151":152,"_131":132,"_153":278,"_155":279,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-12T15:29:22Z","2023-06-12T15:29:23Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：上拉加载、下拉刷新\n\n移动端实现上拉加载和下拉刷新通常使用一些特定的库或框架来简化开发。以下是两种常见的实现方式：\n\n1. 使用第三方库：一些流行的移动端UI库（如iScroll、BetterScroll、Ant Design Mobile等）提供了上拉加载和下拉刷新的功能，你可以使用它们来实现。这些库通常提供了易于使用的API和配置选项，可以在你的应用中轻松地集成上拉加载和下拉刷新功能。\n\n2. 自定义实现：如果你想更自定义地实现上拉加载和下拉刷新，可以使用原生的触摸事件（如touchstart、touchmove、touchend等）和滚动事件（如scroll）来监测用户的手势操作和滚动行为，并根据这些事件来触发相应的加载或刷新逻辑。你可以监听触摸事件来检测用户的下拉或上拉手势，当达到一定的阈值时，触发刷新或加载的操作。同时，你还需要监听滚动事件来判断当前滚动位置是否已经到达页面底部，从而触发上拉加载的操作。\n\n当自定义实现上拉加载和下拉刷新时，你可以使用JavaScript和HTML/CSS来编写代码。下面是一个简单的示例，演示了如何通过原生事件来实现上拉加载和下拉刷新的功能：\n\nHTML 结构：\n```html\n\n\n\n 上拉加载和下拉刷新示例\n \n\n\n

\n \n

\n 加载中...\n

\n 下拉刷新\n

\n\n \n\n\n```\n\nJavaScript 代码（your_script.js）：\n```javascript\n// 获取相关元素\nvar content = document.getElementById('content');\nvar loading = document.getElementById('loading');\nvar refresh = document.getElementById('refresh');\n\nvar isRefreshing = false;\nvar isLoading = false;\n\n// 监听触摸事件\nvar startY = 0;\nvar moveY = 0;\ncontent.addEventListener('touchstart', function(event) {\n startY = event.touches[0].pageY;\n});\n\ncontent.addEventListener('touchmove', function(event) {\n moveY = event.touches[0].pageY;\n\n // 下拉刷新\n if (moveY - startY > 100 && !isRefreshing) {\n refresh.innerHTML = '释放刷新';\n }\n\n // 上拉加载\n var scrollTop = content.scrollTop;\n var scrollHeight = content.scrollHeight;\n var offsetHeight = content.offsetHeight;\n if (scrollTop + offsetHeight >= scrollHeight && !isLoading) {\n loading.style.display = 'block';\n }\n});\n\ncontent.addEventListener('touchend', function(event) {\n // 下拉刷新\n if (moveY - startY > 100 && !isRefreshing) {\n refresh.innerHTML = '刷新中...';\n simulateRefresh();\n }\n\n // 上拉加载\n var scrollTop = content.scrollTop;\n var scrollHeight = content.scrollHeight;\n var offsetHeight = content.offsetHeight;\n if (scrollTop + offsetHeight >= scrollHeight && !isLoading) {\n loading.style.display = 'block';\n simulateLoad();\n }\n\n // 重置状态\n startY = 0;\n moveY = 0;\n});\n\n// 模拟刷新\nfunction simulateRefresh() {\n isRefreshing = true;\n setTimeout(function() {\n // 刷新完成后的操作\n refresh.innerHTML = '刷新成功';\n isRefreshing = false;\n }, 2000);\n}\n\n// 模拟加载\nfunction simulateLoad() {\n isLoading = true;\n setTimeout(function() {\n // 加载完成后的操作\n loading.style.display = 'none';\n isLoading = false;\n }, 2000);\n}\n```\n\n上面的代码使用了`touchstart`、`touchmove`和`touchend`事件来监测用户的手势操作，实现了下拉刷新和上拉加载的功能。通过修改`refresh`和`loading`元\n\n素的内容和样式，可以实现相应的状态展示效果。\n\n",{"_58":730,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/446/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/446/timeline",{"_58":733,"_60":61,"_62":734,"_64":735,"_66":736,"_68":737,"_70":738,"_72":739,"_74":740,"_76":741,"_78":742,"_111":743,"_131":132,"_133":24,"_134":-5,"_135":746,"_137":747,"_159":152,"_153":749,"_155":750,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":751,"_169":752,"_175":753,"_177":754,"_189":756,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/429","https://api.github.com/repos/pro-collection/interview-question/issues/429/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/429/comments","https://api.github.com/repos/pro-collection/interview-question/issues/429/events","https://github.com/pro-collection/interview-question/issues/429",1746120511,"I_kwDOJGDC6c5oE68_",429,"html 中前缀为 data- 开头的元素属性是什么？【热度：903】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[744,745],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":302,"_72":303,"_58":304,"_117":305,"_119":129,"_121":24,"_122":130},[],{"_58":268,"_68":269,"_62":270,"_70":271,"_72":272,"_74":273,"_76":274,"_122":275,"_147":748,"_149":277,"_151":152,"_131":132,"_153":278,"_155":279,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-07T15:05:07Z","2023-06-07T15:05:29Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"HTML 中前缀为 `data-` 开头的元素属性被称为自定义数据属性（Custom Data Attributes）或者数据属性（Data Attributes）。\n\n这些属性的命名以 `data-` 开头，后面可以跟上任意自定义的名称。这样的属性可以用来存储与元素相关的自定义数据，以便在 JavaScript 或 CSS 中进行访问和操作。\n\n自定义数据属性的命名应该遵循以下规则：\n- 属性名必须以 `data-` 开头。\n- 属性名可以包含任意`字母、数字、连字符（-）、下划线（_）和小数点（.）`。\n- 属性名不应该包含大写字母，因为 HTML 属性名是不区分大小写的。\n\n通过自定义数据属性，我们可以在 HTML 元素中嵌入自定义的数据，然后在 JavaScript 中使用 `getAttribute()` 方法或直接通过元素对象的 `dataset` 属性来访问这些数据。\n\n例如，在 HTML 中定义了一个自定义数据属性 `data-color=\"red\"`：\n```html\n

\n```\n\n在 JavaScript 中可以通过以下方式获取该自定义数据属性的值：\n```javascript\nconst myDiv = document.getElementById('myDiv');\nconst color = myDiv.getAttribute('data-color'); // 获取属性值为 \"red\"\nconst dataset = myDiv.dataset; // 获取包含所有自定义数据属性的对象 { color: \"red\" }\nconst colorValue = dataset.color; // 获取属性值为 \"red\"\n```\n\n通过自定义数据属性，我们可以将相关的数据绑定到 HTML 元素上，方便在 JavaScript 中进行处理和操作，增强了 HTML 和 JavaScript 之间的交互性。\n",{"_58":755,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/429/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/429/timeline",{"_58":758,"_60":61,"_62":759,"_64":760,"_66":761,"_68":762,"_70":763,"_72":764,"_74":765,"_76":766,"_78":767,"_111":768,"_131":132,"_133":24,"_134":-5,"_135":770,"_137":771,"_159":152,"_153":773,"_155":774,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":775,"_169":776,"_175":777,"_177":778,"_189":780,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/428","https://api.github.com/repos/pro-collection/interview-question/issues/428/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/428/comments","https://api.github.com/repos/pro-collection/interview-question/issues/428/events","https://github.com/pro-collection/interview-question/issues/428",1746110251,"I_kwDOJGDC6c5oE4cr",428,"web 应用中如何对静态资源加载失败的场景做降级处理【热度: 1,093】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[769],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":772,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-07T15:00:35Z","2023-06-07T15:00:36Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：静态资源降级、静态资源加载失败\n\n在 Web 应用中，可以使用以下方法对静态资源加载进行降级处理，即在某个资源加载失败时使用备用的静态资源链接：\n\n1. 使用多个 CDN 链接：在 HTML 中使用多个静态资源链接，按照优先级顺序加载，如果其中一个链接加载失败，则尝试加载下一个链接。\n\n```html\n\n\n\n```\n\n在加载 JavaScript 脚本时，浏览器会按照给定的顺序尝试加载各个链接，如果某个链接加载失败，浏览器会自动尝试加载下一个链接。\n\n2. 使用备用资源路径：在 JavaScript 中使用备用的资源路径，当主要的资源路径加载失败时，切换到备用路径。\n\n```javascript\nvar script = document.createElement('script');\nscript.src = 'https://cdn.example.com/script.js';\nscript.onerror = function() {\n // 主要资源加载失败，切换到备用资源路径\n script.src = 'https://backup.example.com/script.js';\n};\ndocument.head.appendChild(script);\n```\n\n在加载 JavaScript 脚本时，可以通过监听 `onerror` 事件，在主要资源加载失败时切换到备用资源路径，保证资源的可靠加载。\n\n3. 使用动态加载和错误处理：使用 JavaScript 动态加载静态资源，并处理加载失败的情况。\n\n```javascript\nfunction loadScript(src, backupSrc) {\n return new Promise(function(resolve, reject) {\n var script = document.createElement('script');\n script.src = src;\n script.onload = resolve;\n script.onerror = function() {\n if (backupSrc) {\n // 主要资源加载失败，切换到备用资源路径\n script.src = backupSrc;\n } else {\n reject(new Error('Failed to load script: ' + src));\n }\n };\n document.head.appendChild(script);\n });\n}\n\n// 使用示例\nloadScript('https://cdn.example.com/script.js', 'https://backup.example.com/script.js')\n .then(function() {\n // 资源加载成功\n })\n .catch(function(error) {\n // 资源加载失败\n console.error(error);\n });\n```\n\n通过动态加载脚本的方式，可以在资源加载失败时切换到备用资源路径或处理加载错误。\n\n除了前面提到的方法外，还有以下一些降级处理的方法：\n\n4. 本地备份资源：在 Web 应用的服务器上存储备份的静态资源文件，并在主要资源加载失败时，从本地服务器上加载备份资源。这种方法需要在服务器上维护备份资源的更新和一致性。\n\n5. 使用浏览器缓存：如果静态资源被浏览器缓存，则在资源加载失败时，浏览器可以使用缓存中的资源。可以通过设置合适的缓存策略，例如设置资源的 Cache-Control 头字段，让浏览器缓存资源并在需要时从缓存中加载。\n\n6. 使用 Service Worker：使用 Service Worker 技术可以在浏览器中拦截网络请求，从而实现更高级的降级处理。当主要资源加载失败时，可以使用 Service Worker 拦截请求并返回备用资源，或者动态生成代替资源。\n\n7. 使用资源加载管理工具：使用像 Webpack 这样的资源加载管理工具，可以通过配置多个资源入口点和插件来实现资源加载的灵活控制。在资源加载失败时，可以通过配置自动切换到备用资源或通过插件实现自定义的降级逻辑。\n\n这些方法可以根据具体的需求和场景选择适合的降级处理策略。降级处理的目的是确保网页应用的正常运行，提高用户体验，并减少对单一资源的依赖性。\n\n",{"_58":779,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/428/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/428/timeline",{"_58":782,"_60":61,"_62":783,"_64":784,"_66":785,"_68":786,"_70":787,"_72":788,"_74":789,"_76":790,"_78":791,"_111":792,"_131":132,"_133":24,"_134":-5,"_135":795,"_137":796,"_159":152,"_153":798,"_155":799,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":800,"_169":801,"_175":802,"_177":803,"_189":805,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/391","https://api.github.com/repos/pro-collection/interview-question/issues/391/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/391/comments","https://api.github.com/repos/pro-collection/interview-question/issues/391/events","https://github.com/pro-collection/interview-question/issues/391",1732550367,"I_kwDOJGDC6c5nRJ7f",391,"小程序为什么会有两个线程",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[793,794],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":302,"_72":303,"_58":304,"_117":305,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":797,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-05-30T15:57:53Z","2023-05-30T15:57:54Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"小程序之所以有两个线程，是为了实现小程序的高效运行和良好的用户体验。\n\n1. 渲染线程（UI 线程）：\n 渲染线程负责小程序界面的渲染和响应用户的交互。它使用 WebView 进行页面渲染，包括解析和绘制 DOM、布局、样式计算和渲染等操作。渲染线程是单线程的，所有的界面操作都在这个线程中进行。\n\n2. 逻辑线程（JS 线程）：\n 逻辑线程负责小程序的逻辑运算和数据处理。它是基于 JavaScript 运行的，负责处理用户交互、业务逻辑、数据请求、事件处理等操作。逻辑线程是独立于渲染线程的，可以并行处理多个任务，避免阻塞界面的渲染和响应。\n\n将界面渲染和逻辑运算分离成两个线程的设计有以下好处：\n\n- 响应速度：逻辑线程和渲染线程分开，可以并行执行，提高了小程序的响应速度和用户体验。\n- 防止阻塞：逻辑线程的运行不会阻塞渲染线程，避免了长时间的计算或数据处理导致界面卡顿或无响应的情况。\n- 资源隔离：渲染线程和逻辑线程是独立的，它们有各自的资源和运行环境，可以避免相互干扰和影响。\n\n需要注意的是，小程序的渲染线程和逻辑线程之间通过微信客户端进行通信和交互。逻辑线程可以发送请求给微信客户端，然后客户端将渲染指令发送给渲染线程进行界面渲染，同时渲染线程可以将用户的交互事件发送给逻辑线程进行处理。这种通信方式保证了渲染和逻辑的协同工作，实现了小程序的正常运行。\n\n小程序之所以有两个线程，是为了提高渲染速度、避免阻塞和资源隔离。渲染线程负责界面渲染，逻辑线程负责业务逻辑和数据处理，两者通过微信客户端进行通信和交互，共同实现小程序的功能和性能。\n",{"_58":804,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/391/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/391/timeline",{"_58":807,"_60":61,"_62":808,"_64":809,"_66":810,"_68":811,"_70":812,"_72":813,"_74":814,"_76":815,"_78":816,"_111":817,"_131":132,"_133":24,"_134":-5,"_135":820,"_137":821,"_159":152,"_153":823,"_155":824,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":825,"_169":826,"_175":827,"_177":828,"_189":830,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/378","https://api.github.com/repos/pro-collection/interview-question/issues/378/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/378/comments","https://api.github.com/repos/pro-collection/interview-question/issues/378/events","https://github.com/pro-collection/interview-question/issues/378",1730851669,"I_kwDOJGDC6c5nKrNV",378,"常见 web 安全解析【热度: 1,968】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[818,819],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":410,"_72":411,"_58":412,"_117":413,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":822,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-05-29T14:21:03Z","2023-05-29T14:21:04Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：XSS攻击、CSRF攻击、点击劫持共计、URL跳转漏洞、SQL注入攻击、OS命令注入攻击\n\n参考文档：\n- https://github.com/ljianshu/Blog/issues/56\n",{"_58":829,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/378/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/378/timeline",{"_58":832,"_60":61,"_62":833,"_64":834,"_66":835,"_68":836,"_70":837,"_72":838,"_74":839,"_76":840,"_78":841,"_111":842,"_131":132,"_133":24,"_134":-5,"_135":845,"_137":846,"_159":152,"_153":848,"_155":849,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":850,"_169":851,"_175":852,"_177":853,"_189":855,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/375","https://api.github.com/repos/pro-collection/interview-question/issues/375/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/375/comments","https://api.github.com/repos/pro-collection/interview-question/issues/375/events","https://github.com/pro-collection/interview-question/issues/375",1722330479,"I_kwDOJGDC6c5mqK1v",375,"深度 SEO 优化的方式有哪些，从技术层面来说",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[843,844],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":464,"_72":465,"_58":466,"_117":467,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":847,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-05-23T15:38:21Z","2023-05-23T15:38:22Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"深度 SEO 优化涉及到一些技术层面的优化策略，以下是一些常见的方式：\n\n1. 网站结构优化：优化网站的结构，确保每个页面都可以被搜索引擎爬取和索引。使用合适的 HTML 标签和语义化的内容结构，使搜索引擎能够更好地理解页面的内容。\n\n2. 网站速度优化：提升网站的加载速度对 SEO 很重要。通过压缩和合并 CSS 和 JavaScript 文件、优化图像、使用浏览器缓存、使用 CDN（内容分发网络）等技术手段来减少页面加载时间。\n\n3. 页面渲染优化：确保搜索引擎可以正常渲染和索引使用 JavaScript 技术构建的单页面应用（SPA）或动态生成的内容。使用服务端渲染（SSR）或预渲染技术，确保搜索引擎能够获取到完整的页面内容。\n\n4. URL 优化：使用短、描述性的 URL，并使用关键词来优化 URL 结构。避免使用动态参数或过长的 URL。\n\n5. 链接优化：内部链接和外部链接都对 SEO 有影响。在网站内部设置相关性强的链接，使页面之间相互连接。外部链接是获取更多外部网站链接指向自己网站的重要手段，可以通过内容创作和社交媒体推广来获得更多高质量的外部链接。\n\n6. Schema 标记：使用结构化数据标记（Schema Markup）来标识网页内容，帮助搜索引擎更好地理解和展示网页信息。可以使用 JSON-LD、Microdata 或 RDFa 等标记格式。\n\n7. XML 网站地图：创建和提交 XML 网站地图，提供网站的结构和页面信息，帮助搜索引擎更好地索引网站内容。\n\n8. Robots.txt 文件：通过 Robots.txt 文件来指示搜索引擎哪些页面可以被爬取和索引，哪些页面不可访问。\n\n9. HTTPS 加密：使用 HTTPS 协议来加密网站通信，确保数据安全和用户隐私，同时搜索引擎更倾向于收录和排名使用 HTTPS 的网站。\n\n10. 移动友好性：优化网站在移动设备上的显示和用户体验，确保网站具备响应式设计或移动版网站，以及快速加载和友好的操作性。\n\n这些是深度 SEO 优化的一些常见技术层面的策略，通过综合运用这些策略，可以提升网站的搜索引擎可见性和排名。需要根据具体情况和搜索引擎的最佳",{"_58":854,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/375/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/375/timeline",{"_58":857,"_60":61,"_62":858,"_64":859,"_66":860,"_68":861,"_70":862,"_72":863,"_74":864,"_76":865,"_78":866,"_111":867,"_131":132,"_133":24,"_134":-5,"_135":870,"_137":871,"_159":152,"_153":873,"_155":874,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":875,"_169":876,"_175":877,"_177":878,"_189":880,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/369","https://api.github.com/repos/pro-collection/interview-question/issues/369/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/369/comments","https://api.github.com/repos/pro-collection/interview-question/issues/369/events","https://github.com/pro-collection/interview-question/issues/369",1722184766,"I_kwDOJGDC6c5mpnQ-",369,"一直在 window 上面挂东西是否有什么风险",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[868,869],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":356,"_72":357,"_58":358,"_117":359,"_119":129,"_121":24,"_122":130},[],{"_58":268,"_68":269,"_62":270,"_70":271,"_72":272,"_74":273,"_76":274,"_122":275,"_147":872,"_149":277,"_151":152,"_131":132,"_153":278,"_155":279,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-05-23T14:19:01Z","2023-05-23T14:19:02Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"在前端开发中，将内容或应用程序运行在浏览器的全局`window`对象上可能会带来一些潜在的风险。以下是一些需要注意的风险：\n\n1. 命名冲突：`window`对象是浏览器的全局对象，它包含许多内置属性和方法。如果您在全局命名空间中定义的变量或函数与现有的全局对象属性或方法发生冲突，可能会导致意外行为或错误。\n\n2. 安全漏洞：在全局`window`对象上挂载的代码可以访问和修改全局的数据和功能。这可能导致安全漏洞，特别是当这些操作被恶意利用时。攻击者可能通过篡改全局对象来窃取用户敏感信息或执行恶意代码。\n\n3. 代码维护性：过多地依赖全局`window`对象可能导致代码的维护困难。全局状态的过度共享可能导致代码变得难以理解和调试，尤其在大型应用程序中。\n\n为了减轻这些风险，建议采用以下最佳实践：\n\n1. 使用模块化开发：将代码模块化，避免对全局`window`对象的直接依赖。使用模块加载器（如ES Modules、CommonJS、AMD）来管理模块之间的依赖关系，以减少全局命名冲突和代码冗余。\n\n2. 使用严格模式：在JavaScript代码中使用严格模式（`\"use strict\"`），以启用更严格的语法检查和错误处理。严格模式可以帮助捕获潜在的错误和不安全的行为。\n\n3. 显式访问全局对象：如果确实需要访问全局`window`对象的属性或方法，请使用显式访问方式，如`window.localStorage`、`window.setTimeout()`等。避免直接引用全局属性，以减少冲突和误用的风险。\n\n4. 谨慎处理第三方代码：在使用第三方库或框架时，注意审查其对全局`window`对象的使用方式。确保库或框架的操作不会产生潜在的安全风险或全局命名冲突。\n\n",{"_58":879,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/369/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/369/timeline",{"_58":882,"_60":61,"_62":883,"_64":884,"_66":885,"_68":886,"_70":887,"_72":888,"_74":889,"_76":890,"_78":891,"_111":892,"_131":132,"_133":24,"_134":-5,"_135":894,"_137":895,"_159":152,"_153":897,"_155":898,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":899,"_169":900,"_175":901,"_177":902,"_189":904,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/368","https://api.github.com/repos/pro-collection/interview-question/issues/368/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/368/comments","https://api.github.com/repos/pro-collection/interview-question/issues/368/events","https://github.com/pro-collection/interview-question/issues/368",1722176276,"I_kwDOJGDC6c5mplMU",368,"什么是领域模型【热度: 1,092】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[893],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":896,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-05-23T14:14:16Z","2023-05-23T14:14:17Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：前端领域模型\n\n### 什么是领域模型\n\n领域模型是软件开发中用于描述领域（业务）概念和规则的一种建模技术。它通过定义实体、值对象、关联关系、行为等元素，抽象出领域的核心概念和业务规则，帮助开发人员理解和设计软件系统。\n\n以下是领域模型中常见的一些元素：\n\n1. 实体（Entity）：实体是领域模型中具有唯一标识的对象，通常代表领域中的具体事物或业务对象。实体具有属性和行为，并且可以通过其标识进行唯一标识和识别。\n\n2. 值对象（Value Object）：值对象是没有唯一标识的对象，通常用于表示没有明确生命周期的属性集合。值对象的相等性通常基于其属性值，而不是标识。例如，日期、时间、货币等都可以作为值对象。\n\n3. 关联关系（Association）：关联关系描述了不同实体之间的关系和连接。关联关系可以是一对一、一对多、多对多等不同类型。关联关系可以带有方向和导航属性，用于表示实体之间的关联和导航。\n\n4. 聚合（Aggregation）：聚合是一种特殊的关联关系，表示包含关系，即一个实体包含其他实体。聚合关系是一种强关联，被包含实体的生命周期受到包含实体的控制。\n\n5. 领域事件（Domain Event）：领域事件表示领域中发生的具体事件或状态变化。它可以作为触发业务逻辑的信号，通常用于解耦和处理领域中的复杂业务流程。\n\n6. 聚合根（Aggregate Root）：聚合根是聚合中的根实体，它代表整个聚合的一致性边界。通过聚合根，可以对整个聚合进行操作和维护。\n\n7. 领域服务（Domain Service）：领域服务是一种封装了领域逻辑的服务，用于处理领域中的复杂业务操作或跨实体的操作。它通常与具体实体无关，提供一些无状态的操作。\n\n通过建立领域模型，开发人员可以更好地理解和表达领域的业务需求和规则，从而指导软件系统的设计和实现。领域模型可以作为开发团队之间沟通的工具，也可以用于生成代码、进行自动化测试等。\n\n### 前端系统应该如何划分领域模型\n\n在前端系统中划分领域模型的方式可以根据具体业务需求和系统复杂性进行灵活调整。以下是一些常见的划分领域模型的方式：\n\n1. 模块划分：将前端系统按照模块进行划分，每个模块对应一个领域模型。模块可以根据功能、业务领域或者页面进行划分。每个模块可以有自己的实体、值对象、关联关系和业务逻辑。\n\n2. 页面划分：将前端系统按照页面进行划分，每个页面对应一个领域模型。每个页面可以有自己的实体、值对象和关联关系，以及与页面相关的业务逻辑。\n\n3. 组件划分：将前端系统按照组件进行划分，每个组件对应一个领域模型。每个组件可以有自己的实体、值对象和关联关系，以及与组件相关的业务逻辑。组件可以是页面级别的，也可以是更细粒度的功能组件。\n\n4. 功能划分：将前端系统按照功能进行划分，每个功能对应一个领域模型。功能可以是用户操作的具体功能模块，例如登录、注册、购物车等。每个功能可以有自己的实体、值对象和关联关系，以及与功能相关的业务逻辑。\n\n在划分领域模型时，需要根据具体业务的复杂性和团队的组织方式进行调整。重要的是识别系统中的核心业务概念和规则，并将其抽象成适当的实体和值对象。同时，要保持领域模型的聚合性和一致性，避免出现过于庞大和紧耦合的领域模型。划分的领域模型应该易于理解、扩展和维护，以支持前端系统的开发和演进。\n",{"_58":903,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/368/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/368/timeline",{"_58":906,"_60":61,"_62":907,"_64":908,"_66":909,"_68":910,"_70":911,"_72":912,"_74":913,"_76":914,"_78":915,"_111":916,"_131":132,"_133":24,"_134":-5,"_135":918,"_137":919,"_159":152,"_153":921,"_155":922,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":923,"_169":924,"_175":925,"_177":926,"_189":928,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/367","https://api.github.com/repos/pro-collection/interview-question/issues/367/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/367/comments","https://api.github.com/repos/pro-collection/interview-question/issues/367/events","https://github.com/pro-collection/interview-question/issues/367",1719849668,"I_kwDOJGDC6c5mgtLE",367,"react native 工作原理是什么？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[917],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":920,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-05-22T14:46:30Z","2023-05-22T14:46:31Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"React Native是一种基于JavaScript的开发框架，用于构建移动应用程序。它允许开发人员使用React的组件化开发模式来构建原生移动应用，同时跨平台共享代码。\n\n工作原理如下：\n\n1. JavaScript线程：React Native的应用程序逻辑是通过JavaScript代码来编写的。React Native应用在运行时会创建一个专用的JavaScript线程，负责处理JavaScript代码的解析和执行。\n\n2. 原生桥（Native Bridge）：React Native应用通过原生桥（Native Bridge）连接JavaScript线程和原生平台，使得JavaScript代码能够与原生代码进行通信和交互。原生桥是一个双向通信通道，它将JavaScript的调用转发给原生平台，并将原生平台的事件和回调传递回JavaScript。\n\n3. Virtual DOM：React Native使用Virtual DOM（虚拟DOM）机制来描述和管理UI的状态和变化。在React Native中，组件的UI层由React组件树构建而成，每个组件都有一个相应的虚拟DOM表示。\n\n4. 原生渲染：React Native将虚拟DOM的变化映射到相应的原生UI组件上。通过与原生平台的交互，React Native会根据虚拟DOM的变化更新相应的原生UI组件，实现界面的渲染和更新。\n\n5. 原生组件：React Native提供了一系列的原生组件，这些组件直接映射到原生平台上的真实UI控件，例如文本、图像、按钮等。开发人员可以使用这些原生组件来构建用户界面。\n\n6. 原生模块：React Native还提供了原生模块的概念，允许开发人员编写原生平台相关的功能和逻辑。通过原生模块，开发人员可以访问设备功能、原生API和第三方库等。\n\n总体来说，React Native通过JavaScript线程和原生桥实现了JavaScript代码和原生平台之间的通信。它利用虚拟DOM机制来管理UI的状态和变化，并通过与原生平台的交互实现UI的渲染和更新。开发人员可以使用React Native提供的原生组件和原生模块来构建跨平台的移动应用程序。",{"_58":927,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/367/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/367/timeline",{"_58":930,"_60":61,"_62":931,"_64":932,"_66":933,"_68":934,"_70":935,"_72":936,"_74":937,"_76":938,"_78":939,"_111":940,"_131":132,"_133":24,"_134":-5,"_135":943,"_137":944,"_159":152,"_153":946,"_155":947,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":948,"_169":949,"_175":950,"_177":951,"_189":953,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/358","https://api.github.com/repos/pro-collection/interview-question/issues/358/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/358/comments","https://api.github.com/repos/pro-collection/interview-question/issues/358/events","https://github.com/pro-collection/interview-question/issues/358",1712225047,"I_kwDOJGDC6c5mDnsX",358,"base64 的编码原理是什么",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[941,942],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":356,"_72":357,"_58":358,"_117":359,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":945,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-05-16T15:09:02Z","2023-05-16T15:09:03Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"Base64编码是一种用于将二进制数据转换为可打印ASCII字符的编码方式。它的原理如下：\n\n1. 将原始数据划分为连续的字节序列。\n\n2. 将每个字节转换为8位二进制数。\n\n3. 将这些二进制数按照6位一组进行分组，不足6位的用0补齐。\n\n4. 将每个6位的二进制数转换为对应的十进制数。\n\n5. 根据Base64字符表，将十进制数转换为相应的可打印ASCII字符。\n\nBase64字符表由64个字符组成，通常使用以下字符：A-Z、a-z、0-9以及字符\"+\"和\"/\"。这些字符可以通过索引值与相应的十进制数进行对应。\n\n编码过程中，如果原始数据的长度不是3的倍数，会根据需要进行填充。填充通常使用字符\"=\"，每个填充字符表示4位的零值。\n\n解码时，按照相反的过程进行操作。将Base64编码后的字符串按照4个字符一组分组，并将每个字符转换回对应的十进制数。然后将这些十进制数转换为6位二进制数，并将这些二进制数连接起来。最后，将连接后的二进制数划分为8位一组，并将每个8位二进制数转换为对应的字节数据。\n\nBase64编码主要应用于在文本协议中传输或存储二进制数据，例如在电子邮件中传输附件或在Web中传输图像数据。它可以将二进制数据转换为ASCII字符，使其在不支持二进制传输的环境中能够正常处理。",{"_58":952,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/358/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/358/timeline",{"_58":955,"_60":61,"_62":956,"_64":957,"_66":958,"_68":959,"_70":960,"_72":961,"_74":962,"_76":963,"_78":964,"_111":965,"_131":132,"_133":24,"_134":-5,"_135":968,"_137":969,"_159":152,"_153":971,"_155":972,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":973,"_169":974,"_175":975,"_177":976,"_189":978,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/351","https://api.github.com/repos/pro-collection/interview-question/issues/351/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/351/comments","https://api.github.com/repos/pro-collection/interview-question/issues/351/events","https://github.com/pro-collection/interview-question/issues/351",1708669523,"I_kwDOJGDC6c5l2DpT",351,"前端水印了解多少？【热度: 641】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[966,967],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":410,"_72":411,"_58":412,"_117":413,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":970,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-05-13T16:08:21Z","2023-05-13T16:08:22Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：前端明水印暗水印\n\n### 明水印和暗水印的区别\n\n前端水印可以分为明水印和暗水印两种类型。它们的区别如下：\n\n1. 明水印：明水印是通过在文本或图像上覆盖另一层图像或文字来实现的。这种水印会明显地出现在页面上，可以用来显示版权信息或其他相关信息。\n\n2. 暗水印：暗水印是指在文本或图像中隐藏相关信息的一种技术。这种水印不会直接出现在页面上，只有在特殊的程序或工具下才能被检测到。暗水印通常用于保护敏感信息以及追踪网页内容的来源和版本。\n\n\n\n### 添加明水印手段有哪些\n\n可以参考这个文档： https://zhuanlan.zhihu.com/p/374734095\n\n总计一下：\n\n1. 重复的dom元素覆盖实现：在页面上覆盖一个position:fixed的div盒子，盒子透明度设置较低，设置pointer-events: none;样式实现点击穿透，在这个盒子内通过js循环生成小的水印div，每个水印div内展示一个要显示的水印内容\n\n2. canvas输出背景图：绘制出一个水印区域，将这个水印通过toDataURL方法输出为一个图片，将这个图片设置为盒子的背景图，通过backgroud-repeat：repeat；样式实现填满整个屏幕的效果。\n\n3. svg实现背景图：与canvas生成背景图的方法类似，只不过是生成背景图的方法换成了通过svg生成\n\n4. 图片加水印\n\n\n### css 添加水印的方式，如何防止用户删除对应的 css ，从而达到去除水印的目的\n\n使用 CSS 添加水印的方式本身并不能完全防止用户删除对应的 CSS 样式，从而删除水印。但是，可以采取一些措施来增加删除难度，提高水印的防伪能力。以下是一些常见的方法：\n\n1. 调用外部CSS文件：将水印样式单独设置在一个CSS文件内，并通过外链的方式在网站中调用，可以避免用户通过编辑页面HTML文件或内嵌样式表的方式删除水印。\n\n2. 设置样式为 !important：在CSS样式中使用 !important 标记可以避免被覆盖。但是，这种方式会影响网页的可读性，需慎重考虑。\n\n3. 添加自定义类名：通过在CSS样式中加入自定义的class类名，可以防止用户直接删掉该类名，进而删除水印。但是，用户也可以通过重新定义该类名样式来替换水印。\n\n4. 将水印样式应用到多个元素上：将水印样式应用到多个元素上，可以使得用户删除水印较为困难。例如，在网站的多个位置都加上\"Power by XXX\"的水印样式。\n\n5. 使用JavaScript动态生成CSS样式：可以监听挂载水印样式的dom 节点，如果用户改变了该 dom , 重新生成对应的水印挂载上去即可。这种方法可通过JS动态生成CSS样式，从而避免用户直接在网页源文件中删除CSS代码。但需要注意的是，这种方案会稍稍加重网页的加载速度，需要合理权衡。\n\n6. 混淆CSS代码：通过多次重复使用同一样式，或者采用CSS压缩等混淆手段，可以使CSS样式表变得复杂难懂，增加水印被删除的难度。\n\n7. 采用图片水印的方式：将水印转化为一个透明的PNG图片，然后将其作为网页的背景图片，可以更有效地防止水印被删除。\n\n8. 使用SVG图形：可以将水印作为SVG图形嵌入到网页中进行展示。由于SVG的矢量性质，这种方式可以保证水印在缩放或旋转后的清晰度，同时也增加了删除难度。\n\n\n### 暗水印是如何把水印信息隐藏起来的\n\n暗水印的基本原理是在原始数据（如文本、图像等）中嵌入信息，从而实现版权保护和溯源追踪等功能。暗水印把信息隐藏在源数据中，使得人眼难以察觉，同时对源数据的影响尽可能小，保持其自身的特征。\n\n一般来说，暗水印算法主要包括以下几个步骤：\n\n1. 水印信息处理：将待嵌入的信息经过处理和加密后，转化为二进制数据。\n\n2. 源数据处理：遍历源数据中的像素或二进制数据，根据特定规则对其进行调整，以此腾出空间插入水印二进制数据。\n\n3. 嵌入水印：将水印二进制数据插入到源数据中的指定位置，以某种方式嵌入到源数据之中。\n\n4. 提取水印：在使用暗水印的过程中，需要从带水印的数据中提取出隐藏的水印信息。提取水印需要使用特定的解密算法和提取密钥。\n\n暗水印的一个关键问题是在嵌入水印的过程中，要保证水印对源数据的伤害尽可能的小，同时嵌入水印后数据的分布、统计性质等不应发生明显变化，以更好地保持数据的质量和可视效果。\n\n",{"_58":977,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/351/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/351/timeline",{"_58":980,"_60":61,"_62":981,"_64":982,"_66":983,"_68":984,"_70":985,"_72":986,"_74":987,"_76":988,"_78":989,"_111":990,"_131":132,"_133":24,"_134":-5,"_135":993,"_137":994,"_159":152,"_153":996,"_155":997,"_158":-5,"_161":162,"_106":-5,"_163":-5,"_164":998,"_169":999,"_175":1000,"_177":1001,"_189":1003,"_191":-5,"_192":-5,"_193":194},"https://api.github.com/repos/pro-collection/interview-question/issues/337","https://api.github.com/repos/pro-collection/interview-question/issues/337/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/337/comments","https://api.github.com/repos/pro-collection/interview-question/issues/337/events","https://github.com/pro-collection/interview-question/issues/337",1697835048,"I_kwDOJGDC6c5lMugo",337,"函数式编程了解多少？【热度: 1,789】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[991,992],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":464,"_72":465,"_58":466,"_117":467,"_119":129,"_121":24,"_122":130},[],{"_58":268,"_68":269,"_62":270,"_70":271,"_72":272,"_74":273,"_76":274,"_122":275,"_147":995,"_149":277,"_151":152,"_131":132,"_153":278,"_155":279,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-05-05T15:49:15Z","2023-05-05T15:49:16Z",{"_166":152,"_167":152,"_168":152},{"_171":152,"_172":152,"_173":152,"_174":152},"**关键词**：函数式编程\n\n### 函数式编程的核心概念\n\n函数式编程是一种编程范式，它将程序看做是一系列函数的组合，函数是应用的基础单位。函数式编程主要有以下核心概念：\n\n1. 纯函数：函数的输出只取决于输入，没有任何副作用，不会修改外部变量或状态，所以对于同样的输入，永远返回同样的输出值。因此，纯函数可以有效地避免副作用和竞态条件等问题，使得代码更加可靠、易于调试和测试。\n\n2. 不可变性：在函数式编程中，数据通常是不可变的，即不允许在内部进行修改。这样可以避免副作用的发生，提高代码可靠性。\n\n3. 函数组合：函数可以组合成复杂的函数，从而减少重复代码的产生。\n\n4. 高阶函数：高阶函数是指可以接收其他函数作为参数，也可以返回函数的函数。例如，函数柯里化和函数的组合就是高阶函数的应用场景。\n\n5. 惰性计算：指在必要的时候才计算（执行）函数，而不是在每个可能的执行路径上都执行，从而提高性能。\n\n函数式编程的核心概念是将函数作为基本构建块来组合构建程序，通过纯函数、不可变性、函数组合、高阶函数和惰性计算等概念来实现代码的简洁性、可读性和可维护性，以及高效的性能运行。\n\n\n### 函数式编程的优势\n\n函数式编程有以下优势：\n\n1. 易于理解和维护：函数式编程强调数据不变性和纯函数概念，可以提高代码的可读性和可维护性，因为它避免了按照顺序对变量进行修改，并强调函数行为的确定性。\n\n2. 更少的 bug：由于函数式编程强调纯函数的概念，它可以消除由于副作用引起的bug。因为纯函数不会修改外部状态或数据结构，只是将输入转换为输出。这么做有助于保持代码更加可靠。\n\n3. 更好的可测试性：由于纯函数不具有副作用，它更容易测试，因为测试数据是预测性的。\n\n4. 更少的重构：函数式编程使用函数组合和柯里化等方法来简化代码。它将大型问题分解为微小问题，从而减少了代码重构的需要。\n\n5. 避免并发问题：由于函数式编程强调不变性和纯函数的概念，这使得并发问题变得更简单。纯函数允许并行运行，因此，当程序在不同的线程上执行时，它更容易保持同步。\n\n6. 代码复用：由于函数是基本构建块，并且可以组合成更高级别的功能块，使用函数式编程可以更大程度上推崇代码复用，减少代码冗余。\n\n函数式编程通过强调纯函数、不可变数据结构和函数组合等概念，可以提高代码可读性和可维护性，降低程序bug出现的风险，更容易测试，并且更容易将问题分解为更容易处理的小部分，更好地应对并发和可扩展性。\n\n",{"_58":1002,"_180":152,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152},"https://api.github.com/repos/pro-collection/interview-question/issues/337/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/337/timeline","pagination",{"_1006":1007,"_166":1008},"value",6,7,"actionData","errors"]