正则表达式汇总

正则表达式汇总

获取HTML页面所有的script标签

/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi

==能获取到所有的script,包括内联和外链,具体如何操作看业务需要==

获取手机号码

校验数字

  1. 数字:^[0-9]*$

  2. n位的数字:^\d{n}$

  3. 至少n位的数字:^\d{n,}$

  4. m-n位的数字:^\d{m,n}$

  5. 零和非零开头的数字:^(0|[1-9][0-9]*)$

  6. 非零开头的最多带两位小数的数字:^([1-9][0-9]*)+(.[0-9]{1,2})?$

  7. 带1-2位小数的正数或负数:^(\-)?\d+(\.\d{1,2})?$

  8. 正数、负数、和小数:^(\-|\+)?\d+(\.\d+)?$

  9. 有两位小数的正实数:^[0-9]+(.[0-9]{2})?$

  10. 有1~3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$

  11. 非零的正整数:^[1-9]\d*$^([1-9][0-9]*){1,3}$^\+?[1-9][0-9]*$

  12. 非零的负整数:^\-[1-9][]0-9"*$^-[1-9]\d*$

  13. 非负整数:^\d+$^[1-9]\d*|0$

  14. 非正整数:^-[1-9]\d*|0$^((-\d+)|(0+))$

  15. 非负浮点数:^\d+(\.\d+)?$^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$

  16. 非正浮点数:^((-\d+(\.\d+)?)|(0+(\.0+)?))$^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$

  17. 正浮点数:^[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]*))$

  18. 负浮点数:^-([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]*)))$

  19. 浮点数:^(-?\d+)(\.\d+)?$^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$

校验字符串

  1. 汉字:^[\u4e00-\u9fa5]{0,}$

  2. 英文和数字:^[A-Za-z0-9]+$^[A-Za-z0-9]{4,40}$

  3. 长度为3-20的所有字符:^.{3,20}$

  4. 由26个英文字母组成的字符串:^[A-Za-z]+$

  5. 由26个大写英文字母组成的字符串:^[A-Z]+$

  6. 由26个小写英文字母组成的字符串:^[a-z]+$

  7. 由数字和26个英文字母组成的字符串:^[A-Za-z0-9]+$

  8. 由数字、26个英文字母或者下划线组成的字符串:^\w+$^\w{3,20}$

  9. 中文、英文、数字包括下划线:^[\u4E00-\u9FA5A-Za-z0-9_]+$

  10. 中文、英文、数字但不包括下划线等符号:^[\u4E00-\u9FA5A-Za-z0-9]+$^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$

  11. 可以输入含有^%&',;=?$\"等字符:[^%&',;=?$\x22]+ 12 禁止输入含有~的字符:[^~\x22]+

特殊需求表达式

  1. Email地址:^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

  2. 域名:[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?

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

  4. 手机号码:^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$

  5. 电话号码(“XXX-XXXXXXX”、”XXXX-XXXXXXXX”、”XXX-XXXXXXX”、”XXX-XXXXXXXX”、”XXXXXXX”和”XXXXXXXX):^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$

  6. 国内电话号码(0511-4405222、021-87888822):\d{3}-\d{8}|\d{4}-\d{7}

  7. 身份证号(15位、18位数字):^\d{15}|\d{18}$

  8. 短身份证号码(数字、字母x结尾):^([0-9]){7,18}(x|X)?$^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$

  1. 帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线):^[a-zA-Z][a-zA-Z0-9_]{4,15}$
  1. 密码(以字母开头,长度在6~18之间,只能包含字母、数字和下划线):^[a-zA-Z]\w{5,17}$

  2. 强密码(必须包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间):^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$

  1. 日期格式:^\d{4}-\d{1,2}-\d{1,2}

  2. 一年的12个月(01~09和1~12):^(0?[1-9]|1[0-2])$

  3. 一个月的31天(01~09和1~31):^((0?[1-9])|((1|2)[0-9])|30|31)$

  4. 钱的输入格式:

  5. 1.有四种钱的表示形式我们可以接受:”10000.00” 和 “10,000.00”, 和没有 “分” 的 “10000” 和 “10,000”:^[1-9][0-9]*$

  6. 2.这表示任意一个不以0开头的数字,但是,这也意味着一个字符”0”不通过,所以我们采用下面的形式:^(0|[1-9][0-9]*)$

  7. 3.一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号:^(0|-?[1-9][0-9]*)$

  8. 4.这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分:^[0-9]+(.[0-9]+)?$

  9. 5.必须说明的是,小数点后面至少应该有1位数,所以”10.”是不通过的,但是 “10” 和 “10.2” 是通过的:^[0-9]+(.[0-9]{2})?$

  10. 6.这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样:^[0-9]+(.[0-9]{1,2})?$

  11. 7.这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样:^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$

23 8.1到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须:^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$

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

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

  3. 中文字符的正则表达式:[\u4e00-\u9fa5]

  4. 双字节字符:[^\x00-\xff] (包括汉字在内,可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1))

  5. 空白行的正则表达式:\n\s*\r (可以用来删除空白行)

  6. HTML标记的正则表达式:<(\S*?)[^>]*>.*?</\1>|<.*? /> (网上流传的版本太糟糕,上面这个也仅仅能部分,对于复杂的嵌套标记依旧无能为力)

  1. 首尾空白字符的正则表达式:^\s*|\s*$或(^\s*)|(\s*$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等),非常有用的表达式)
  1. 腾讯QQ号:[1-9][0-9]{4,} (腾讯QQ号从10000开始)

  2. 中国邮政编码:[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)

  3. IP地址:\d+\.\d+\.\d+\.\d+ (提取IP地址时有用)

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

fiddler的使用

工作原理

Fiddler是以代理WEB服务器的形式工作的,浏览器与服务器之间通过建立TCP连接以HTTP协议进行通信,浏览器默认通过自己发送HTTP请求到服务器,它使用代理地址:127.0.0.1, 端口:8888.
当Fiddler开启会自动设置代理,
退出的时候它会自动注销代理,这样就不会影响别的程序。不过如果Fiddler非正常退出,这时候因为Fiddler没有自动注销,会造成网页无法访问。解决的办法是重新启动下Fiddler。
主界面-总览
Fiddler的主界面分为 工具面板(上)、会话面板(左)、监控面板(右)、状态面板(下)

工具面板

工具面板
分别对应–> 说明注释、重新请求、删除会话、继续执行、流模式/缓冲模式、解码、保留会话、监控指定进程、寻找、保存会话、切图、计时、打开浏览器、清除IE缓存、编码/解码工具、弹出控制监控面板、MSDN、帮助
两种模式:

  1. 缓冲模式(Buffering Mode)fiddler直到HTTP响应完成时才将数据返回给应用程序。可以控制响应,修改响应数据。但是时序图有时会出现异常
  2. 流模式(Streaming Mode)fiddler会即时将HTTP响应的数据返回给应用程序。更接近真实浏览器的性能。时序图更准确,但是不能控制响应。

    会话面板

    会话面板
    会话面板
    会话面板的主要作用是:
  3. 显示当前抓取的请求的具体信息

会话面板图标
会话面板图标

监控面板

监控面板
监控面板

  • 统计报表
    1. 请求总数、请求包大小、响应包大小
    2. 请求起始时间、响应结束时间、握手时间、等待时间、路由时间、TCP/IP、传输时间。
    3. HTTP状态码统计。
    4. 返回的各种类型数据的大小统计及饼图展示

统计报表
统计报表

  • 时间轴

每个网络请求都会经过域名解析、建立连接、发送请求、接收数据等阶段。把多个请求以时间作为X轴,用图表的形式展现出来,就形成了瀑布图。在fiddler里,只要在左侧选中一些请求,右侧选择Timeline标签,就可以看到这些请求的瀑布图

时间轴
时间轴

  1. 绿色的请求表示这是一个“有条件的请求”。HTTP协议定义了5个条件请求头部,最常见的两个是“If-Modified-Since”和“If-None-Match”。服务器根据这两个头部来验证本地缓存是否过期,如果过期则正常返回资源的最新版本;否则仅仅返回304 Not Modified,浏览器继续使用本地缓存。包含条件请求头部的请求用绿色显示,否则用黑色。
  2. 有阴影线的请求是缓冲模式下的请求,实心的是流模式下的请求。Fiddler提供了缓冲(Buffering)和流(Streaming)两种抓包模式:缓冲模式下,Fiddler会在响应完成时才将数据返回给应用程序(通常是浏览器),这种模式下可以控制响应,方便地修改响应内容;流模式下,Fiddler会实时返回响应数据给浏览器,但没办法控制响应。一般使用流模式,瀑布图会更真实一些。这两种模式可以通过Fiddler的工具栏选择。特别的,通过Fiddler的“AutoResponder”功能返回的响应,只能是缓冲模式。
  3. 请求条颜色的不同对应着不同的响应类型,根据响应头的MIME Type来归类。例如浅绿色表示图片类型的响应;深绿色是JavaScript,紫色是CSS等。
  4. 请求中的黑色竖线,表示的是浏览器收到服务端响应的第一个字节的时刻。该时间段受到很多步骤的影响,比如:DNS解析、建立连接、发送请求、等待服务端响应等等。
  5. 请求条后面的图标表示响应的某些特征。比如:软盘图标表示该响应正文是从本地获得的,等同于服务端返回了304;闪电表示这是Fiddler的“AutoResponder”的响应;向下的箭头表示响应是302,需要重定向;红色感叹号说明该请求有错误发生(状态码是4XX或5XX)。
    ==PS:== 如果请求条后面有一个红色的X,说明服务端响应完该请求后,断开了连接。出现这种情况一般有两种可能:1. HTTP/1.0的响应头中没有Connection:Keep-Alive;2. HTTP/1.1的响应头中包含了Connection:close。使用持久连接可省去建立连接所消耗的资源,也可以减少TCP慢启动和其他拥塞控制机制带来的影响。
  6. 请求前面的红色圆圈表示该连接是新建的,绿色表示是复用的。上面的圆圈表示是浏览器到Fiddler的连接,下面的圆圈是Fiddler到服务端的连接。

状态面板

状态面板
状态面板

控制台Fiddler的左下角有一个命令行工具叫做QuickExec,允许直接输入命令。
常见的命令有:

命令 解释
help 打开官方的使用页面介绍,所有的命令都会列出来
cls 清屏(Ctrl + X 也可清屏)
select 选择会话的命令
?.png 用来选择png后缀的图片
bpu 截获request
bpafter 截获response

Request消息的结构

Request消息的结构
Request消息的结构

Response消息的结构

Response消息的结构
Response消息的结构

常用功能

  • 监听HTTPS

Fiddler不仅能监听HTTP请求并且默认情况下也能捕获HTTPS请求,Tool->Fiddler Option->HTTPS下面进行设置,勾选上“Decrypt HTTPS traffic”,如果不必监听服务器端的证书可以勾选上“Ignore server certification errors”,也可以跳过几个指定的HOST来缩小或扩大监听范围。

监听https

  • HOST切换

HOST切换
HOST

  1. 模拟各类场景
  2. 通过GZIP压缩,测试性能
  3. 模拟Agent测试,查看服务端是否对不同客户端定制响应
  4. 模拟慢速网络,测试页面的容错性
  5. 禁用缓存,方便调试一些静态文件或测试服务端响应的情况
  6. 根据一些场景自定义规则
    自定义规则
    自定义规则
  7. 低网速模拟有时出于兼容性考虑或对某处进行性能优化,在低网速下往往能较快发现问题所在也容易发现性能瓶颈,可惜其他调试工具没能提供低网速环境,而强大的fiddler考虑到了这一点,能够进行低网速模拟设置 Rules->Performance->Stimulate Modem Speeds
  8. Compare(对比文本)
    对比文本
    对比文本
  9. Composer(构造器)
    请求构造顾名思义就是我们可以模拟请求,也就是说我们可以借助Fiddler的Composer在不改动开发环境实际代码的情况下修改请求中的参数值并且方便的重新调用一次该请求,然后相比较两次请求响应有何具体不同。任何一个请求参数只要是合法的取值再次调用后都会有相应的响应,那么你想要哪一个合法的请求都能够构造出来,然后再次调用并查看返回的数据。
    返回JSON
    返回json
    将该请求鼠标左键单击拖入Fiddler右侧RequestBuilder标签内并修改原请求参数OutPutType=JSON为OutPutType=XML,然后点击Execute按钮再次触发调用请求。
    request builder
    request builder
    双击这次请求包在Inspectors标签下查看返回数据为XML格式,而JSON格式一栏为空:
    返回XML
    返回XML
  10. filter(过滤监控)
    对一个重新载入的页面进行抓包,如果包的条目过多而你需要关注的就只有几项,可以使用Fiddler的过滤器Filters进行抓包,那么抓包时只会抓取你希望抓到的包。切换到Filters标签勾选Use filter,以便激活过滤器,这样下面的过滤方式可以进行选择了。
    filter_1
    filter_1
    filter_2
    filter_2
  11. AutoResponder(重定向)
    所谓请求无非就是需要调用到的一些资源(包括但不限于JS、CSS和IMG等),所谓的重定向就是将页面需要调用的资源指向其他的资源(你能够控制或者可以引用到的资源)
    1. 你可以将前台服务器的诸多或者某个资源在本地做个副本,如果正常网络访问环境下该资源出现了bug而导致开发环境崩溃的话,可先将该资源重定向到本地副本。这样就可以继续进行开发调试自己的页面,从而能够大量节省资源维护的等待时间。
    2. 也可以将多人同时维护的某个JS文件复制一份到本地,当你的开发调试收到他人调试代码的干扰时,可将该JS的调用重定向到本地未被干扰的JS文件,然后就可以进行无干扰开发,功能开发完成并调试OK后再将代码合入到开发环境中,这样就可以避免受到他人干扰专心做自己的开发。通俗讲就是将JS文件脱离开发环境并不影响线上调试。
    3. 还可以将测试文件或者图片指向本地 —–> ==最常用==
      重定向
      重定向

关于package.json中npm依赖包版本前的符号含义解析

一般来说,版本号大体分为三个部分

major.minor.patch

主版本号.次版本号.修补版本号

1. version

版本号之前不带任何标记表示必须依赖这个版本的包

例如:"webpack": "3.6.0",

2. >

大于某个版本,表示只要大于该版本的安装包即可

例如:"node": "> 6.0.0"

3. >=

大于等于某个版本,表示只要大于或等于该版本的安装包即可

例如:"npm": ">= 3.0.0"

4. <

小于某个版本,表示只要小于该版本的安装包即可

例如:"http-proxy-middleware": "< 0.17.3"

5. <=

小于或等于某个版本,表示只要小于或等于该版本的安装包即可

例如:"not ie <= 8"

6. ~

大概匹配到哪个版本

如果minor版本号指定了,那么minor最大加1,而patch如果存在大于当前值

如果minor和patch版本号未指定,那么minor和patch版本号任意

如:~1.1.2,表示 >=1.1.2 <1.2.0,可以是1.1.2, 1.1.3, 1.1.4, 1.1.n

如:~1.1,表示 >=1.1.0 <1.2.0,可以是同上

如:~1,表示 >=1.0.0 <2.0.0,可以是1.0.0, 1.0.1, 1.0.2 ... 1.0.n, 1.1.n, 1.2.n ... 1.n.n

7. ^

版本号中最左侧的非0数字最大加1,其余部分,大于当前值

如:^1.1.2,表示 >=1.1.2 <2.0.0, 可以是 1.1.2, 1.1.3, ... 1.1.n, 1.2.n, ... 1.n.n

如:^0.2.3, 表示 >=0.2.3 <0.3.0, 可以是 0.2.3, 0.2.4, ... 0.2.n

如:^0.0, 表示 >=0.0.0 <0.1.0, 可以是0.0.0, 0.0.1, ... 0.0.n

8. x

x的位置表示任意版本
如:1.2.x, 表示可以是1.2.0, 1.2.1, ... 1.2.n

9. *

任意版本,
如:*,表示 >= 0.0.0的任意版本

10. version1 - version2

大于等于version1,小于等于version2
如:1.1.2 - 1.3.1,表示包括 1.1.21.3.1,以及他们中间的任意版本

11. ||

满足range1或满足range2,可以多个范围

如:<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0 表示满足这三个条件的版本都可以

vue中监听localstorage变化

vue中监听localstorage(sessionstorage)变化

主要是用到 storage_event 来实现

创建方法

在main中给 Vue.protorype 注册一个全局方法,然后创建一个 StorageEvent 方法,当我在执行sessionStorage.setItem(k, val) 的时候,初始化事件dispatchEvent(派发)事件。

*[^_^]: 派发目的是在设置数据后,通知window对象的

在vue原型上(main.js)添加方法:
方法

调用

在需要设置数据的组件中调用
调用

监听

在需要监听的组件中监听,需要明确的是,需要写在mounted生命周期中
监听

实际效果

实际效果是这样的:
效果

可以看到,在调用后我们能拿到有关更新的数据的所有值,然后就可以随心所欲了

GIT 常用命令

GIT 常用命令

  • ==删除远程分支== git push origin –delete 远程分支名(慎重)
  • ==删除本地分支== git branch -d 分支名
  • 如果本地分支没有merge到远程(和远程没有联系),则应用以下命令:
    git branch -D 分支名
  • ==克隆远程代码仓库== git clone ulr(远程仓库地址,一般为HTTPS开头)
  • ==查看分支名称== git branch 分支名 — 适用于切换本地分支名称
  • ==切换分支== git checkout 分支名
  • 一般会将上面两命令合二为一:
    新建XXX分支并切换到该分支

git checkout -b 分支名

  • ==更新远程分支到本地== git pull origin/远程分支名
  • 合并分支并解决冲突 git fetch 要合并分支名
  • ==清除掉所有代理信息== git config –global –unset-all http.proxy
    PS:是全局都被清除掉
  • ==提交代码到本地仓库== git add xxx
    一般如果需要提交的代码过多时,也可采用以下命令一次全部提交:

git add .

  • ==合并操作== git commit -am ‘xxx’ 其实是把git add 和git commit合起来操作了,当中的a是all的意思,意为:提交全部修改文件到本地仓库

PS: 新添加的文件不适用此命令

  • ==设置全局代理==

    1. git config –global https.proxy http://127.0.0.1:1080

    2. git config –global https.proxy https://127.0.0.1:1080

    3. git config –global –unset http.proxy

    4. git config –global –unset https.proxy

npm config delete proxy

  • ==设置全局用户名和邮箱==

    1
    2
    git config --global user.name xxx  //设置用户名
    git config --global password xxx //设置邮箱
  • ==在单独项目中设置用户名和邮箱==

    1
    2
    git config user.name xxx //设置用户名
    git config user.email xxx //设置邮箱
  • ==拉取远程分支并创建本地分支== git checkout -b messagerecord_20180809 origin/messagerecord_20180809
    以远程分支messagerecord_20180809创建本地分支messagerecord_20180809

  • ==修改本地分支名==

    1. 如果不在该分支,则:

      git branch -m 旧分支名 新分支名

    2. 如果在该分支,则:

      git branch -m 新分支名

  • ==默认推送到默认分支==
    git push origin

上面命令表示,将当前分支推送到origin主机的对应分支。

如果当前分支只有一个追踪分支,那么主机名都可以省略。

$ git push 如果当前分支与多个主机存在追踪关系,那么这个时候-u选项会指定一个默认主机,这样后面就可以不加任何参数使用git push。

$ git push -u origin master 上面命令将本地的master分支推送到origin主机,同时指定origin为默认主机,后面就可以不加任何参数使用git push了。

不带任何参数的git push,默认只推送当前分支,这叫做simple方式。此外,还有一种matching方式,会推送所有有对应的远程分支的本地分支。Git 2.0版本之前,默认采用matching方法,现在改为默认采用simple方式。

tasks(任务)、microtasks(微任务)、queues(队列) and schedules(日程安排)

Event Loop

看一个最简单的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
console.log('script start');

setTimeout(function () {
console.log('setTimeout');
}, 0);

Promise.resolve().then(function () {
console.log('promise1');
}).then(function () {
console.log('promise2');
});

console.log('script end');

输入的结果是什么呢?

  • script start
  • script end
  • promise1
  • promise2
  • setTimeout

为什么是上面的打印结果呢?
我们需要知道事件循环是如何处理任务和微任务的。
我们知道js是单线程,每个线程都有一个事件循环(Event Loop),所以它可以独立执行,而同一个源的所有窗口共享一个事件循环(Event Loop),所以它们可以同步通信。事件循环不断运行,执行排队的任务。
事件循环具有多个任务源,这些任务源保证该源内部的执行顺序(IndexedDB,Web SQL等不适用此规则),但是浏览器可以在每次循环时选择从哪个源中获取任务。原因是:允许浏览器优先考虑性能敏感的任务,比如用户输入之类的操作

Task

==task==任务的作用是便于浏览器可以从其内部进入JavaScript/DOM域并确保这些操作按顺序发生。在task任务之间,浏览器可以更新渲染。从鼠标单击到事件回调需要调度任务,解析HTML页面也是如此,比如例子中的setTimeout。
setTimeout等待给定的延迟然后为其回调安排为一个新的task任务。这就是为什么setTimeout会被记录(打印)在script end之后,因为script end是第一个task任务的一部分,setTimeout被放在了单独的task任务中。

Microtasks

==Microtasks==微任务通常排在当前正在执行的脚本之后发生,例如对一系列操作作出反应,或者在
没有新的task任务的情况下异步生成。只要没有其他的JavaScript处于正在执行中,那么在每个task任务结束时,就会回调后处理微任务队列。在微任务期间排队的任何其他微任务都会添加到队列的末尾并进行处理。Microtasks包括异步观察者回调模式、以及上面例子中的promise回调。
一旦promise执行,或者它已经结束,它就会为其返回回调排队到一个微任务。这确保了即使promise已经结束,promise的回调也是异步的。因此,.then() 返回的promise回调立即被当做微任务排队。这也就是为什么promise1和promise2是在script end之后记录,因为当前运行的task任务必须在处理microtasks微任务之前完成。promise1和promise2在setTimeout之前记录的原因是:微任务总是在下一个任务之前执行。

不同浏览器的不同表现

有些浏览器的记录结果为:script start,script end,setTimeout,promise1,promise2。原因是:他们在setTimeout之后运行promise回调。很可能他们将promise回调当做新任务的一部分而不是微任务。
这点是可以理解的。因为promise源自ECMAScript而不是HTML。ECMAScript具有类似于微任务的“jobs”概念。但是,普遍的共识是,promises应该是微任务队列的一部分,并且有充分的理由。

参考文章: 点击这里

CSS Object-fit属性

业务背景:

前两天在做业务的时候,突然发现,里边有很多的图片需要去处理,要适应很多不同尺寸的图片,虽然很头痛,做了很多种情况的兼容

后续思考:

是否可以找到一种方式,告诉图片应该以什么样的方式展示。比如是一个列表展示图片页,如果图片大小尺寸不一,如何最大程度的还原图片本身,也是一个需要思考的问题

最近找到一个比较好的办法去解决这个问题:
一个CSS属性:object-fit

object-fit

概念:

指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

我们也可以通过 ==object-position== 属性来切换被替换元素的内容对象在元素框内的对齐方式。

语法值:

  • fill

    被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不匹配,那该对象将被拉伸以适应内容框。

  • contain

    被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其宽高比,因此如果对象的宽高比和框的宽高比不匹配,该对象将被添加。

  • cover

    被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不匹配,那么该对象会被裁剪以适应内容框。

  • none

    被替换内容保持其原有尺寸。

  • scale-down

    内容的尺寸与nonecontain中的一个相同,取决于它们两个之间谁得到的对象尺寸更小

浏览器兼容性

object-fit属性的浏览器兼容性

可以看出一个很悲催的点,IE不支持该属性,其他现代浏览器的支持程度还蛮好
如果想把该属性兼容至IE,可点击这里参考

不同属性的具体表现

我们先大体看一下,不同属性值最后呈现出来的效果是什么样的
不同属性的具体表现

如果我们想有一个对比的话,可以看下图
object-fit属性对比图

以上为不同属性在不同宽高比下(具体来说是2:3和3:2两种宽高比下)的表现

具体内容可查看这里

VS Code 常用扩展一览

vs code作为一个轻量级且强大的源代码编辑器,从诞生之初就备受关注

我是从17年开始使用它,从开始用就爱上了它,它最大的特点就是生态强大,不管是官方还是民间,都是如此,依托微软强大的底层应用构建能力以及众多贡献者,vs code已经变成了当今最受欢迎的编辑器

我第一次用就爱上了它,并在使用过程中用到了一些有助于我们开发的插件(应用)

在这里做个整理,也算是个大家一个推荐~

==已勾选的是已应用的==

浏览器扩展:

  • open in browser : 允许您在默认浏览器或应用程序中打开当前文件
  • Debugger for Chrome: 在Chrome浏览器调试JavaScript代码(需在编辑器中设置断点)
  • Live Server:具有静态和动态页面的实时重新加载功能的本地开发服务器
  • Preview on Web Server:提供web服务器和实时预览功能
  • PHP Server :对于测试仅需要在客户端运行的 JavaScript 代码非常有用
  • Rest Client:您可以安装此工具以在编辑器内交互式运行HTTP 请求,而不是使用浏览器或 CURL 程序来测试 REST API 端点

未完待续…


代码格式化扩展

  • Document This : 自动在typescript和javascript文件中生成详细的jsdoc注释
    • 只能在==typescript==和==JavaScript==中才能生成
    • 只能在项目js和ts文件中才能生成,单独的js和ts文件无法生成
  • Beautify : 美化VScode内的代码(包括设置缩进等)
  • JavaScript Booster :一个牛逼的代码重构工具。具有多种编码操作,例如将 var 转换为 const 或 let ,删除冗余的 else语句,以及合并声明和初始化。很大程度上受到 WebStorm 的启发。

未完待续…


代码检查扩展

  • ESLint : 将eslint javascript集成到VS代码中
  • TSLint : 支持在VScode中检查Typescript

    未完待续…


代码提示扩展

  • Auto Close Tag : 自动添加html/xml标签关闭,与sublime/Visual Studio IDE类似
  • Auto Import : 自动查找、分析和提供所有可用导入的代码操作和代码完成。与类型记录和TSX一起工作
  • Auto Import-ES6,TS,JSX,TSX : 自动查找、分析和提供所有可用导入的代码操作和代码完成。使用javascript和类型记录
  • Auto Rename Tag : 自动重命名配对html/xml标记
  • HTMLHint :HTML文档格式提示扩展
  • IntelliSense for CSS class names in HTML : 基于工作区中的定义为html类属性完成CSS类名
  • CSS Peek : 允许通过CSS id和类字符串作为条件从html文件查看到各自CSS的定义并可以进行修改

未完待续…


代码片段扩展

  • HTML CSS Support : Visual Studio Code CSS Support for HTML Documents(CSS支持HTML文档)
  • HTML Snippets : VS Code html模板 有可能和上一个扩展冲突
  • VS Code JavaScript(ES6) snippets :目前最流行的,迄今为止安装量超过 120 万。此扩展为 JavaScript , TypeScript ,HTML,React和Vue扩展提供 ES6 语法支持
  • rxjs-snippets : 为开发人员提供支持rxjs代码片段的扩展

未完待续…


语法扩展

  • indent-rainbow : 使缩进更易读懂
  • JavaScript Atom Grammar :此扩展使用 Atom 编辑器中的 JavaScript 语法替换 Visual Studio Code 中的 JavaScript 语法
  • DotENV :支持.env文件语法高亮显示。如果您正在使用Node,请使用方便
  • Babel JavaScript :支持 ES201x JavaScript,React,FlowType和GraphQL代码的语法高亮显示

未完待续…


Node扩展

  • npm : 使用package.json验证已安装的软件包。确保已安装的软件包版本号正确,高亮显示package.json中缺少的已安装软件包以及尚未安装的软件包
  • npm Intellisense : 自动完成导入语句中的NPM模块
  • Path IntelliSense :它和Node.js 其实并不相关,但你肯定需要对本地文件的智能提示,这个扩展将自动补全文件名
  • Node exec :允许您使用==Node.js==执行当前文件或您选择的代码
  • View Node Package :使用此扩展快速查看 Node 包源,允许您直接从 VS Code 打开 Node 包仓库库/文档
  • Node Readme :快速打开npm包文档

未完待续…


GIT相关扩展

  • Git History : 可查看git日志、文件历史记录、比较分支或提交
  • Git Project Manager : 允许轻松地在git项目之间进行更改
  • GitLens–Git supercharged :git多人协作的时候需要查看日志,如果能在当前代码中查看到那是很方便的一件事,能省去很多时间去其他工具查看,提高工作效率
    • 每一行代码旁边都有日志
    • 也可以查看全部的日志,在VsCode左侧菜单栏,点击GitLens图标即可查看History
    • 还可以很方便的操作查看上下push记录
    • 有个不方便的地方就是不能复制每一次push的详细代码清单,所以只能使用命令log或者其他外部工具了
      使用命令方法是:
      1、右键查看指定push的日志,选择Copy Commit ID to Clipboard获得Commit ID,
      2、VsCode中使用快捷键 ctrl + ~ 启动终端,输入命令 git log --name-only -n1 CommitID即可得到下图的push代码清单

未完待续…


Markdown相关扩展

  • markdownlint : markdown代码的标记/通用线型和样式检查
  • Markdown Perview Enhanced :在VScode中支持markdown标记预览增强

未完待续…


框架相关扩展

  • Vetur : 在vscode中支持vue语法
  • Vue 2 Snippets : vuejs2.x语法扩展

未完待续…


其他实用扩展

  • One Dark Pro : 根据个人喜好更换VS Code的代码颜色主题
  • vscode-icons : vscode图标
  • SVG Viewer : 支持在VScode中查看SVG图标
  • Import Cost : 在编辑器中显示导入/要求包大小
  • Chinese(Simplified) Language Pack for VS Code : 适用于VScode的中文(简体)语言包
  • any-rule : 日常开发所需要的正则

未完待续…