SF
这好像无法拒绝
这好像无法拒绝
注册登录
关注博客
注册登录
主页
关于
RSS
craco使用问题记录
热饭班长
2024-02-17
阅读 1 分钟
557
如何配置less? {代码...} 如何配置路径别名(alias) {代码...}
css modules的导入方式差异
热饭班长
2024-02-17
阅读 1 分钟
634
物料 {代码...} 导入.css后缀文件import './style.css'body样式生效,:global样式不生效import style from './style.css'body样式生效,:global样式不生效,style为空对象导入.less后缀文件import './style.less'body样式生效,:global样式不生效import style from './style.less'body样式生效,:global样式不生效,styl...
如何在vscode中调试代码?
热饭班长
2024-02-16
阅读 4 分钟
3.3k
调试前端代码1 在项目根目录下面创建./vscode/launch.json文件,内容如下 {代码...} 2 启动你的本地项目示例npm start3 按f5启动调试vscode会自动打开浏览器,然后跳转至上述配置中url指向的地址。4 添加断点在vscode中找到需要添加断点的代码行,点击行号左侧添加断点。5 刷新浏览器,当运行到断点处,代码就会停住,然...
对象方法用途记录
热饭班长
2024-02-16
阅读 1 分钟
833
entries注意:这是一个静态方法而非原型方法。用途:需要将对象转换为数组进行处理时。该方法接受一个对象,然后返回一个数组,该数组的每个元素为一组对象的键名和键值。 {代码...} 用于结合map、filter、reduce等声明式函数进行无副作用的数据加工。下面是对obj进行遍历并统计每个人的合计得分示例: {代码...} Object....
数组方法用途记录
热饭班长
2024-02-15
阅读 1 分钟
617
some接受一个函数,然后some会使用这个函数遍历整个数组,如果该函数至少有一次返回true,则some返回true,否则返回false。
如何通过css变量实现主题切换?
热饭班长
2024-02-06
阅读 1 分钟
1.2k
目的采用css变量来切换应用的主题。手段1 定义好主题需要的css变量 {代码...} 2 全局引入上面定义的css变量 {代码...} 3 实现切换主题class的逻辑 {代码...} 4 在应用中各个位置引用全局引入的css变量 {代码...} 这样,当html元素的class在light和dark之间切换时,css变量--custom-background的值也会在white和black之间...
css之white-space
热饭班长
2024-02-05
阅读 1 分钟
855
作用指明浏览器如何对待空白符。属性值normal去掉首尾空白符合并连续空白符将换行符和制表符转换为空白符,然后再执行2自动换行nowrap在normal的基础上,关闭自动换行pre保留首尾空格不合并连续的空格不转换换行符和制表符为空格关闭自动换行pre-wrap在pre的基础上开启自动换行pre-line去掉了pre的 保留首尾空格 和 不合...
css的文本换行之word-break
热饭班长
2024-02-01
阅读 1 分钟
977
用途用于打断单词属性normal(浏览器默认表现)剩余位置无法容纳当前单词时:● 如果是首行,单词将溢出容器。● 如果非首行,将单词放到下一行,如果下一行仍然放不下,单词将溢出容器。break-all剩余位置无法容纳当前单词时,把单词打断为两部分,一部分塞到当前行的剩余位置,另一部分放到下一行,如果下一行容纳不下,...
css的文本换行之word-wrap
热饭班长
2024-01-29
阅读 2 分钟
928
用途避免文本溢出容器属性normal(浏览器默认表现)剩余位置无法容纳当前单词时:如果是开头,单词将溢出容器。如果非开头,将单词放到下一行,如果下一行仍然放不下,单词将溢出容器。anywhere当前行剩余位置无法容纳当前单词时:如果是开头,打断单词。如果非开头,将单词放到下一行,如果下一行仍然放不下,则打断单...
react项目问题记录
热饭班长
2024-01-16
阅读 3 分钟
1.1k
这是由于useEffect在设计上决定的。useEffect接受一个函数,这个函数返回undefined或者一个函数(用于cleanup)。
js项目接入ts
热饭班长
2023-11-07
阅读 1 分钟
614
第一步 安装依赖yarn add typescript ts-loadertypescript核心ts-loader配合webpack编译第二步创建tsconfig.json文件第三步在webpack配置文件中添加ts-loader配置 {代码...}
event.target VS event.currentTarget
热饭班长
2023-10-25
阅读 1 分钟
610
定义event.target为触发事件的元素。event.currentTarget为绑定事件处理函数的元素。示例代码 {代码...} 事件处理程序绑定在div上当我们点击div时:event.target为divevent.currentTarget为div。当我们点击button时:event.target为button。event.currentTarget为div。 {代码...} 事件处理程序绑定在button上当我们点击di...
竞态条件(Race condition)
热饭班长
2023-10-18
阅读 2 分钟
955
什么是竞态条件?当你的程序依赖正确的响应顺序,但响应的顺序又无法保证时,可能会导致意外的结果,这就是竞态条件。举个用户界面的例子:在上图中,分别点击科技和生活tab时,期望能够展示对应的数据。我们来设想如下情况:点击科技按钮(高亮科技按钮)(数据2秒后返回)点击生活按钮(高亮生活按钮)(数据1秒后返回...
.gitignore的使用手册
热饭班长
2023-10-09
阅读 1 分钟
1.6k
避免将不必要的文件添加到版本管理系统中,比如前端的node_modules目录,该目录包含大量文件,如果将其添加到版本管理系统中,会使仓库变的庞大,不利于仓库的管理。
encodeURI VS encodeURIComponent
热饭班长
2023-09-24
阅读 3 分钟
1.3k
因为网络标准RFC1738做了硬性规定,只有字符和数字以及一些规定内的特殊符号,才可以不经过编码用于url,换言之就是,如果你的url中包含了规定之外的符号,那它就是非法的url, 无法被服务器解析,也就无法访问到你想要的网络资源。为了解决这个问题,js就提供了encodeURI和encodeURIComponent来给这些规定之外的符号进行...
background-size的基础用法和不同值之间的差异
热饭班长
2023-09-17
阅读 2 分钟
963
background-size取值auto auto(默认值)containcoverwidth heightcontain背景图会在保证自己不被拉伸变形的前提下,来所缩放自身,完整的显示背景图。background-size: auto auto;background-size: contain优点:保证背景图不被拉伸变形保证背景图不被裁切缺点:如果背景图比例与元素不一致,就会出现背景图无法完整覆...
常用的css代码片段收集
热饭班长
2021-08-03
阅读 2 分钟
3k
flex导致文字省略失效单独使用文字省略,按预期工作:给元素加上flex,文字省略失效:解决方案:flex和文字省略不要放到一个元素上。flex布局中,文字溢出省略不生效的问题问题展示 {代码...} {代码...} 解决方案只需要给content加上一个min-width: 0,就能够解决。虽然width:0也能,但是在firefox上无效。 {代码...} c...
微信内h5页面打开小程序
热饭班长
2021-07-30
阅读 1 分钟
4.8k
由于wx-open-launch-weapp设置样式比较困难,故放弃对其设置样式,将wx-open-launch-weapp作为一个透明的占位元素,撑满父元素,然后在父元素上设置想要的样式,也能达到预期的功能。
文件导出
热饭班长
2021-06-11
阅读 3 分钟
3.7k
在后台管理系统中,我们经常会遇到文件导出这个需求,下面,我将几种常见的导出方式做一个简单的介绍,让大家在以后遇到此类需求时,能够切合实际情况,采取相对合理的方式。
vscode的jsconfig.json和tsconfig.js
热饭班长
2021-04-01
阅读 1 分钟
5k
如果你的项目是纯js,那么使用jsconfig.json就够了,但如果你的项目用了ts,那就必须用tsconfig.json。(tsconfig.json可以同时支持js和ts项目)
react组件解耦
热饭班长
2019-02-14
阅读 2 分钟
4.3k
观察上面的List组件,我们会发现ListItem被耦合在了List内部,当我们需要更换不同的ListItem时,需要深入到List中进行修改,这会引入风险。
javascript中的this, call, apply
热饭班长
2017-04-20
阅读 1 分钟
2.2k
不同场景中的this处于被对象调用的方法中处于普通函数中在构造函数中this的指向简单来说就是:谁调用,就指向谁在对象的方法中 {代码...} 调用者是obj,按照上面的简单规则谁调用就指向谁所以这里的this就是obj。在普通函数中 {代码...} 全局环境下所有的属性方法都属于window,所以这里其实隐藏了一个window,也是windo...
冒泡排序算法
热饭班长
2017-04-20
阅读 3 分钟
2.6k
由于外部循环的i变量每次进入内部循环都不会改变,也就是arr[i]的值进入内部循环后,都会以自身与arr[j](也就是整个数组的所有元素)比较一轮,结果是小于arr[i]的数值都会被放到数组的开头
javascript中的apply和call方法
热饭班长
2016-07-19
阅读 1 分钟
799
作用用于改变函数内部this的指向。示例函数默认规则:谁调用函数,this就指向谁。 {代码...} 借助call或apply可以改变这种默认行为 {代码...} 应用场景修正事件回调中的this {代码...} {代码...} 上面的this.id为btn,符合我们的预期。下面引入一个新的情况,我们需要在调用一个额外的函数: {代码...} 这时,this的指向...
1
2
3
4
(current)
上一页
4
(current)
下一页