分类： 计算机

核心概念

事件循环是 JavaScript 处理异步操作的机制，它使得单线程的 JS 能够实现非阻塞 I/O 操作。

三大关键组成部分

1. 调用栈(Call Stack)：

   • 执行同步代码的地方
   • 后进先出(LIFO)结构

2. 任务队列(Task Queues)：

   • 宏任务队列：setTimeout、setInterval、I/O 等
   • 微任务队列：Promise.then、MutationObserver 等

3. 事件循环机制：

   • 不断检查调用栈和任务队列
   • 决定何时执行哪个任务

执行流程

1. 从宏任务队列取出一个任务执行（如 script 整体代码）
2. 执行过程中：
   • 同步代码立即执行
   • 遇到异步操作，注册相应回调
3. 当前宏任务执行完毕：

• 立即执行所有微任务
• 如果微任务产生新微任务，继续执行直到队列清空

4. 必要时进行UI 渲染
5. 从宏任务队列取下一个任务，开始新循环

执行顺序示例

console.log('1. 同步代码'); // 同步

setTimeout(() => console.log('4. 宏任务'), 0); // 宏任务

Promise.resolve().then(() => console.log('3. 微任务')); // 微任务

console.log('2. 同步代码'); // 同步

/* 输出顺序：
1. 同步代码
2. 同步代码
3. 微任务
4. 宏任务
*/

重要特点

• 微任务优先级高于宏任务：每执行完一个宏任务，就会清空微任务队列
• 避免阻塞：长时间同步代码会阻塞事件循环
• 不同环境差异：Node.js 与浏览器实现有细微差别

理解事件循环是掌握 JavaScript 异步编程的基础，有助于编写高效、无阻塞的代码。

CSS Hack

书写顺序：Chrome -> FF -> IE8 -> IE7 -> IE6

*	版本
_	IE6以下
\9	IE6+
*	IE7 以下
*+	IE7
\0	IE8+ 和 Opera

Media Queries

<link rel="stylesheet" href="big.css" media="screen and (min-width: 641px)">
<link rel="stylesheet" href="small.css" media="screen and (max-width: 640px)">
<link rel="stylesheet" href="style.css" media="screen and (min-width:640px) and (max-width:900px)">

Flex水平垂直居中

{
  display: flex;
  align-item: center;
  justify-content: center;
}

屏幕自动居中

{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  transform: translate(-50%, -50%);
}

单行文本溢出

{
  text-overflow: ellipsis;
  white-space: nowrap;
    overflow: hidden;
}

多行文本溢出

{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

ios平滑滚动效果

{
  -webkit-overflow-scrolling: touch;
}

清除浮动

:after {
  display: block;
  clear: both;
  content: " ";
}

字体&规范

• OOCSS、SMACSS、BEM

• 移动端字体

  {
  font-family: Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", sans-self;
  }

• PC端字体

  {
  font-family: Tahoma, Arial, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", Simsun, sans-self;
  }

• 移动 & PC 字体

  {
  font-family: Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Microsoft YaHei","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;
  }

中文两端对齐

{
  text-justify: inter-ideograph;
  text-align: justify;
}

省略文字

{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

文字适应浏览器宽度
```css
{
  white-space: pre-wrap;
  word-wrap: break-word;
}
```

### 自动换行
```css
{
  white-space: normal;
  word-wrap: break-word;
  word-break: normal;
}
```

### 三角形
```css
{
  width: 0;
  height: 0;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-bottom: 50px solid red;
}
```

### 自定义字体
```css
@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_657067_0jljwrqiuueo.eot');
  src: url('//at.alicdn.com/t/font_657067_0jljwrqiuueo.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_657067_0jljwrqiuueo.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_657067_0jljwrqiuueo.woff') format('woff'),
  url('//at.alicdn.com/t/font_657067_0jljwrqiuueo.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_657067_0jljwrqiuueo.svg#iconfont') format('svg');
}
```

### 移动端1px
```css
.box {
  position: relative;
  width: 100%;
  height: 1px;
  margin: 20px 0;
}
.box::after {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1px;
  content: '';
  background: red;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}
```

### calc 函数
```css
#div {
  position: absolute;
  left: 50px;
  width: calc( 100% / (100px * 2) );
  border: 1px solid black;
}
```

### css 禁止用户选择
```css
body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
```

### 消除 transtration 闪屏
```css
.css {
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}
```

### 去掉Chrome中input获得焦点时的颜色边框
```css
input {
  outline: none;
}
```

数字

判断数字

^[0-9]*$

n位的数字

^\d{n}$

至少n位的数字

^\d{n,}$

m-n位的数字：

^\d{m,n}$

零和非零开头的数字

^(0|[1-9][0-9]*)$

非零开头的最多带两位小数的数字

^([1-9][0-9]*)+(\.[0-9]{1,2})?$

带1-2位小数的正数或负数

^(\-)?\d+(\.\d{1,2})$

正数、负数、和小数

^(\-|\+)?\d+(\.\d+)?$

有两位小数的正实数

^[0-9]+(\.[0-9]{2})?$

有1~3位小数的正实数

^[0-9]+(\.[0-9]{1,3})?$

非零的正整数

^[1-9]\d*$
^([1-9][0-9]*){1,3}$
^\+?[1-9][0-9]*$

非零的负整数

^\-[1-9][]0-9"*$
^-[1-9]\d*$

非负整数

^\d+$
^[1-9]\d*|0$

非正整数

^-[1-9]\d*|0$
^((-\d+)|(0+))$

非负浮点数

^\d+(\.\d+)?$
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$

非正浮点数

^((-\d+(\.\d+)?)|(0+(\.0+)?))$
^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$

正浮点数

^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$
^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$

负浮点数

^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$
^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$

浮点数

^(-?\d+)(\.\d+)?$
^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$

字符

汉字

^[\u4e00-\u9fa5]{0,}$

英文和数字

^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$

长度为3-20的所有字符

^.{3,20}$

由26个英文字母组成的字符串

^[A-Za-z]+$

由26个大写英文字母组成的字符串

^[A-Z]+$

由26个小写英文字母组成的字符串

^[a-z]+$

由数字和26个英文字母组成的字符串

^[A-Za-z0-9]+$

由数字、26个英文字母或者下划线组成的字符串

^\w+$ 或 ^\w{3,20}$

中文、英文、数字包括下划线

^[\u4E00-\u9FA5A-Za-z0-9_]+$

中文、英文、数字但不包括下划线等符号

^[\u4E00-\u9FA5A-Za-z0-9]+$
^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$

可以输入含有^%&’,;=?$\"等字符

[^%&',;=?$\x22]+

禁止输入含有~的字符

[^~\x22]+

常用验证

Email地址

^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

域名

[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?

Internet URL

[a-zA-z]+://[^\s]*
^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$

国内电话号码(0511-4405222、021-87888822)

\d{3}-\d{8}|\d{4}-\d{7}

身份证号(15位、18位数字)，最后一位是校验位，可能为数字或字符X

(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)

帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)

^[a-zA-Z][a-zA-Z0-9_]{4,15}$

密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)

^[a-zA-Z]\w{5,17}$

强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-10 之间)

^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$

强密码(必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间)

^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$

日期格式

^\d{4}-\d{1,2}-\d{1,2}

一年的12个月(01～09和1～12)

^(0?[1-9]|1[0-2])$

一个月的31天(01～09和1～31)

^((0?[1-9])|((1|2)[0-9])|30|31)$

xml文件

^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$

中文字符的正则表达式

[\u4e00-\u9fa5]

双字节字符

[^\x00-\xff]

(包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))

空白行的正则表达式

\n\s*\r

(可以用来删除空白行)

HTML标记的正则表达式

<(\S*?)[^>]*>.*?|<.*? /> 

( 首尾空白字符的正则表达式：^\s|\s$或(^\s)|(\s$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)

中国邮政编码

[1-9]\d{5}(?!\d)

(中国邮政编码为6位数字)

IP地址

((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))

钱的输入格式：

• 有四种钱的表示形式我们可以接受:"10000.00" 和 "10,000.00", 和没有 "分" 的 "10000" 和 "10,000"：

    ^[1-9][0-9]*$

• 这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式：

    ^(0|[1-9][0-9]*)$

• 一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：

    ^(0|-?[1-9][0-9]*)$

• 这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧。下面我们要加的是说明可能的小数部分：

    ^[0-9]+(.[0-9]+)?$

• 必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是 "10" 和 "10.2" 是通过的：

    ^[0-9]+(.[0-9]{2})?$

• 这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：

    ^[0-9]+(.[0-9]{1,2})?$

• 这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：

    ^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$

• 1到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须：

    ^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$

备注：这就是最终结果了,别忘了"+"可以用"*"替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里