跳到主要内容

· 3 分钟阅读

字符

元字符描述
*匹配任意字符
|或操作符
\ 转义

空白元字符

元字符说明
[\b]回退(并删除)一个字符(Backspace 键)
\f换页符
\n换行符
\r回车符
\t制表符
\v垂直制表符

字符集

元字符描述
[]匹配一组字符
[^]排除该字符集
[-]字符区间
\d = [0-9]任何一个数字字符
\D = [^0-9]任何一个非数字字符
\s=[\f\n\r\t\v]任何一个空白字符
\S=[^\f\n\r\t\v]任何一个非空白字符
\w = [a-zA-Z0-9_]任何一个字母数字或下划线字符_
\W = [^a-zA-Z0-9_]任何非一个字母数字或下划线字符_
\x十六进制 \x0A即字符 10
\0八进制\011 即字符 9

锚点

元字符描述
^字符串或行的开头
$字符串或行的结束
\b单词边界
\B非单词边界

标志

元字符描述
i忽略大小写
g全局
m多行

反向引用与环视

元字符描述
()子表达式
(?:)非捕获组
\1反向引用匹配 匹配第一个
(?=)向前环视
(?!)否定向前环视
(?<=)向后环视
(?<!)否定向后环视

量词

元字符描述
*匹配零个或多个
*?*的懒惰型
+匹配一个或多个
+?+的懒惰型
?匹配零个或一个(可选)
{n}匹配 n 次重复
{m,n}匹配至少 m 次且最多 n 次
{n,}至少 n 次
{n,}?{n,}的懒惰型

· 3 分钟阅读

很多时候,浮动被用于Web布局(还需要依赖清除浮动属性)。事实上,浮动并不是为布局而生。

浮动

什么是浮动?

如果把一个元素设置为浮动,那么其他的内容就会围绕这个元素进行流动。

浮动元素会脱离正常的文档流,但是依然对布局有影响

为什么使用浮动?

现实中的报刊,都会有一些图片围绕着文字。那么这种场景就特别适合浮动。

浮动API

浮动元素相对于父级元素进行浮动的。

Name: float
Value: left | right | none | inherit
Initial: none

left

浮动元素会自动生成display:block属性并浮动在左边。

浮动元素会自动生成display:block属性并浮动在右边。

注意点

不管是什么元素,浮动后都会得到display:block块级框。因此没必要手动申明display:block
多个浮动元素不会发生重叠
浮动元素比父级元素还要高,那么会影响浮动元素的后代元素(后面的元素)
浮动元素会浮动到负外边距上,看上去比父元素更宽
如果浮动元素与内容重叠,那么内容都会在浮动元素之上渲染。
  • 行内元素:边框、背景、内容都会在浮动元素之上渲染。
  • 块级元素:边框、背景在浮动元素之下,内容在浮动元素之上渲染

清除浮动

清除浮动是为了不让内容跟随浮动元素进行流动。

清除浮动API

Name: clear
Value: none | left | right | both | inherit
Initial: none

left

左边远离浮动元素

right

右边远离浮动元素

both

左右两边都远离浮动元素

注意点

clear原理是增加了元素的上外边距(marginTop),很多时候不知道元素需要下移左右,因此会给浮动元素添加下边距。

实践

想要一个左右布局,就可以简单是使用float: right

引用

https://drafts.csswg.org/css2/#propdef-float

https://drafts.csswg.org/css2/#propdef-clear

https://developer.mozilla.org/zh-CN/docs/Web/CSS/float

https://zh.learnlayout.com/

· 9 分钟阅读

React 团队发布了一个useEvent RFC

用于定义始终稳定的函数引用事件处理hook,解决hook存在的闭包陷阱问题。

能够代替部分useEffect,简化心智负担。

目前还没有发布

· 13 分钟阅读

在需要使用正则时搜一搜,复制粘贴改一改。有些时候看不太懂,只要能够跑的通就满意了,心里没有底,到底正不正确。又需要临时抱佛脚,并没有系统的去学习。学过之后过一段时间,就会忘记,反反复复,因此记录下来。

美国一位知名程序员杰米·加文斯基(Jamie Zawinski)说过一句话:

如果你有一个问题,你想到可以用正则来解决,那么你有两个问题了。

正则很难掌握和利用的工具。

既然这么难,使用的时候搜索以下,就解决问题了。为什么还要学习呢?

如果不熟悉一个技能的时候,遇见问题也想不到可以使用这个技术,根本就不会考虑这个技术。

什么是正则表达式

维基百科中的解释:

正则表达式(英语:Regular Expression,常简写为 regex、regexp 或 RE),又称正则表示式正则表示法规则表达式常规表示法,是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。在很多文本编辑器里,正则表达式通常被用来检索、替换那些匹配某个模式的文本。

简单来说正则就是用来匹配处理文本字符串

为什么要使用正则表达式

工作时经常用到正则表达式,例如文件格式匹配

· 15 分钟阅读

Emotion是一个专门为使用 JavaScript 编写 CSS 样式而设计的库

使用Emotion有两种主要的方法,一种是框架无关的;另一种是与 React 一起使用。

官网

GitHub

· 5 分钟阅读

传统开发模式

一般而言,在 Web 开发中,我们都是 CSS、HTML、JavaScript 三者进行分离的。

HTML 负责网页的结构

CSS 负责网页上面各个元素的展示样式(效果)。

JavaScript 负责网页与用户的交互(逻辑)。

将计算机程序分隔为不同部分的设计原则,就是关注点分离原则(Separation of concerns SoC)。因此 HTML、CSS、JavaScript 三者就是典型的应用关注点分离原则。

什么是 CSS-in-JS

CSS-in-JS是一种样式技术,使用 JavaScript 编写 CSS,也就是把 CSS 集成到 JavaScript 中。与我们的认知是背道而驰的

解析此 JavaScript 时,会生成 CSS(通常作为<style>元素)并附加到 DOM 中。