前端常见概念 | 青训营笔记

JadeLM
63 阅读5分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天

常见概念

栈

基本数据类型 全局变量/局部变量

堆

引用数据类型 对象

==&===

==：比较两个对象在内存中的地址是否一致

同源

两个页面的协议、域名、端口都相同

同源策略

A网站的JavaScript不能和非同源的B网站交互

  1. 无法读取非同源网页的Cookie、LocalStorage、IndexedDB
  2. 无法接触非同源网页的DOM
  3. 无法向非同源地址发送Ajax请求（可以发送，但响应数据会被浏览器的同源策略拦截）

跨域

两个URL的协议、域名、端口不一致（和同源相反）

防抖

事件被触发后，延迟n秒再执行回调，若在 n 秒内被重复触发，则重新计时（只有最后一次被触发）

function debounce (fn, delay = 200) {
let timeout;
return function() {
 // 重新计时
 timeout && clearTimeout(timeout);
 timeout = setTimeout(fn.bind(this), delay, ...arguments);
}
}
​
const handlerChange = debounce(function () {alert('更新触发了')})
​
// 绑定监听
document.querySelector("input").addEventListener('input', handlerChange);

节流

n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效 （减少事件触发频率）

节流阀

一个标记，若为空可以执行，不为空，不能执行

操作执行前，判断节流阀是否为空，操作执行后，将节流阀置空

function throttle (fn, threshhold = 200) {
let timeout;
// 计算开始时间
let start = new Date();
return function () {
 // 触发时间
 const current = new Date() - 0;
 timeout && clearTimeout(timeout);
 // 如果到了时间间隔点，就执行一次回调
 if (current - start >= threshhold) {
   fn.call(this, ...arguments);
   // 更新开始时间
   start = current;
 } else {
   // 保证方法在脱离事件以后还会执行一次
   timeout = setTimeout(fn.bind(this), threshhold, ...arguments);
 }
}
}
​
let handleMouseMove = throttle(function(e) {
console.log(e.pageX, e.pageY);
})
​
// 绑定监听
document.querySelector("#panel").addEventListener('mousemove', handleMouseMove);
​

版本规范

如：2.24.6

  • 第1位数字：大版本
  • 第2位数字：功能版本
  • 第3位数字：BUG修复版本
版本号提升规则

只要前面的版本号增加了，后面的版本号要归零

HTTP请求方法

image-20220926175946040

HTTP响应状态码

image-20220926180525747

image-20220926180545859

image-20220926180615672

image-20220926180632290

image-20220926180650024

阻止事件冒泡

event.stopPropagation();

阻止表单默认提交

 $('#id').on('submit', function (e) {  
     e.preventDefault()
 })

表单类型

<form>
    <input type="text | radio | checkbox ...."/>
    /* html5 新表单类型 */
    <input type="email" /> //输入邮箱
    <input type="url" />    //输入网址
    <input type="number" value="5" step="2" />  //输入数字
    <input type="range" />  //可拉进度条，类似音量调节
    <input type="date" />   //选年月日
    <input type="datetime-local" /> //选年月日和本地时间(时&分)
    <input type="search" /> //和text相比多了个‘X’清空按钮
    <input type="color" />  //yan
    
    <input type="submit" /> /* 提交 */
    <input type="reset"> /* 表单重置按钮，点击重置表单中填写的信息 */
</form>

文本溢出

单行文本溢出

width:300px;    
white-space: nowrap; // 文本不会换行。
overflow: hidden;  // 溢出多余裁剪   
text-overflow:ellipsis; // 显示省略符号来代表被修剪的文本。

多行文本溢出

display: -webkit-box;  // 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示  
-webkit-box-orient: vertical;   // 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
-webkit-line-clamp: 3;    // 用来限制在一个块元素显示的文本的行数，根据需要写。
overflow: hidden; // 溢出多余裁剪

localStorage存取对象

localStorage.setItem("Key-name",JSON.stringify(this.object)) //存
let abc = localStorage.getItem("Key-name");  //取
abc = JSON.parse(abc);  //转换
console.log(abc.id)  //获取值

常用正则表达式

创建方式

1.通过RegExp对象创建
var regexp = new RegExp(/123/)

2.同过字面量创建
var regexp = /123/

使用方式

//.exec() 传入要匹配的源字符串，返回一个数组，第0项是匹配到的响应字符串
var reg = /123/
console.log(reg.exec("12345647987")[0]) //输出123

replace替换

str.replace( regexp/substr, replacement ) 
//regexp/substr 被替换的字符串或正则表达式
//replacement 替换为这个字符串
//返回一个替换之后的新字符串

replace默认替换第一个，可以加修饰符替换全局
str.replace( /123/g, replacement ) //全局匹配
str.replace( /123/i, replacement ) //忽略大小写
str.replace( /123/gi, replacement ) //全局+忽略d

语法参考

. - 除换行符以外的所有字符。
^ - 字符串开头。	// /^abc$/ 精确匹配，只能是abc这个字符串（就这三个字母）
$ - 字符串结尾。
\d,\w,\s - 匹配数字、字符、空格。
\D,\W,\S - 匹配非数字、非字符、非空格。
[abc] - 匹配 a、b 或 c 中的一个字母。
[a-z] - 匹配 a 到 z 中的一个字母。
[^abc] - 匹配除了 a、b 或 c 中的其他字母。
aa|bb - 匹配 aa 或 bb。
? - 0 次或 1 次匹配。
* - 匹配 0 次或多次。
+ - 匹配 1 次或多次。
{n} - 匹配 n次。
{n,} - 匹配 n次以上。
{m,n} - 最少 m 次，最多 n 次匹配。
(expr) - 捕获 expr 子模式,以 \1 使用它。
(?:expr) - 忽略捕获的子模式。
(?=expr) - 正向预查模式 expr。
(?!expr) - 负向预查模式 expr。

校验数字的表达式

  • 数字： ^[0-9]*$
  • n位的数字： ^\d{n}$
  • 至少n位的数字 ：^\d{n,}$
  • m-n位的数字： ^\d{m,n}$
  • 零和非零开头的数字： ^(0|1-9*)$
  • 非零开头的最多带两位小数的数字： ^(1-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](#)*){1,3} 或 ^+?1-9$**
  • 非零的负整数： ^-1-90-9"*或−[1−9]\d∗ 或 ^-[1-9]\d*
  • 非负整数： ^\d+或[1−9]\d∗∣0 或 ^[1-9]\d*|0
  • 非正整数： ^-[1-9]\d|0或((−\d+)∣(0+)) 或 ^((-\d+)|(0+))*
  • 非负浮点数： ^\d+(.\d+)?或[1−9]\d∗.\d∗∣0.\d∗[1−9]\d∗∣0?.0+∣0 或 ^[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?.0+|0
  • 正浮点数： ^[1-9]\d.\d|0.\d*[1-9]\d* 或 ^(([0-9]+.[0-9]*[1-9](#)*)|([0-9]*[1-9](#)*.[0-9]+)|([0-9]*[1-9](#)*))**
  • 负浮点数： ^-([1-9]\d.\d|0.\d*[1-9]\d*) 或 ^(-(([0-9]+.[0-9]*[1-9](#)*)|([0-9]*[1-9](#)*.[0-9]+)|([0-9]*[1-9](#)*)))**
  • 浮点数： ^(-?\d+)(.\d+)?或−?([1−9]\d∗.\d∗∣0.\d∗[1−9]\d∗∣0?.0+∣0) 或 ^-?([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 或 ^[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+或\w3,20 或 ^\w{3,20}
  • 中文、英文、数字包括下划线： ^[\u4E00-\u9FA5A-Za-z0-9_]+$
  • 中文、英文、数字但不包括下划线等符号： ^[\u4E00-\u9FA5A-Za-z0-9]+或[4˘E00−9˘FA5A−Za−z0−9]2,20 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}
  • 可以输入含有^%&',;=?"等字符： **[^%&',;=?\x22]+**
  • 禁止输入含有的字符： **[^]+**

特殊需求表达式

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

  • 域名：a-zA-Z0-9{0,62}(.a-zA-Z0-9{0,62})+.?

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

  • 手机号码： ^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$

  • 电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)： ^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$

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

  • 电话号码正则表达式（支持手机号码，3-4位区号，7-8位直播号码，1－4位分机号）: ((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)

  • 身份证号(15位、18位数字)，最后一位是校验位，可能为数字或字符X： (^\d{15})∣(\d18)|(^\d{18})|(^\d{17}(\d|X|x)$)

  • 帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)： ^a-zA-Z{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)$

  • 钱的输入格式：

    1. 有四种钱的表示形式我们可以接受:"10000.00" 和 "10,000.00", 和没有 "分" 的 "10000" 和 "10,000"： ^1-9*$
    2. 这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式： ^(0|1-9*)$
    3. 一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号： ^(0|-?1-9*)$
    4. 这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧。下面我们要加的是说明可能的小数部分： ^[0-9]+(.[0-9]+)?$
    5. 必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是 "10" 和 "10.2" 是通过的： ^[0-9]+(.[0-9]{2})?$
    6. 这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样： ^[0-9]+(.[0-9]{1,2})?$
    7. 这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样： ^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$
    8. 1到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须： ^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$
    9. 备注：这就是最终结果了,别忘了"+"可以用"*"替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里

  • xml文件： ^([a-zA-Z]+-?)+[a-zA-Z0-9]+.x|X[l|L]$

  • 中文字符的正则表达式： [\u4e00-\u9fa5]

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

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

  • HTML标记的正则表达式： <(\S?)>>.?|<.? /> ( 首尾空白字符的正则表达式：^\s*|\s*或(\s∗)∣(\s∗或(^\s*)|(\s*) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)**

  • 腾讯QQ号：1-9{4,} (腾讯QQ号从10000开始)

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

  • IPv4地址： ((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}

avatar
文章
阅读
粉丝