如何通过css变量实现主题切换?

2 月 6 日
阅读 1 分钟
845
目的采用css变量来切换应用的主题。手段1 定义好主题需要的css变量 {代码...} 2 全局引入上面定义的css变量 {代码...} 3 实现切换主题class的逻辑 {代码...} 4 在应用中各个位置引用全局引入的css变量 {代码...} 这样,当html元素的class在light和dark之间切换时,css变量--custom-background的值也会在white和black之间...

css之white-space

2 月 5 日
阅读 1 分钟
644
作用指明浏览器如何对待空白符。属性值normal去掉首尾空白符合并连续空白符将换行符和制表符转换为空白符,然后再执行2自动换行nowrap在normal的基础上,关闭自动换行pre保留首尾空格不合并连续的空格不转换换行符和制表符为空格关闭自动换行pre-wrap在pre的基础上开启自动换行pre-line去掉了pre的 保留首尾空格 和 不合...

css的文本换行之word-break

2 月 1 日
阅读 1 分钟
740
用途用于打断单词属性normal(浏览器默认表现)剩余位置无法容纳当前单词时:● 如果是首行,单词将溢出容器。● 如果非首行,将单词放到下一行,如果下一行仍然放不下,单词将溢出容器。break-all剩余位置无法容纳当前单词时,把单词打断为两部分,一部分塞到当前行的剩余位置,另一部分放到下一行,如果下一行容纳不下,...

css的文本换行之word-wrap

1 月 29 日
阅读 2 分钟
736
用途避免文本溢出容器属性normal(浏览器默认表现)剩余位置无法容纳当前单词时:如果是开头,单词将溢出容器。如果非开头,将单词放到下一行,如果下一行仍然放不下,单词将溢出容器。anywhere当前行剩余位置无法容纳当前单词时:如果是开头,打断单词。如果非开头,将单词放到下一行,如果下一行仍然放不下,则打断单...

react项目问题记录

1 月 16 日
阅读 3 分钟
976
这是由于useEffect在设计上决定的。useEffect接受一个函数,这个函数返回undefined或者一个函数(用于cleanup)。

js项目接入ts

2023-11-07
阅读 1 分钟
391
第一步 安装依赖yarn add typescript ts-loadertypescript核心ts-loader配合webpack编译第二步创建tsconfig.json文件第三步在webpack配置文件中添加ts-loader配置 {代码...}

event.target VS event.currentTarget

2023-10-25
阅读 1 分钟
405
定义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 分钟
691
什么是竞态条件?当你的程序依赖正确的响应顺序,但响应的顺序又无法保证时,可能会导致意外的结果,这就是竞态条件。举个用户界面的例子:在上图中,分别点击科技和生活tab时,期望能够展示对应的数据。我们来设想如下情况:点击科技按钮(高亮科技按钮)(数据2秒后返回)点击生活按钮(高亮生活按钮)(数据1秒后返回...

.gitignore的使用手册

2023-10-09
阅读 1 分钟
1.3k
避免将不必要的文件添加到版本管理系统中,比如前端的node_modules目录,该目录包含大量文件,如果将其添加到版本管理系统中,会使仓库变的庞大,不利于仓库的管理。
封面图

encodeURI VS encodeURIComponent

2023-09-24
阅读 3 分钟
981
因为网络标准RFC1738做了硬性规定,只有字符和数字以及一些规定内的特殊符号,才可以不经过编码用于url,换言之就是,如果你的url中包含了规定之外的符号,那它就是非法的url, 无法被服务器解析,也就无法访问到你想要的网络资源。为了解决这个问题,js就提供了encodeURI和encodeURIComponent来给这些规定之外的符号进行...

background-size的基础用法和不同值之间的差异

2023-09-17
阅读 2 分钟
730
background-size取值auto auto(默认值)containcoverwidth heightcontain背景图会在保证自己不被拉伸变形的前提下,来所缩放自身,完整的显示背景图。background-size: auto auto;background-size: contain优点:保证背景图不被拉伸变形保证背景图不被裁切缺点:如果背景图比例与元素不一致,就会出现背景图无法完整覆...

常用的css代码片段收集

2021-08-03
阅读 2 分钟
2.8k
flex导致文字省略失效单独使用文字省略,按预期工作:给元素加上flex,文字省略失效:解决方案:flex和文字省略不要放到一个元素上。flex布局中,文字溢出省略不生效的问题问题展示 {代码...} {代码...} 解决方案只需要给content加上一个min-width: 0,就能够解决。虽然width:0也能,但是在firefox上无效。 {代码...} c...

微信内h5页面打开小程序

2021-07-30
阅读 1 分钟
4.5k
由于wx-open-launch-weapp设置样式比较困难,故放弃对其设置样式,将wx-open-launch-weapp作为一个透明的占位元素,撑满父元素,然后在父元素上设置想要的样式,也能达到预期的功能。

文件导出

2021-06-11
阅读 3 分钟
3.5k
在后台管理系统中,我们经常会遇到文件导出这个需求,下面,我将几种常见的导出方式做一个简单的介绍,让大家在以后遇到此类需求时,能够切合实际情况,采取相对合理的方式。

vscode的jsconfig.json和tsconfig.js

2021-04-01
阅读 1 分钟
4.7k
如果你的项目是纯js,那么使用jsconfig.json就够了,但如果你的项目用了ts,那就必须用tsconfig.json。(tsconfig.json可以同时支持js和ts项目)

react组件解耦

2019-02-14
阅读 2 分钟
4.1k
观察上面的List组件,我们会发现ListItem被耦合在了List内部,当我们需要更换不同的ListItem时,需要深入到List中进行修改,这会引入风险。

javascript中的this, call, apply

2017-04-20
阅读 1 分钟
2.1k
不同场景中的this处于被对象调用的方法中处于普通函数中在构造函数中this的指向简单来说就是:谁调用,就指向谁在对象的方法中 {代码...} 调用者是obj,按照上面的简单规则谁调用就指向谁所以这里的this就是obj。在普通函数中 {代码...} 全局环境下所有的属性方法都属于window,所以这里其实隐藏了一个window,也是windo...

冒泡排序算法

2017-04-20
阅读 3 分钟
2.5k
由于外部循环的i变量每次进入内部循环都不会改变,也就是arr[i]的值进入内部循环后,都会以自身与arr[j](也就是整个数组的所有元素)比较一轮,结果是小于arr[i]的数值都会被放到数组的开头

javascript中的apply和call方法

2016-07-19
阅读 1 分钟
703
作用用于改变函数内部this的指向。示例函数默认规则:谁调用函数,this就指向谁。 {代码...} 借助call或apply可以改变这种默认行为 {代码...} 应用场景修正事件回调中的this {代码...} {代码...} 上面的this.id为btn,符合我们的预期。下面引入一个新的情况,我们需要在调用一个额外的函数: {代码...} 这时,this的指向...