自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(61)
  • 收藏
  • 关注

原创 JS执行机制(同步、异步[宏任务、微任务])

同步:后一个任务等待前一个任务结束后才会开始执行。异步:后一个任务无需等待前一个任务结束就可以执行。一般情况,我们将异步任务又分为宏任务和微任务。宏任务:包含整个script代码块,setTimeout, setIntval、setImmediate、Ajax、DOM事件。微任务:Promise.then catch finally , process.nextTick。以上内容纯八股文,记住就好。虽说宏任务与微任务都是异步任务,那它们的执行顺序也是一样的吗?显而易见,答案是不一样。

2023-03-15 18:32:11 1033

原创 try、catch语句解析

try-catch。

2023-03-15 15:29:54 3076

原创 前端中常用的定时器:setTimeout与setInterval

在日常开发过程中,我们会经常性地使用定时器这一功能,而在前端开发中,最常见的定时器则为以下两类。是延时的时间一到,就会去调用这个回调函数,而这个函数只会被调用一次,调用结束该定时器也就结束。是每隔一个延时的时间,就会重新调用这个函数,直到该定时器被清楚或者网页被关闭。在日常开发中,定时器开启调用后一定要记得关闭,不然会消耗内存。

2023-03-15 10:41:48 515

原创 如何在不刷新页面的基础上刷新组件

不刷新页面的基础上刷新组件

2023-03-13 16:36:12 205

原创 解决前端“\n”不换行问题

解决前端"\n"不换行问题

2023-03-13 11:01:27 11720 3

原创 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 481

原创 Promise概述。

什么是promise?promise是一种异步编程的解决方案。promise是一个对象。promise分为三个状态。pending (进行) fulfilled (成功) rejected (失败) 。promise状态不受外界影响,一旦发生变化,不会再更改。如何创建promise? Promise() 函数接收的是一个匿名函数回调 resolve 成功 reject 失败上面这两个参数都是函数执行。{ let promise = new Promise(f

2021-08-02 21:36:07 98

原创 前端中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 1311

原创 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 86

原创 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 102

原创 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 513

原创 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 218

原创 原生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 113

原创 瀑布流加载数据。

<!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 364

原创 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 2224

原创 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 23855 1

原创 前端中常见的符号。

在学习前端中经常有许多符号出现,可能有时候并不知道这是什么含义或者该在什么时候出现,此篇博客将会在此总结。1 () 表示函数执行。2.[ ] 表示语法模拟,表示模拟Array类的实例(=new Array())。3.{ } 表示语法模拟,表示模拟Object类的实例(=new Object())。4.// 表示语法模拟(正则对象),表示模拟RegExp类的实例(=new RegExp())。HTML中的符号。引号。html属性中的值需要添加引号,单引号双引号都行,但是如果

2021-03-16 15:13:16 4050

原创 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 76

原创 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关注的人

提示
确定要删除当前文章?
取消 删除