用户9306731841101
前端开发
获得徽章 0
赞了这篇文章
#挑战每日一条沸点# 【Day16】 window.innerWidth和document.documentElement.clientWidth的区别
window.innerWidth和document.documentElement.clientWidth都是用来获取浏览器窗口的宽度，但是它们有些微小的差别。
window.innerWidth返回浏览器窗口的内部宽度，包括滚动条和其他非内容元素的宽度，但不包括边框。如果页面有水平滚动条，则window.innerWidth会减去滚动条的宽度。
document.documentElement.clientWidth返回文档元素的客户端宽度，也就是可见区域的宽度，但不包括滚动条、边框和外边距。这个值是文档元素的宽度，也就是HTML元素的宽度。
window.innerWidth和document.documentElement.clientWidth都是用来获取浏览器窗口的宽度，但是它们有些微小的差别。
window.innerWidth返回浏览器窗口的内部宽度，包括滚动条和其他非内容元素的宽度，但不包括边框。如果页面有水平滚动条，则window.innerWidth会减去滚动条的宽度。
document.documentElement.clientWidth返回文档元素的客户端宽度，也就是可见区域的宽度，但不包括滚动条、边框和外边距。这个值是文档元素的宽度，也就是HTML元素的宽度。
展开
评论
点赞
#挑战每日一条沸点# 【Day15】 如何在使用 git add 命令之后取消已经添加的文件？
使用 git reset 命令可以撤销已经添加到暂存区中的修改，但不会影响已经提交的历史记录。如果你想要撤销已经提交的修改，可以使用 git revert 命令。
使用 git reset 命令可以撤销已经添加到暂存区中的修改，但不会影响已经提交的历史记录。如果你想要撤销已经提交的修改，可以使用 git revert 命令。
评论
点赞
#挑战每日一条沸点# 【Day14】 git中如何撤销上一次提交并将更改保留在工作区中（代码不恢复）？
git reset --soft HEAD^ 会将当前分支的 HEAD 指针重置为它的父提交（也就是上一次提交），但不会更改工作目录中的文件。这意味着，之前提交的更改将被还原到暂存区中，但不会被撤销，因此可以重新提交它们。
例如，如果你意识到上一次提交有一个错误，你可以使用 git reset --soft HEAD^ 撤销上一次提交，然后在工作区中进行更改，最后再次提交更改，这样就可以修复错误并在新的提交中保存更改。
需要注意的是，git reset 是一个非常强大的命令，如果使用不当可能会丢失提交历史，因此在使用该命令之前，最好先备份你的代码库。
git reset --soft HEAD^ 会将当前分支的 HEAD 指针重置为它的父提交（也就是上一次提交），但不会更改工作目录中的文件。这意味着，之前提交的更改将被还原到暂存区中，但不会被撤销，因此可以重新提交它们。
例如，如果你意识到上一次提交有一个错误，你可以使用 git reset --soft HEAD^ 撤销上一次提交，然后在工作区中进行更改，最后再次提交更改，这样就可以修复错误并在新的提交中保存更改。
需要注意的是，git reset 是一个非常强大的命令，如果使用不当可能会丢失提交历史，因此在使用该命令之前，最好先备份你的代码库。
展开
评论
点赞
#挑战每日一条沸点# 【Day13】 Passive Event Listeners特性是为了解决浏览器页面滑动流畅度而设计的，它通过扩展事件属性passive让Web开发者来告知浏览器监听器是否会阻止事件的默认行为，从而让浏览器可以更智能地决策并优化，这其中涉及到了Chrome的多线程渲染框架、输入事件处理等知识。
评论
点赞
#挑战每日一条沸点# 【Day12】 Git --- Cherry pick
对于多分支的代码库，将代码从一个分支转移到另一个分支是常见需求。
这时分两种情况。一种情况是，你需要另一个分支的所有代码变动，那么就采用合并（git merge）。另一种情况是，你只需要部分代码变动（某几个提交），这时可以采用 Cherry pick。
对于多分支的代码库，将代码从一个分支转移到另一个分支是常见需求。
这时分两种情况。一种情况是，你需要另一个分支的所有代码变动，那么就采用合并（git merge）。另一种情况是，你只需要部分代码变动（某几个提交），这时可以采用 Cherry pick。
展开
评论
点赞
#挑战每日一条沸点# 【Day11】 React的useCallback是什么？
React 的 useCallback hook 用于优化 React 组件的性能。它的主要作用是为了避免在每次渲染时都创建新的函数引用。
当一个组件渲染时，它可能会创建一些函数作为 prop 传递给子组件。如果这些函数在每次渲染时都被重新创建，那么子组件就会在每次渲染时都接收到一个新的函数引用，导致子组件重新渲染，从而影响性能。
使用 useCallback 可以避免这种情况，它会返回一个 memoized 版本的回调函数。这个 memoized 的函数只会在依赖项发生变化时才会被重新创建，否则会一直使用缓存的函数引用。
React 的 useCallback hook 用于优化 React 组件的性能。它的主要作用是为了避免在每次渲染时都创建新的函数引用。
当一个组件渲染时，它可能会创建一些函数作为 prop 传递给子组件。如果这些函数在每次渲染时都被重新创建，那么子组件就会在每次渲染时都接收到一个新的函数引用，导致子组件重新渲染，从而影响性能。
使用 useCallback 可以避免这种情况，它会返回一个 memoized 版本的回调函数。这个 memoized 的函数只会在依赖项发生变化时才会被重新创建，否则会一直使用缓存的函数引用。
展开
评论
点赞
#挑战每日一条沸点# 【Day10】 CSS的clip-path属性可以用来剪切元素的可见部分，可以通过各种形状来定义剪切区域，比如圆形、椭圆、多边形或路径等。
以下是clip-path的用法：
通过预定义的形状剪切元素：使用预定义的形状，如圆形、椭圆、多边形等，来剪切元素。
通过自定义路径剪切元素：使用SVG路径来自定义剪切区域。
通过使用渐变剪切元素：使用CSS渐变来剪切元素。
以下是clip-path的用法：
通过预定义的形状剪切元素：使用预定义的形状，如圆形、椭圆、多边形等，来剪切元素。
通过自定义路径剪切元素：使用SVG路径来自定义剪切区域。
通过使用渐变剪切元素：使用CSS渐变来剪切元素。
展开
评论
点赞
#挑战每日一条沸点# #挑战每日一条沸点# 【Day9】 vue Router中hash和history的区别是什么?
Vue Router中的Hash模式和History模式都是用来实现客户端路由的，它们的主要区别在于URL的格式不同。
Hash模式将路由信息放在URL的hash部分（即#后面），而不会导致浏览器向服务器发送请求。这使得前端可以通过监听hash变化来实现路由切换，同时保持页面不刷新。Hash模式的优点是兼容性好，在不支持History API的浏览器上也可以正常使用，但是URL看起来不太友好，不太美观。
History模式使用HTML5的History API来实现路由切换，将路由信息放在URL的路径部分，不再需要hash。这使得URL更加直观和友好，但是需要服务器端的支持。因为在History模式下，当用户访问一个不存在的路由时，浏览器会向服务器发送请求，如果服务器没有正确配置，会导致404错误。
因此，选择Hash模式还是History模式，需要根据具体的项目需求和技术要求来决定。如果要支持较老的浏览器，或者对SEO优化要求不高，可以选择Hash模式；如果要求URL更加友好，对SEO优化有要求，可以选择History模式。
Vue Router中的Hash模式和History模式都是用来实现客户端路由的，它们的主要区别在于URL的格式不同。
Hash模式将路由信息放在URL的hash部分（即#后面），而不会导致浏览器向服务器发送请求。这使得前端可以通过监听hash变化来实现路由切换，同时保持页面不刷新。Hash模式的优点是兼容性好，在不支持History API的浏览器上也可以正常使用，但是URL看起来不太友好，不太美观。
History模式使用HTML5的History API来实现路由切换，将路由信息放在URL的路径部分，不再需要hash。这使得URL更加直观和友好，但是需要服务器端的支持。因为在History模式下，当用户访问一个不存在的路由时，浏览器会向服务器发送请求，如果服务器没有正确配置，会导致404错误。
因此，选择Hash模式还是History模式，需要根据具体的项目需求和技术要求来决定。如果要支持较老的浏览器，或者对SEO优化要求不高，可以选择Hash模式；如果要求URL更加友好，对SEO优化有要求，可以选择History模式。
展开
评论
点赞
#挑战每日一条沸点# 【Day8】 npm start 是一个在 Node.js 项目中经常使用的命令，它可以启动一个名为 "start" 的脚本。在 package.json 文件中，可以使用 "scripts" 字段来定义这个脚本，并且可省略run参数。
评论
点赞
#挑战每日一条沸点# 【Day7】 什么是npx？
npx是一个Node.js工具，它允许在不安装全局依赖项的情况下运行命令行工具。它的作用类似于npm，但是它提供了一种更方便的方式来运行项目中安装的命令行工具。
npx是一个Node.js工具，它允许在不安装全局依赖项的情况下运行命令行工具。它的作用类似于npm，但是它提供了一种更方便的方式来运行项目中安装的命令行工具。
评论
点赞
#挑战每日一条沸点# 【Day6】 Webpack splitChunks配置
splitChunks 可以用于将多个 JavaScript 文件中的公共代码提取到单独的文件中，以便在浏览器中缓存这些公共代码并减少重复加载，从而减小打包后的文件大小，优化页面加载速度。
具体来说，splitChunks 会在打包过程中分析模块之间的依赖关系，将多个入口文件中共用的代码提取到一个单独的文件中，这个文件可以被浏览器缓存，当其他入口文件需要这些代码时，它们可以直接从缓存中获取，避免了重复加载和执行冗余代码的问题。
示例：
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/, // 匹配node_modules路径
filename: "vendor.[chunkhash:4].js", // 打包后拆出来的文件名
chunks: "all", // 表明将选择哪些块进行优化。可选all、async和initial。all意味着甚至可以在异步和非异步块之间共享块。
minChunks: 1,// 最小引用次数
},
},
},
}
splitChunks 可以用于将多个 JavaScript 文件中的公共代码提取到单独的文件中，以便在浏览器中缓存这些公共代码并减少重复加载，从而减小打包后的文件大小，优化页面加载速度。
具体来说，splitChunks 会在打包过程中分析模块之间的依赖关系，将多个入口文件中共用的代码提取到一个单独的文件中，这个文件可以被浏览器缓存，当其他入口文件需要这些代码时，它们可以直接从缓存中获取，避免了重复加载和执行冗余代码的问题。
示例：
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/, // 匹配node_modules路径
filename: "vendor.[chunkhash:4].js", // 打包后拆出来的文件名
chunks: "all", // 表明将选择哪些块进行优化。可选all、async和initial。all意味着甚至可以在异步和非异步块之间共享块。
minChunks: 1,// 最小引用次数
},
},
},
}
展开
评论
点赞
#挑战每日一条沸点# 【Day5】 npm install命令详解
-S，–save 安装包信息将加到dependencies（生产阶段的依赖）
-D, –save-dev 安装包信息将加到devDependencies（开发阶段的依赖）
-O, –save-optional 安装包信息将加入到optionalDependencies（可选阶段的依赖）
-E, –save-exact 精确安装指定模块版本
-S，–save 安装包信息将加到dependencies（生产阶段的依赖）
-D, –save-dev 安装包信息将加到devDependencies（开发阶段的依赖）
-O, –save-optional 安装包信息将加入到optionalDependencies（可选阶段的依赖）
-E, –save-exact 精确安装指定模块版本
展开
评论
点赞
#挑战每日一条沸点# 【Day4】 浏览器Get和Post请求的区别：
1.参数传递方式不同：GET请求将参数附加在URL的末尾，而POST请求将参数放在请求的正文中。
2.安全性：GET请求的参数会直接暴露在URL上，而POST请求的参数则不会。因此，POST请求更加安全，特别是在传递敏感数据时。
3.请求长度：GET请求的URL长度有限制，通常在2048个字符以内，而POST请求则没有这个限制。
4.缓存：GET请求可以被缓存，而POST请求则不能，因为POST请求的结果可能会受到之前的请求的影响。
5.幂等性：GET请求是幂等的，执行一次和执行多次的结果是一样的。而POST请求不一定是幂等的，执行一次和执行多次的结果可能不一样。
1.参数传递方式不同：GET请求将参数附加在URL的末尾，而POST请求将参数放在请求的正文中。
2.安全性：GET请求的参数会直接暴露在URL上，而POST请求的参数则不会。因此，POST请求更加安全，特别是在传递敏感数据时。
3.请求长度：GET请求的URL长度有限制，通常在2048个字符以内，而POST请求则没有这个限制。
4.缓存：GET请求可以被缓存，而POST请求则不能，因为POST请求的结果可能会受到之前的请求的影响。
5.幂等性：GET请求是幂等的，执行一次和执行多次的结果是一样的。而POST请求不一定是幂等的，执行一次和执行多次的结果可能不一样。
展开
评论
点赞
#挑战每日一条沸点# 【Day3】 JavaScript的媒体查询Api：window.matchMedia，用于检查文档的当前宽度是否满足指定的媒体查询条件。它返回一个MediaQueryList对象，该对象包含了一个布尔值matches，表示当前文档是否满足指定的媒体查询条件。从性能角度来讲，window.matchMedia相对window.resize较好。
展开
评论
点赞