- 博客(61)
- 收藏
- 关注
RSS订阅原创 JS执行机制（同步、异步[宏任务、微任务]）
同步：后一个任务等待前一个任务结束后才会开始执行。异步：后一个任务无需等待前一个任务结束就可以执行。一般情况，我们将异步任务又分为宏任务和微任务。宏任务：包含整个script代码块，setTimeout, setIntval、setImmediate、Ajax、DOM事件。微任务：Promise.then catch finally , process.nextTick。以上内容纯八股文，记住就好。虽说宏任务与微任务都是异步任务，那它们的执行顺序也是一样的吗？显而易见，答案是不一样。
2023-03-15 18:32:11
1033
原创 前端中常用的定时器：setTimeout与setInterval
在日常开发过程中，我们会经常性地使用定时器这一功能，而在前端开发中，最常见的定时器则为以下两类。是延时的时间一到，就会去调用这个回调函数，而这个函数只会被调用一次，调用结束该定时器也就结束。是每隔一个延时的时间，就会重新调用这个函数，直到该定时器被清楚或者网页被关闭。在日常开发中，定时器开启调用后一定要记得关闭，不然会消耗内存。
2023-03-15 10:41:48
515
原创 BFC简述
一、什么是BFC？BFC（块级格式化上下文），它是一个独立渲染区域，它的内部布局不受外部元素的影响。二、BFC的布局规则内部的盒子会在垂直方向上一个接一个放置。每个元素的左外边距都会与包含块的左边界相接。同一个BFC中的两个盒子margin会发生重叠，不论方向。BFC区域不会与float元素发生重叠。计算BFC高度时，浮动子元素也参与计算。BFC是一个独立区域，内外不互相影响。三、BFC触发条件float不为noneoverflow不为visibleposition不为stat
2022-03-16 18:10:35
982
原创 CSS中可以隐藏页面元素的方法
display：none很常见的一种方法，元素直接从页面上消失，不占据页面空间，会引发重绘重排。visibility：hidden将元素隐藏，不会消失，占据页面空间，不会重排，会导致重绘。opacity：0将可见度设置为0，元素不会消失，占据页面空间，不会重排，但可能会导致重绘。如果父元素使用opacity隐藏，其子元素则不能再使用opacity进行隐藏。height、width为0将元素宽高设置为0，元素不可见，不占据页面空间。...
2022-03-16 15:00:49
165
原创 em,rem,vw,vh之间的区别
emem是相对长度单位，它是基于父元素的字体大小。当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值。remrem也是相对单位，但它相对的只是HTML根元素font-size的值。vw，vhvw 就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度。在pc端中，指的是浏览器的可视区域。在移动
2022-03-16 14:45:07
2149
原创 标准盒模型与IE盒模型的区别
标准盒模型<style> .box { width: 200px; height: 100px; padding: 20px; }</style><div class="box"> 盒子模型</div>标准盒模型的模型图如上，不难看出它的宽高定义为：盒子总宽=width+padding+border+margin盒子总高=height+padding+border+margin所以标准盒子的width/h
2022-03-15 15:57:16
482
原创 Promise概述。
什么是promise？promise是一种异步编程的解决方案。promise是一个对象。promise分为三个状态。pending （进行） fulfilled （成功） rejected （失败） 。promise状态不受外界影响，一旦发生变化，不会再更改。如何创建promise？ Promise() 函数接收的是一个匿名函数回调 resolve 成功 reject 失败上面这两个参数都是函数执行。{ let promise = new Promise(f
2021-08-02 21:36:07
99
原创 前端中var、let、const的区别。
在JS中，声明变量的方式有三种，分别是var、let、const。其中let与const是ES6中声明变量的方式。此前，JS作用域只分为全局和局部。但在ES6中增加了一个块级作用域。块作用域由 { } 包括。{ //块级作用域 }var、let、const区别varvar 声明全局变量。声明在for循环中的变量，跳出for循环同样可以使用。且var声明的变量可以修改，未初始化值只会输出undefined，不会报错。letlet声明变量会限制作用域
2021-08-02 21:35:50
1312
原创 ES6箭头函数。
概念在es6中，我们被允许使用箭头()=>来定义函数。箭头函数多用于匿名函数的定义。箭头函数的特点主要是保持上下文指针一致。箭头函数的写法// 多参数let a = (num1, num2) => num1 * num2;// 可变参数let sum = (num1, num2, ...rest) => { let result = num1 + num2; for (let i = 0; i < rest.length; i++) {
2021-08-02 21:35:19
53
原创 ES6中类的继承。
通过 extends 和 super 继承：通过 class 子类名 extends 父类名 实现继承。在构造函数 constructor 里面须要写上 super(父类的参数)，即在子类中获得父类的this指针。{ //父类 class Person{ name; age; sex; weight;
2021-08-01 11:34:45
143
原创 ES6中的类。
class基本语法基本概述在es5中，如果要生成实例对象是通过构造方法和原型的组合模式形成的。而es6提供了更接近传统语言的方法。引入了class类的概念。由class类的关键字声明。 class Person { x; y; //构造函数 //构造函数实在类被实例化的时候默认执行 constructor(x, y) {
2021-08-01 11:25:06
57
原创 jQuery中的节点操作。
内部插入append(content|fn)将要添加的元素添加到指定元素的后边。prepend(content|fn)将要添加的元素添加到指定元素的前边。外部插入after（）将元素添加到指定元素外部的后边。before（）将元素添加到指定元素外部的前边。包裹wrap(html|ele|fn)元素包裹。unwrap()移除元素包裹。wrapAll(html|ele)包裹全部元素。wrapInner(html|ele|fn)移除全部元素包裹。替换replaceWith和
2021-07-23 17:24:39
93
原创 jQuery基础。
什么是jQuery？jquery（JavaScript和Query(查询)） 是一个框架库。封装了原生js,即是辅助JavaScript开发的库。jQuery 库中的 $() 是什么？$()函数是JQuery函数的别称，就是一种标志。$()函数用于将任何对象包裹成jQuery对象，接着就可以被允许调用定义在jQuery对象上的多个不同方法。版本问题1x版本兼容好，但文件较大。2x，3x文件小，但兼容差。jQuery的优势减少代码量，提高兼容性，简单好学。jquery可以链式操作 同
2021-07-23 17:08:01
106
1
原创 canvas
一、什么是canvas。canvas是HTML5提供的一个用于展示绘图效果的标签，原意画布、帆布，在HTML页面中用于展示绘图效果。二、canvas应用。数据表分析。特效。地图api。网页游戏。三、canvas基础。基本语法<canvas></canvas>1.width height 属性为canvas 绘制区域的宽高。注意： 不要直接使用style给 canvas元素设置宽高（元素的大小）getContext 返回绘制模型。参数是 2d。
2021-07-22 21:36:23
87
原创 js异常处理。
<script> /*try{ //抓异常的代码 } catch(e) { throw e;//抛出异常 } finally { //最后的代码 }*/ var txt='你好！' try{ method(txt); } catch(e) { /*throw e.message;*/ //consol
2021-07-21 22:48:48
47
原创 严格模式。
严格模式为什么使用严格模式？1.减少js代码的不规范使用和不合理运行。2.提高运行速度。严格模式类型1.全局严格2.局部严格<script> "use strict" // 以下的所有代码都处于严格模式 </script><script> function obj(){ "use strict" //该方法下的代码处于严格模式 }</script>严格模式内容1.不能使用
2021-07-21 22:09:06
103
原创 cookie缓存。
cookie缓存用来记录web页面的用户信息。为了解决HTTP协议的无状态性引入cookie。参数含义Namecookie的名称，一旦创建，不可更改Valuecookie的值，若值为Unicode字符，需要为字符编码。若值为二进制数据，需要使用BASE64编码Domain可以访问cookie的域名。如设置为。baidu.com，以baidu.com结尾的域名都可以访问这个cookiePathcookie的使用路径Expires/Max-Agecoo
2021-07-21 20:03:25
135
原创 设计模式——观察者模式（发布与订阅模式）。
观察者模式观察者模式通俗点讲就是上帝视角，其核心思想便是一对多。比方说在游戏公会中，公会中一些集体事件需要分发到每位会员信箱中，由于是同一个消息且分发到不同人手里，这可以称为观察者模式。每个对象发生改变时，相关依赖对象皆会得到通知并自动更新。var pubsub = { list: {},//存储订阅事件 subscribe: function (key, fn) { //添加订阅方法 if (!this.list[ke
2021-07-21 11:03:55
83
原创 设计模式之单例模式。
单例模式确保一个类只有一个实例，而且自行实例化并向整个系统提供这个实例。用一个变量来标志当前是否已经为某个类创建过对象，如果是，则在下一次获取该类的实例时，直接返回之前创建的对象。var Singleton = function( name ){ this.name = name; this.instance = null;};Singleton.prototype.getName = function(){ alert ( this.name );};Singleto
2021-07-12 19:52:40
34
原创 设计模式之工厂模式。
工厂模式不是制造具体的事例对象的,而是制造构造函数的。//实例化不同的人 function Factory(name, age, job) { var obj = new Object(); obj.name = name; obj.age = age; obj.job = job; obj.sleep = function () { console.log(this.name);
2021-07-10 23:07:30
32
原创 JavaScript中的继承——寄生继承。
寄生继承寄生继承相当于对原型继承的二次封装，并在二次继承中对继承的对象进行拓展，使其不仅拥有父类的属性方法也拥有新加的属性方法。function Person(name, age) { this.name = name; this.age = age; } Person.prototype = { sleep: function () { console.log(this.name + "在睡觉！");
2021-07-10 17:09:11
318
原创 JavaScript中的继承——组合继承。
组合继承//动物类 function Animal(name, sex) { this.name = name || 'Animal'; this.sex = sex || '未知'; this.sleep = function () { console.log(this.name + "在睡觉！"); } } //添加原型属性和方法 Animal.prototype = {
2021-07-10 16:15:25
48
原创 JavaScript中的继承——实例继承。
实例继承//动物类 function Animal(name, sex) { this.name = name || 'Animal'; this.sex = sex || '未知'; this.sleep = function () { console.log(this.name + "在睡觉！"); } } //添加原型属性和方法 Animal.prototype = {
2021-07-10 16:02:06
515
原创 JavaScript中的继承——构造继承。
构造继承使用父类的构造函数来增强子类。复制父类的构造属性给子类 (父类的原型复制不到)。 //动物类 function Animal(name, sex) { this.name = name || 'Animal'; this.sex = sex || '未知'; this.sleep = function () { console.log(this.name + "在睡觉！"); } }
2021-07-10 15:51:05
146
原创 JavaScript中继承——原型链继承。
1.原型链继承。原理：将父类的实例作为子类的原型对象。//动物整体大类 function Animal(name,sex) { this.name = name || 'Animal'; this.sex = sex || '无'; this.sleep = function () { console.log(this.name + "在睡觉"); } } //添加原型属性和方法 An
2021-07-10 10:43:23
219
原创 原生js加密解密。
原生js加密解密使用的是atob和btoa方法。1.btoa编码window.btoa(stringToEncode)2.atob解码window.atob(encodedData);(1)btoa 的 b 指的是普通字符, a 指的是Base64字符，因此，btoa表示普通字符toBase64字符，也就是Base64编码。(2)atob 的 a指的是Base64, b 指的是普通字符，因此，atob表示Base64字符to普通字符，也就是Base64解码。举例说明：<!DOCTY
2021-05-08 17:15:45
702
原创 原生Ajax书写兼容。
var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }.
2021-05-08 16:33:22
45
原创 前端中的常用快捷键。
快捷键。标签名+tab：快速生成标签对。按住滚轮拖动：选中多行进行同时编辑。标签名*个数+tab：同时编写多个相同的标签的快捷键。ctrl+/： 注释。shift + alt +F：代码格式化。（此快捷键在webstorm中无效）（用ctrl+alt+L）ctrl+shift+alt+N：通过一个字符快速查找位置。shift+ctrl+ ↑：上移当前行。shift+ctrl+↓：下移当前行。ctrl + shift+S：另存为。...
2021-04-22 14:40:11
932
原创 call()和apply()的作用与区别。
作用。都是用来修改函数的this指向问题。区别。它们在传递参数时传递的方式是不同的。call()方法可以传给该函数的参数分别作为自己的多个参数。但是apply()方法需要将实参封装到一个数组中统一传递。即使只有实参只有一个，也要放到数组中。...
2021-04-22 14:28:02
114
原创 瀑布流加载数据。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .content > div { posit
2021-04-09 11:25:20
365
原创 contains方法。
contains方法是js的原生方法，用于判断dom中的包含关系。contains方法只能判断dom元素的包含，参数是Element类型。var a=ahihs;var b=sahih;console.log(a.contains(b));//报错。<div id="parent"> <div id="children"></div></div>var A = document.getElementById('parent');var
2021-03-16 20:02:02
2228
原创 CSS盒模型塌陷。
盒模型塌陷的原因。当子元素设置外边距，导致父元素连带向下，就会导致盒子模型塌陷。例如以下情况。 <style> *{ margin: 0; padding: 0; } .btn{ width: 100px; height: 100px; background-color: #53e1ff; }
2021-03-16 19:39:35
130
原创 JSON数据格式。
概念。JavaScript Object Notation :JavaScript对象表示法(早期：在JavaScript中，用json来表示对象)例：var p = {“name”:“张三”,“age”:“20”,“sex”:“男”};json：现在多用于存储和交换文本信息的语法。取值类型。数字（整数或浮点数）字符串（在双引号中）逻辑值（true 或 false）数组（在方括号中） {“persons”:[{ },{ }]}对象（在花括号中） {“address”:{“province
2021-03-16 19:18:16
48
原创 JS中的get和set方法。
1.什么是get和set方法。get是获得属性的一种方法。set是设置属性的一种方法。get负责查询，不带任何参数。set负责设置，是通过参数的形式传递。2.get和set的使用方法。get和set是方法，所以可以进行判断。get一般是得到，需要返回。set是创建，不需要返回。每一个对象都有一个get和set方法。如果调用的是对象内部的属性，命名格式是变量名前面添加。3.get和set的定义。在对象初始化时定义。在对象定义后定义。//在对象初始化时定义。var ob
2021-03-16 17:11:26
23880
1
原创 前端中常见的符号。
在学习前端中经常有许多符号出现，可能有时候并不知道这是什么含义或者该在什么时候出现，此篇博客将会在此总结。1 () 表示函数执行。2.[ ] 表示语法模拟，表示模拟Array类的实例（=new Array()）。3.{ } 表示语法模拟，表示模拟Object类的实例（=new Object()）。4.// 表示语法模拟（正则对象），表示模拟RegExp类的实例（=new RegExp()）。HTML中的符号。引号。html属性中的值需要添加引号，单引号双引号都行，但是如果
2021-03-16 15:13:16
4052
原创 JS数组。
一、什么是数组。数组是一组数据的集合，其表现形式就是内存中的一段连续的内存地址。二、JS中数组的特点。1.定义时不需指定任何数据类型。2.定义时不需指定数组长度。3.可以存储任何数据类型的数据。数组的创建。1.隐式创建。2.实例化创建。3.创建数组并指定长度。//方法一 隐式创建var arr1 = [1,3,5,7,9];//方法二 实例化创建var arr2 = new Array(2,4,6,8,10);//方法三 指定长度var arr3 = new Array
2021-03-15 16:44:53
77
原创 JS中常用的字符串方法（String）
1.查找字符串。indexOf（从前往后找。）lastindexOf（从后往前找。）indexOf(‘需要找的字符’，从该索引开始找)找到返回索引位置，如果没有找到返回-1.var str = " abc defa";console.log(str.indexOf('c',2));//1search方法。console.log(str.search("f"));//72.元素替换。replace方法。 console.log(str.replace("a", 's'));
2021-03-08 17:23:00
121
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人