- 博客(47)
- 收藏
- 关注
RSS订阅原创 关于Promise那些事系列（2）
接着说Promise~一、Promise基本用法Promise实例生成之后，可以使用then方法执行resolved状态和rejected状态的返回函数，也就是上面说的操作成功和失败的结果传递出去。 promise.then(value=>{ //成功 },error=>{ //失败 })then方法可以接收两个回调函数作为参数。第一个回调函数是Promise对象状态变为 resolved时调用，第二个回调函数是Promise对象的状态变
2022-02-04 17:29:50
642
原创 关于Promise那些事系列（1）
上一篇写了同步和异步，也提到了回调函数，异步编程需要通过回调函数来完成。一、回调函数在日常项目工作中一定有需要多次异步请求到结果后在执行的代码，比如function f1(f2){ console.log(1) } function f2(f3){ console.log(2) } function f3(){ console.log(3) }
2022-02-03 16:25:12
808
原创 JavaScript的同步与异步1
同步和异步绝对是开发人员听起来很熟悉的亮哥词语，但是总是理解的不是很透彻，无法在开发中运用到，接下来是我的学习笔记。1.单线程单线程模型：JavaScript只在一个线程上运行。通俗点来说就是，JavaScript只能同时执行一个任务，其他任务都在后面排队等待被执行。虽然，JavaScript只在一个线程上运行，但是并不代表JavaScript引擎只有一个线程。反而恰恰相反，JavaScript引擎有多个线程，单个脚本只能在一个线程上运行，也就是我们说的主线程。JavaScript为什么使用单.
2022-01-29 16:05:03
1125
原创 ES7-ES12更新了哪些方法呢？
ES2016(ES7)1. Array.prototype.includes()判断数组里是否有特定的值，传回true/false语法arr.includes(searchElement[, fromIndex])fromIndex：可选参数，默认是0 let arr = ['es7','es8','es9','es10','a'] console.log(arr.includes("es7")); //true console.log(arr.includes("es12").
2022-01-10 15:00:20
573
原创 HTTP系列学习(5)—HTTP协议
这篇将针对 HTTP 协议结构进行讲解，主要使用 HTTP/1.1 版本。1. HTTP协议用于客户端和服务器之间的通信HTTP 协议和 TCP/IP 协议族内的其他众多的协议相同，用于客户端和 服务器之间的通信。 请求访问文本或图像等资源的一端称为客户端，而提供资源响应的一端称为服务器端。在两台计算机之间使用 HTTP 协议通信时，在一条通信线路上必定有 一端是客户端，另一端则是服务器端。 有时候，按实际情况，两台计算机作为客户端和服务器端的角色有可 能会互换。但就仅从一条通信路线来说，服务器端
2021-12-03 18:10:02
522
原创 HTTP系列学习(3)—确保可靠性的 TCP 协议
theme: cyanosis按照TCP/IP分层协议来划分的话，TCP位于传输层，是为了提供可靠的字节流服务。介绍所谓字节流服务就是，为了方便传输，将大块数据分割成以报文段为单位的数据包进行管理。可靠的传输服务就是，能够把数据准确可靠的传输给对方。TCP协议就是为了更容易的传送大数据才把数据进行分割，并且保证数据最终是否送达到对方。TCP三次握手简单版TCP既要保证大数据能够传输，也要保证可靠的传输，所以TCP采用三次握手策略的方式确保数据的准确无误的送达。握手过程中使用了TCP.
2021-12-03 11:30:14
458
原创 HTTP系列学习(1)—了解Web及网络基础
1.使用HTTP协议访问Web当我们在网页浏览器输入一个网址url的时候，web页面是经历了什么才展示在我们的屏幕上吗？ 当然Web页面不能是凭空显示出来的，根据Web地址栏提供的url,Web浏览器从Web服务器获取文件资源等信息，从而我们的页面才得以展示。像这种通过发送请求获取服务器资源的Web浏览器等，都可称为客户端（client）Web使用了一种名为HTTP(超文本传输协议)的协议作为规范，完成从客户端到服务器等一系列的运作流程。也可以说Web是建立在HTTP协议上通信的。2.HT
2021-12-03 11:23:43
160
原创 HTTP系列学习(4)—负责域名解析的 DNS 服务
介绍DNS（Domain Name System）服务是和HTTP协议一样位于应用层的协议。它提供域名到IP地址之间的解析服务。产生用户通常使用主机名或者域名来访问对方的计算机，而不是通过IP 地址访问，因为相比于 IP 地址的一串纯数字，字母和数字搭配的表现形式更符合人类的记忆习惯。但是计算机理解字母和数字的字符串就不擅长了，它更擅长处理一串纯数字。为了解决这个问题，DNS 服务就应运而生了。DNS 协议通过提供通过域名查找 IP 地址，或逆向从 IP 地址反查域名的服务。这里以淘宝为例，
2021-12-03 11:11:39
2819
原创 HTTP系列学习(3)—负责传输的IP的协议
介绍IP是Internet Protocol（网际互连协议）的缩写，是TCP/IP体系中的网络层协议。设计IP的目的是提高网络的可扩展性：一是解决互联网问题，实现大规模、异构网络的互联互通；二是分割顶层网络应用和底层网络技术之间的耦合关系，以利于两者的独立发展。根据端到端的设计原则，IP只为主机提供一种无连接、不可靠的、尽力而为的数据包传输服务。(来自百度百科)开始按层次分，IP位于网络层。几乎所有使用网络的系统都会用到IP协议。TCP/IP里面的IP指的就是网络协议。可能会有人把IP和IP地址搞
2021-12-01 11:15:08
273
原创 HTTP系列学习(2)—TCP/IP分层管理
1.TCP/IP分层管理TCP/IP分为：四层模型、五层模型和OSI七层模型先用一张图概括的熟悉一下这三种模型2.详细介绍接下来详细的介绍一下每一层的作用，再面试中最长问到的就是五层协议和OSI七层协议。2.1 物理层主要功能：透明的传输比特流。这层负责比特流在节点之间的传输，即负责物理传输。这层既与链路层有关，又与传输的介质有关。通俗来说就是用物理手段将计算机连接起来。 比特：信息量的度量单位，是信息量的最小单位。二进制数一位所包含的信息量就是1比特，如110就是3比特。
2021-11-29 10:19:35
1637
原创 数据结构-链表练习
再学习链表之后，一定要做题巩固，下面是关于链表比较常见的一些题目，上题目1. 将两个升序链表合并为⼀个新的升序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。示例：输⼊：1->2->4, 1->3->4输出：1->1->2->3->4->4实现思想：首先确定解题的数据结构：这里使用单链表比较快速假设我们把两个链表分别称作链表a和链表b。从链表头开始比较，链表a和链表b都是有序递增的，所以比较链表a和链表b的第一个元素的.
2021-11-16 18:06:55
731
原创 数据结构-双向链表的学习
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2021-11-11 17:36:38
448
1
原创 数据结构—单链表
链表和数组一样，都用于存储数据，但是他俩的存储机制却不相同。一、认识链表在开始学习单链表之前，我们先要知道什么是链表？它和数组的区别到底在哪里？1. 数组：数组的创建大多数需要申请一段连续的内存空间，且大小是固定的（大多数编程语言都是固定的），如果当前数组不满足容量大小，需要扩容（一般情况下是申请一个更大的数组, 比如2倍. 然后将原数组中的元素复制过去）。当我们想要再数组首位i或者中间插入一个新的元素时，需要大量元素位移。（尽管JS中Array提供的方法能够帮助我们完成，但是背后的远.
2021-11-04 14:30:19
197
原创 数组扁平化，去重，排序一套全搞定
文章目录数组扁平化1.使用数组的reduce()方法2.先转换成字符串，在通过字符串转换为数组完成3.普通递归实现4.使用扩展运算符实现总结数组扁平化数组扁平化，就是把多维数组变成一维数组。arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10]newArr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10]比如将arr变
2021-10-22 11:42:30
709
原创 js复习(10)——同步、异步？区别？回调函数？
同步和异步同步异步同步和异步的区别回调函数获取异步API返回值同步同步任务就是排队在主线程上执行的任务，只有前一个任务执行完毕，才会执行下一个任务。console.log('first')console.log('second')这里打印的结果是first-second，也就是说同在主线程的任务，会从上到下依次执行，前面代码会阻塞后面的代码执行。异步异步任务就是不进入主线程，而是进入到任务队列里面的任务。当主线程所有任务执行完毕之后，任务队列会通知主线程请求执行任务，该任务才会进入主线
2021-03-01 10:30:05
275
原创 js复习(9)——设计模式？工厂模式？构造函数模式？
什么是工厂模式？工厂模式是一种用来创建对象的设计模式。我们不暴露对象创建的逻辑，而是将逻辑封装在一个函数内，那么这个函数就可以成为工厂。工厂模式可以根据抽象的程度分为：简单工厂、工厂方法、抽象工厂。1.简单工厂 let factory = function (work) { function teacher() { this.name = '老师', this.work = ['上课', '备课'] } function stud
2021-02-27 19:15:07
96
原创 刷算法Day1——时间复杂度？空间复杂度？
一、为什么引入复杂度好的数据结构和算法能够大大的缩短代码的执行时间和存储空间，那么我们怎样去衡量呢？判断一段代码执行的效率最简单、最直接的办法就是放在机器上执行一遍，但是机器会有很大的局限性，比如：统计结果容易受测试环境的影响：不同系统、处理器的机器测试结果可能出现很大的不同。统计结果易受数据本身、数据规模影响：不同的数据、不同长度的数据都可能对测试结果产生巨大的影响。所以我们需要不受外界环境影响的、大致的估算算法执行效率的方法。也就是我们引入复杂度的原因。二、如何表示复杂度如何表示算法
2021-02-24 21:19:40
152
原创 CSS复习(3)——BFC
BFC(Block Farmatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于BFC中的元素与外部元素相互隔离，使内外的元素的定位不会相互影响。BCF的布局规则？先举一个例子<!--html代码--><div class="box1"></div><div class="box2"></div>/*css代码*/.box1 { width: 100px; height: 100.
2021-02-22 15:29:57
183
原创 CSS复习(2)
文章目录1. display:none和visibility:hidden的区别？1. display:none和visibility:hidden的区别？方式display:nonevisibility:hidden共同点能让元素消失能让元素消失区别会让元素完全从渲染树中消失，不占据任何空间元素依旧在渲染树上，只是不显示，占据渲染树空间非继承属性，子孙节点消失。由于节点从渲染树上消失，所以无法通过子孙节点显示。继承属性，子孙节点由于继承消失，但是可以通过v
2021-02-22 09:40:23
86
原创 计网复习(一)——输入URL到展示的过程
简略梳理输入网址缓存解析DNS域名解析通过三次握手建立TCP连接浏览器发送HTTP请求，请求数据包服务器->浏览器服务器处理收到的请求，将数据返回给浏览器浏览器收到HTTP响应读取页面内容，解析HTML文档，下载资源，创建DOM树，CSSOM树，执行JS脚本显示页面输入网址也就是直接输入我们想要跳转的网址即可，例如www.baidu.com缓存解析浏览器接收到输入的URL，首先进行的就是解析。按照浏览器缓存-系统缓存-路由器缓存顺序寻找是否有缓存，如果有缓存并且时间没有过
2021-02-20 11:32:45
200
原创 JS复习(8)——JS浅拷贝和深拷贝
浅拷贝是只拷贝一层，更深层次对象级别的拷贝只拷贝引用。深拷贝拷贝多层，每一级别的数据都会拷贝。通俗来说就是假设B复制了A，当A修改时，B如果变了就是浅拷贝，B如果没变就是深拷贝。深入点来说，就是B复制了A，如果B复制的是A的引用，那就是浅拷贝，如果B复制的是A的本体，那就是深拷贝。首先在进入正题之前，我们需要了解堆栈和数据类型堆栈和数据类型在JS中数据类型被分为两种：基本类型和引用类型基本类型：number，string，Boolean，null，undefined，它们的值被以键值对的形式保存
2020-10-02 12:08:23
201
原创 JS复习(7)——JS中的大难题this的指向
关于this的指向问题，记住最核心的一句话：哪个对象调用了函数，函数里面的this就指向哪个对象this的指向分为四种：普通函数的this指向全局对象windowssssss普通函数中的this指向全局对象 console.log(this); //window //普通函数种 function fn() { console.log(this) //window } fn() //声明函数中 var f = fu
2020-09-25 16:42:20
225
原创 CSS复习(1)——清除浮动
1. 为什么需要清除浮动？ 由于父级盒子在很多情况下，不方便给高度，但是子盒子浮动又不占有位置，就会影响下面的标准流盒子(标准流盒子上移)。2. 清除浮动的本质清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度如果父盒子本身又高度，则不需要清除浮动清除浮动之后，父级就会根据浮动的子盒子自动检测高度父级有了高度，就不会影响下面的标准流了3.实现给父元素添加高度.father { width: 200px; hei
2020-09-15 14:14:37
169
原创 JS复习(6)——普通函数和箭头函数
普通函数let a = function f(){ //执行语句}箭头函数let b = ()=>{ //执行语句}区别：this的指向不同 let obj = { name: 'zhangsan', //1.普通函数，指向它的直接调用者 f1: function() { console.log(this); }, //2.
2020-09-14 11:41:33
152
原创 JS复习(4)——数组扁平化
数组扁平化？数组扁平化庸俗来说就是将一个多维数组变成一个一维数组并归方法： reduce function flatten(arr) { return arr.reduce((result, item) => { return result.concat(Array.isArray(item) ? flatten(item) : item) },[]) }toString & split / jo
2020-09-08 09:22:08
99
原创 经典面试题---回流？重绘？如何优化？
回流和重绘是由于浏览器的再次渲染所引起的一个话题，我们首先要知道浏览器的渲染过程：通常来说，渲染引擎会解析HTML文档来构建DOM树，与此同时，渲染引擎也会用CSS解析器解析CSSDOM树。接下来，DOM树和CSSDOM树关联起来构成渲染渲染树(render tree)，然后浏览器根据渲染树布局，渲染整个页面。回流：当渲染树(render tree)的一部分或者全部元素因为尺寸，布局，显示和隐藏，或者元素内部的文字结构发生变化，导致页面需要重新构建页面的时候，回流就产生了。重绘：当一个元素的尺寸
2020-09-02 15:27:07
439
原创 JS复习(3)——搞懂JS的防抖和节流
文章目录防抖节流使用场景防抖就是在一定时间内，只执行最后一次节流就是在一定时间内只执行一次防抖连续点击按钮，只会在500内执行最后一次点击<body><button>防抖按钮</button><script> var btn = document.querySelector('button'); //防抖 btn.addEventListener('click', debounce()); functio
2020-09-02 09:51:59
251
1
原创 JS复习(5)——原型的修改和重写
再讲整题之前，我们需要对原型有一定的理解 //创建一个构造函数Cat function Cat(){} //为构造函数的原型添加属性 Cat.prototype.type="cat"; Cat.prototype.eat = function () { alert('我爱吃鱼') }; //创建实例对象 var cat1 = new Cat(); cat1.eat(); //弹出'我爱吃鱼'在每个实例对象里面都有一个[[
2020-08-27 21:37:49
1034
原创 JS复习(2)——面向对象？面向过程？创建对象？
文章目录第一部分面向对象？面向过程区别面向对象的特征第二部分创建对象的多种方式构造函数和普通函数的区别继承第一部分面向对象？总听说面向对象编程，那面向对象到底是什么？面向对象就是将构成问题的事物分解成多个对象，然后由对象之间分工和合作。面向过程面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的一次调用就可以了区别面向过程性能比面向对象高，适合跟硬件联系很紧密的东西。例如单片机。没有面向对象易维护、易复用、易扩展。面向对象编程具有灵活、代码可
2020-08-26 22:39:02
124
原创 一文搞懂前端安全
文章目录跨站脚本攻击(XSS攻击)简介分类XSS防御跨站请求伪造(CSRF)CSRF防御跨站脚本攻击(XSS攻击)简介XSS又称CSS(Cross SiteScript),跨站脚本攻击，是web程序中常见的漏洞，XSS属于被动式且用于客户端的攻击方式。其原理是攻击者有意向有XSS漏洞的网站中输入(传入)恶意的HTML代码，当用户浏览该网站时，这段HTML代码会自动执行，从而达到攻击的目的。如：盗取用户的cookie，破坏页面结构，重定向到其他网站等。分类反射型XSS原理： 反射型XS
2020-08-06 20:06:42
145
原创 Vue的一些总结（二）组件通信
文章目录组件通信父传子props子传父$emit$children / $parentprovide/injectref/$refseventBusvuex各个模块localStorage / sessionStorage$attrs / $listeners总结组件通信在知道组件之间是怎么通信的之前，我们先要知道组件之间都存在什么样的关系，对症下药才是王道。在这里A-B A-C B-D C-E之间是父子关系B-C是兄弟关系A-D A-E是隔代关系，也就是爷爷和孙子的关系D-E是堂兄
2020-08-05 21:37:50
234
原创 计网复习(二)——localStorage和seaaionStorage是啥？？？
webstoragewebstorage是本地存储，存储在客户端。包括localStorage和sessionStorage目标webstorage提供一种在cookie之外存储会话数据的路径。提供一种存储大量可以跨会话存在的数据的机制。作用域不同浏览器之间无法共享localStorage或sessionStorage中的信息。相同浏览器不同页面之间可以共享相同的localStorage(页面属于相同域名和端口)相同浏览器不同页面或者标签页无法共享 sessionStorage中的信息
2020-08-05 16:55:00
318
原创 JS复习(1)——__proto__和prototype
原型是JavaScript面向对象编程中非常重要的概念。今天就一次性battle明白~~~~走起~先上一张图，如果你看明白这张图了，基本就能解释出__proto__和prototype的关系和区别了。看不懂的继续走起~先来一个铺垫再解释构造函数使用构造函数来创建一个对象function Person(){ }var person = new Person;person.name = '张三'console.log(person.name) //张三Person就是一个构造函数，
2020-08-03 22:37:55
206
原创 Vue的一些总结~(一）计算属性/双向绑定/生命周期/vue-router
文章目录computed和watch的区别computed和watch的区别计算属性( computed)对于任何复杂逻辑，你都应当使用计算属性。计算属性是基于它们响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才重新求值。官方文档的例子<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ rever
2020-08-02 13:42:12
494
原创 自己动手封装Toast插件
先上一张效果图:普通的封装方式我们第一步先要封装这么一个(Toast)插件这里我把它封装在了src/components/common/toast/Toast.vue在需要调用的地方引入Toast.vue组件//Toast.vue<template> <div class="toast" v-show="show"> {{message}} </div></template><script>
2020-07-28 14:01:07
339
2
原创 说说Promise～
ES6中有一个非常重要和好用的特性就是Promise那么Promise到底是做什么的呢？简单来说，Promise就是异步编程的一种解决方案拿上图做讲解：从语法上来讲，Promise实际上是一个对象，可以获取异步操作的消息((resolve,reject) => {}) 明显也是一个函数，那么resolve , reject是什么？resolve和reject也是一个函数，通常情况下，我们会根据请求数据的成功或者失败来决定调用哪一个。如果是成功的，那么我们通常调用resolv
2020-07-26 12:46:35
127
原创 几分钟搞懂Vuex(State,Mutations,Actions)
文章目录StateGettersMutationActions这是Vuex官方给出的图片，看起来有点不好理解，上详解！！！！开始介绍之前，我们需要将Vuex挂载到Vue实例上面，这样我们才能在Vue的所有组件中都可以使用这些数据，这里我们store文件夹下面的index.js存放我们的Vuex代码。记得在入口文件main.js里面导入store对象State暂时可以将他看作是data中的属性，也就是我们当前的状态。state里面的这些属性都会被加入到响应式系统里面，而响应式系统会监听属性的变
2020-07-26 11:10:42
1912
原创 细说HTTP和HTTPS那些事~
文章目录HTTP和HTTPS的基本概念HTTP和HTTPS的发展历史HTTP VS HTTPSHTTPS的工作原理HTTPS 的缺点开始之前先看两张图片一张访问的域名是https://www.csdn.net，一张是http://www.12306.cnHTTP和HTTPS的基本概念１. HTTP：超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，可以使浏览器更加高效，网络传输减少。２
2020-07-22 22:24:31
1072
3
原创 Vue2.0和3.0的响应式原理
vue3.0在数据的响应式上无疑做了很大的优化，性能得到大大提升。虽然vue3.0还没有正式发布，但是各大公众号已经闹得不亦说乎。我们都知道vue2的响应式原理的实现依赖的是Object.defineProperty这个API,用它来为要实现响应式的数据设置getter和setter方法。如果数据多时就要循环遍历。循环遍历就会降低性能。所以vue3.0就摒弃了这个方法，改为使用ES6中的proxy来实现。而这个方法没有shim,不兼容低版本浏览器。所以vue3.0彻底摒弃了它们。下面我就用Vue
2020-07-19 23:04:53
506
原创 Vue基础知识Vue.extend详解
Vue.extend 属于 Vue 的全局 API，但是在实际业务开发中我们很少使用，因为使用extend写法比常用的Vue。components写法要繁琐一些。但是在一些独立组件开发场景中，Vue.extend + $mount 这对组合是我们需要去关注的。学习开始之前我们先看一眼官方文档是怎么介绍的Vue.extend(options)我这里直接截图过来了在vue项目中，我们有了初始化的根实例之后，页面之间都是通过router进行管理，组件也是通过import进行局部注册，相比于extend轻
2020-07-18 15:59:45
2775
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人