- 博客(149)
- 收藏
- 关注
RSS订阅原创 Promise对象基本API介绍
目录一、含义：二、Promise对象的特点：1、对象的状态不受外界影响。2、一旦状态改变、就不会再变，任何时候都可以得到这个结果。3、避免了层层嵌套的回调函数，解决回调地狱的问题。三、基本用法：1、Promise对象是一个构造函数，用来生成Promise的实例。2、Promise实例生成以后，可以用then方法分别指定Resolved状态和Rejected状态的回调函数。3、在Promise实例中调用resolve()或者reject()，应该在前面加上return.
2021-03-30 22:32:02
1464
原创 浏览器缓存介绍
一、数据库缓存：数据库会在内存划分一个专门的区域，用来存放用户最近执行的查询，这块区域就是缓存。二、应用层缓存：缓存数据库的查询结果，减少数据的压力。 缓存磁盘文件的数据，常用的数据放到内存，不用每次都去读取磁盘。 缓存某个耗时的计算操作。三、服务端缓存：一般针对静态文件类型，比如图片、css、js、html等静态文件。原因如下：请求更快：通过将内容缓存在本地浏览器或距离最近的缓存服务器（CDN），在不影响网络交互的前提下可以大大加快网站加载速度。 节省带宽：对于已缓存的文件
2021-03-21 17:19:14
326
1
原创 let、var与const的区别
let：1、所声明的变量，只在let命令所在的代码块内有效。 经典案例for循环var a = [];for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); };}a[6](); // 10 变量i是var命令声明的，在全局范围内有效，所以全局只有一个变量i,每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的i指向的就是全局i,所有数组a的成员里面的i指向的都是同一个i。var a
2021-03-13 22:13:38
166
原创 Vue源码解析--AST抽象语法树
一、概念介绍：在开发Vue的时候编译器会将模板语法编译成正常的HTML语法，而直接编译的时候是非常困难的，因此此时会借助AST抽象语法树进行周转，进而变为正常的HTML语法，使编译工作变得更加简单。抽象语法树的本质上是一个JS对象，Vue在审视所有HTML结构时是以字符串的新式进行的，最终将其解析为JS对象。AST抽象语法树服务于模板编译，将一种语法翻译为另一种语法。在Vue中将模板语法编译为HTML语法，自己作为中转站。二、抽象语法树与虚拟DOM节点的关系：图示：抽..
2021-02-09 17:16:02
3384
原创 Vue源码解析系列课程--Vue数据响应式原理笔记（对象、数组）
一、defineReactive函数：函数功能：创建闭包环境，完善Object.defineProperty(){}里面的getter()和setter()方法。不用闭包的情况（需要我们创建临时变量进行新旧值的周转）：var obj = {};var temp;Object.defineProperty(obj,'a',{ //getter get(){ console.log("试图访问obj的"+a+"属性"); return temp
2021-02-07 15:56:11
436
1
原创 diff算法的深入学习--由浅入深循序渐进（一篇文章搞定）
一、感受diff算法的心得：1. 最小量更新：在最小量更新中key很重要，key是这个节点的唯一标识。告诉diff算法在更改前后它们是同一个DOM节点。2. 虚拟节点：只有是同一个虚拟节点，才能进行精细比较，否则就是暴力删除旧的，插入新的。3. 如何定义同一个虚拟节点？：选择器相同且key相同。4. 同层比较：diff算法只进行同层比较，不会进行跨层比较。即使是同一层虚拟节点但是跨层了，那么就不会进行精细算法比较，而是暴力删除旧的，然后插入新的。二、深入diff核心思路：
2021-02-04 10:13:05
1148
原创 Vue源码系列解析课程--虚拟DOM和diff算法（手写h函数）
一、介绍：h函数是用来产生虚拟节点。比如这样调用h函数：h('a',{propr:{href:'https://www.baidu.com/'}},'百度');将得到这样的虚拟节点：{"sel":"a","data":{props:{href:"https://www.baidu.com"}},"text":"百度"};它表示的真正的DOM节点是：<a href="https://www.baidu.com/">百度</a>注：从虚拟DOM如何变
2021-02-01 11:01:12
329
原创 简单介绍虚拟DOM和diff算法
一、diff算法简介：上面代码的改变有很多种方式，第一种：我们可以将左边box这个div全都删掉然后替换成右边这个div（但这种方式感觉太大费周章），第二种方法：是我们可以保持原有的内容不发生变化只添加新增的内容。像第二种这样进行精细化对比实现最小量更新我们称为diff算法。二、虚拟DOM ：用JavaScript对象描述DOM的层次结构。DOM中的一切属性都在虚拟DOM中有对应的属性。diff算法是在两个虚拟DOM之间计算的，新虚拟DOM和老虚拟DOM进行diff(精细化比较.
2021-01-30 17:10:15
740
原创 Vue源码探索--mustache模板引擎（把模板字符串编译为虚拟DOM并渲染出真实DOM）下篇
注：在上篇中我们实现了将模板字符串转换为tokens数组，那么这一篇我们来聊聊将tokens数组结合数据并转换为真是DOM渲染出来的过程。一、图示：这一篇我们将来实现红框里面的过程。二、代码演示：1. index.js(入口文件)：import parseTemplateToTokens from './parseTemplateToTokens.js'import renderTemplate from './renderTemplate.js';import lookup.
2021-01-30 11:51:19
243
原创 Vue源码探索--mustache模板引擎（把模板字符串编译为虚拟DOM并渲染出真实DOM）上篇
注：上一基础篇我们了解到什么是模板引擎以及如何使用，这一篇我们通过尝试写一些底层源码来深入理解其工作流程（把模板字符串编译为虚拟DOM并渲染出真实DOM）。一、正则实现简单模板数据填充：最简单模板引擎实现机理，利用的是正则表达式中的replace()方法：<div id="container"></div></body><script src="../js/mustache.js"></script><script&g
2021-01-27 14:55:00
550
2
原创 Vue源码探索--mustache模板引擎（基本使用）
一、什么是模板引擎？模板引擎是将数据变为视图最优雅的解决方案。二、将数据变为视图的方法：1、纯DOM法通过原生JS分别创建（document.createElement（" "））不同的标签把子元素的标签添加(appendChild())到父元素的内容上。 <ul id="list"> </ul> <script> var arr = [ { "name": "小明",...
2021-01-25 11:45:11
650
原创 JavaScript继承--原型式继承
一、原型式继承的由来：克罗克福德介绍了一种实现继承的方法，这种方法并没有使用严格意义上的构造函数，而是借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型。其给出的函数如下： function Object(o){// 临时性的构造函数 function F() {} F.prototype = o; return new F(); }解释：（1）在object函数内部，先创建了一个临时性的构造
2021-01-22 20:22:03
140
原创 JavaScript继承--组合继承
组合继承有时候也称为伪经典继承，指的是将原型链和借用构造函数的技术组合到一起，从而发挥二者之长的一种继承模式。其背后的模式是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又能够保证每个实例都有它自己的属性。 function SuperType(name){ this.name = name; this.colors = ["red","blue","green"]; }
2021-01-22 16:39:11
116
原创 JavaScript继承--借用构造函数继承
目录一、知识回顾：二、借用构造函数实现继承：三、借用构造函数的问题：一、知识回顾：在学习新知识之前我们简单回顾一下 call、apply、bind方法的使用：call和apply的共同点是能够改变函数的执行时的上下文，将一个对象的方法交给另一个对象来执行，并且是立即执行的；bind() 方法创建一个新的函数，在调用时设置 this 关键字为提供的值。1、call方法的使用：a：语法：Function.call(obj,[param1[,param2[,…[,para..
2021-01-22 15:08:58
687
原创 JavaScript继承--原型链继承详解
一、回顾原型概念：在学习原型链继承之前我们先简单回顾一下原型的概念：每个函数都有一个prototype属性，它默认指向一个空的Object对象（称为原型对象），原型对象里面有一个constructor属性，它指向函数对象。function foo(){ }console.log(foo.prototype.constructor == foo); //true构造函数、原型、实例的关系：每一个构造函数都有一个原型对象(Foo.prototype)、原型对象都包含一个指向构造
2021-01-21 18:08:31
244
原创 深拷贝与浅拷贝
一、数据类型：基本数据类型：String、Boolean、Undefined、null、Number。引用数据类型：Object(函数Functi on和数组Array是一种特别的对象)。代码演示：基本类型的复制：从一个变量向另外一个新变量复制基本类型的值，会创建这个值的一个副本，并将该副本复制给新变量。 let foo = 1; let bar = foo; console.log(foo===bar);// 修改foo变量的值并不会影响bar变量的..
2021-01-20 16:03:51
343
原创 Vue深入响应式的原理
核心点是：Object.defineProperty一、如何追踪变化：1. 把普通的JS对象传入Vue实例作为对data选项，Vue将遍历此对象所有的Property。并使用Object.defineProperty把这些property全部转为getter/setter。2. getter/setter在内部让Vue能够追踪依赖，在property被访问和修改时通知更变。3. 每个组建实例都对应一个watcher实例，在组建渲染过程中把“接触”过的数据property记为依赖。当依赖的se
2021-01-19 16:02:20
180
原创 Vue——MVVM理解
一、MVVM的组成：由Model、View、ViewModel三者组成。Model：代表数据模型 、数据对象（data），数据和业务逻辑都在Model层中定义。View：代表UI视图、模板页面，负责数据的展示。ViewModel：视图模型，View和Model的关系映射。数据库结构往往是不能直接跟界面控件一一相对应的，需要再定义一个数据对象专门对应View上的视图控件。ViewModel的职责就是把Model对象封装成可以显示和接受输入的界面数据对象。在MVVM架构下，View和Mode
2021-01-18 16:42:52
137
原创 TCP连接释放--四报文挥手
目录一、TCP四次挥手：二、为什么要经过2MSL时间而不直接进入关闭状态呢？一、TCP四次挥手：传输结束后，TCP通信的双方都可以释放连接，现在主机A中的TCP客户进程和主机B中的TCP服务器进程都处于连接已建立状态。假设主机A中的应用进程通知其TCP释放连接（主动关闭），TCP客户进程发送TCP连接释放报文段，并进入终止等待1状态，该报文段的首部终止位为1（FIN=1），确认位（ACK=1）表明这是一个TCP连接释放报文段，序号seq的值为u(它等于之前发送的报文最后一个字节.
2021-01-17 17:27:17
806
原创 TCP传输连接--建立连接阶段（TCP三次握手）
目录一、TCP相关概念：二、TCP连接建立过程中要解决的问题：三、TCP三次握手的过程：一、TCP相关概念：1.TCP是面向连接的协议。2.TCP是基于传输连接（不是物理连接，是逻辑上的连接）来传送TCP报文段。TCP运输连接的建立和释放是每一次面向连接的通信中必不可少的过程。3.TCP运输链接有三个阶段：（1）建立连接（三次握手） 。（2）数据传送。（3）释放连接(四次挥手)。4.TCP的运输连接管理就是使运输连接的建立和释放都能正常地进行。二.
2021-01-16 19:40:14
8711
原创 TCP报文段首部格式--详讲
目录一、介绍Tcp报文段首部：二、详解：一、介绍TCP报文段首部：TCP报文段主要是两个部分，一个是首部一个是数据部分。首部除了20字节的固定部分还包括选项（长度可变的字段）和填充字段（保证Tcp首部字节为4的整数倍，一般填充的都是全0字段）。图示：二、详解：1、端口号占的位数是16位，那么源端和目的端口占的位数为32位即4个字节。2、序号位占的是4字节。序号：在一个TCP连接中传送的字节流中的的每一个字节都按照顺序编号，本字节段表示本报文段所发送数据的第一个..
2021-01-16 10:08:44
1726
原创 CSS垂直居中总结
一、行内元素垂直居中注：行内元素不能设置宽高、但是可以设置padding,不能设置margin-top和margin-bottom但是可以设置margin-left和margin-right。1.设置padding-top和padding-bottom为相同的值。HTML .box{ padding-top: 30px; padding-bottom: 30px; padding-right: 20px;
2021-01-14 20:07:09
109
原创 原生AJAX实现过程
一、JavaScript异步编程异步是与同步相对的概念。同步：不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行。异步：异步过程的执行将不再与原有的序列有顺序关系,从主线程发射一个子线程来完成任务。简单理解：同步按代码的顺序执行，异步不按照代码的顺序执行，异步的执行效率更高。二、什么时候用异步编程？ 在前端编程中，我们在处理一些简短、快速的操作时，往往在主线程中就可以完成。主线程作为一个线程，不能够同时接受多方面的请求。所以，当一个事件没有结束时，界面将无法处理其他请求。 如
2021-01-14 14:21:28
124
原创 TCP、UDP协议特点以及区别
一、TCP协议特点TCP是面向连接（虚连接）的传输层协议。应用程序在使用TCP协议之前，需要先建立好一个TCP的连接，在传送数据以后再释放这个连接。虚连接：不属于传输层实际的物理连接（将这个数据报加上各个层次的首部之后放到链路上面传输，然后再到接收端一步又一步的解封装），而TCP协议的使用就好像两个进程之间建立的一点到另一点的这种点对点连接。每一条TCP连接只能有两个端点，每一条TCP连接只能是点对点的连接。TCP提供可靠交付的服务，无差错、不丢失、不重复、按序到达。（可靠有序，不丢不
2021-01-13 15:29:18
5012
原创 OSI七层模型总结
一、为什么要分层？ 封装对下层的变化。实现一个复杂、多功能的程序为了便于维护与拓展，程序的功能之间应该是解耦和的。因此复杂的程序之间都要分层。二、分层的基本原则：各层之间相互独立，每层只实现一种相对独立的功能。每层之间界面自然清晰，易于理解，相互交流尽可能少。结构上可分隔，每层都采用最合适的技术来实现。保持下层对上层的独立性，上层单向使用下层提供的服务。三、分层结构：7层OSI参考模型（法定标准）4层TCP/IP参考模型（事实标准）5层体系结构四、OSI参考模型为了解决计
2021-01-13 10:50:46
456
原创 深入理解CSS定位中的偏移
CSS中有三种基本形式的布局机制：普通流、浮动和绝对定位。利用定位可以准确定义元素的位置，或者是元素相对于其父元素、另一个元素、浏览器窗口的位置。一、Position定位：五个值：staticrelativefixedabsolutesticky1.static：HTML元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到投top、bottom、left、right的影响。HTML代码：<div class="box1"></div>
2021-01-12 19:27:20
1341
原创 CSS水平居中
一、使用text-align:1.子元素为行内元素：在其父元素上设置text-align:center;2.子元素为块级元素，子元素上添加 display:inline-block;使其变为行内块元素。缺点：子元素的文字会水平居中。二、使用 margin:0 auto;1、子元素为块元素。2、若子元素设置有宽度则可以使用绝对定位的盒模型属性，实现居中效果；若不设置宽度时，子元素被拉伸。三、absolute绝对定位：通过绝对定位的偏移属性实现绝对居中。1、配合trans
2021-01-12 15:49:42
386
5
原创 圣杯布局详解--浮动
圣杯布局是什么：圣杯布局是两边固定宽度，中间自适应的三栏布局。中间栏放到文档流前面，先行渲染。目的是为了解决三栏布局。浮动实现：实现效果：首先HTML：头部<header></header>标签，内容区域<div class="container"></div>里面包含中、左、右三个 div 标签。底部<footer></footer>标签HTML代码： //标题 <header>&l
2020-12-13 21:07:30
5872
原创 顺序存储二叉树
基本说明： 从数据存储来看，数组存储方式和树的存储方式可以相互转换，即数组可以转换成树，树也可以转换成数组。要求： 二叉树的结点以数组的方式存放。在遍历数组的时候仍然可以以前序遍历，中序遍历，后序遍历的方式完成结点的遍历。思路：首先我们创建一个类在里面定义一个数组，将主方法定义的数组存入到创建的类中。顺序存储二叉树的特点：顺序二叉树通常只考虑完全二叉树。第n个元素的左子结点为 2*n+1。第n个元素的右子结点为 2*n+2。第n个元素的父结点为（n-1）/2。n表示二叉树中的第几
2020-12-04 20:58:09
243
原创 二叉树删除指定节点
二叉树删除节点：要求：如果删除的节点是叶子结点，则删除该结点。如果删除的节点是非叶子结点，则删除该子树。思路：首先处理根节点：如果树是空树，
2020-12-04 11:06:42
3353
2
原创 二叉树--前序、中序、后序查询指定的节点
前序查找：思路分析：先判断当前结点的no是否等于查找的，如果是相等，则返回当前结点。如果不等，则判断当前结点的左子结点是否为空，如果不为空，则递归前序查找。左递归前序查找，找到结点则返回否则继续判断，当前结点的右子结点是否为空，如果不空，则继续向右递归前序查找。//定义一个二叉树public class binaryTreeDemo { public static void main(String[] args) { //先创建一个二叉树 BinaryTree binaryTree
2020-12-03 20:33:32
228
原创 二叉树--前序、中序、后序遍历
一、二叉树：树的种类很多，每个结点最多只能有两个子结点的一种形式成为二叉树。二叉树的子结点分为左结点和右结点。图示：二、前序遍历：分析：前序遍历先输出当前结点（初始的时候是根结点） 。如果左子结点不为空则递归继续前序遍历。如果右子结点不为空则递归继续前序遍历。public class binaryTreeDemo{ public static void main(String[] args) { //先创建一个二叉树 BinaryTree binaryTree = new B
2020-12-03 17:10:57
100
原创 2020-12-03
上上周把Vue的源码解析跟着视频看了一遍，上周把Vuex跟着视频看了一遍。这周想找一个Vue的项目跟着写一下，找的是尚硅谷的外卖项目。刚开始写就给我来了一个bug是关于stylus版本的问题找了好久没有解决，后来去项目视频的评论里面才找到解决问题，把版本改了项目就可以正常运行了。现在是把Vue教程里面讲的知识看了一遍但是距离深入了解还需要结合着项目进行。 从上周开始就看了一些计算机网络的内容，以前课上因为专业问题老师讲的比较浅，自己学的时候也不太理解。这次跟的这个视频讲的很好。最近这两天在学二叉树，
2020-12-03 15:01:02
85
1
原创 Vuex核心属性总结
Vuex是Vue的一个插件。一、概念：Vuex是对Vue应用中多个组件的共享状态进行集中式的管理（读/写）,Vue的应用是一个状态自管理的应用。二、Vuex的安装：NPM:npm install vuex --saveYarn:yarn add vuex三、学习：每一个Vuex应用的核心就是store(仓库)。“store”基本上就是一个容器，包含着你的应用中大部分的状态（state）。Vuex的结构图：Vuex包含五个核心概念：分别是 State、 Mutations、Acti
2020-11-27 20:29:57
133
原创 2020-11-22
学习： 最近在学习Vue ,这个星期Vue进行到源码解析。说实话看起来确实是不太好理解，一集视频半个小时但是一般都要看几遍才能看完，看的时候不理解光容易跑神，好在强迫自己耐下性子慢慢看下去，目前自己应该是有些些理解。数据解析这部分应该算是源码里面最难的。下个星期开始学习Vuex,争取利用课下时间一个星期搞定。接下来就是跟着教程写Vue的项目，在项目中再对Vue进行深度学习，毕竟一口吃不了胖子。 当时大二上半学期快结束时学的react学到下学期，虽然和小组同学一起写了项目，看了不少视频但是还是不太理解
2020-11-22 22:37:21
64
原创 Vue源码解析涉及知识--Object.defineProprty
一、 Object.defineProprty概念： Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。二、 语法：Object.definePrototype(obj,prop,descriptor)obj：要定义属性的对象。prop：要定义或修改的属性的名称。descriptor：要定义或修改的属性描述符。返回值：被传递给函数的对象。...
2020-11-16 13:11:15
1613
原创 总结
学习： 这周一直在补专业课的作业（各种教学设计和做动画、剪视频），到周六才算把时间用在小组的学习上。这两天在学习Vue的部分源码解析，这些东西需要多看几遍才能理解。等到后边学差不多的时候自己写一个小demo,练练手。昨天看了一些前端关于浏览器的一些内容有的感觉理解不动，计算机网络的知识掌握的太差了所以好多不理解，上次学长回来总结的前端知识也要着手每天看一点。需要抽个时间把数据结构关于树和深度优先遍历看一看，算法真是一个让我不愿提及的话题。生活： 每一天都过的挺充实，抽时间可以弹弹钢琴、锻炼锻炼身体
2020-11-15 15:34:19
87
原创 Vue源码解析--模板解析（表达式文本节点）
一、模板解析的基本流程：（1）将el的所有子节点取出，添加到一个新建的文档fragment对象中。（2）对fragment中所有层次子节点递归进行编译解析处理。对大括号表达式文本节点进行解析。对元素节点的指令属性进行解析。事件指令解析。一般指令解析。二、大括号表达式文本节点解析流程：1.HTML中的代码：<div id="test"> <p>{{name}}</p></div>2.引入的JavaScript文件：&
2020-11-15 11:00:32
514
原创 Vue与React的区别
一、基本介绍： Vue是用于构建用户界面的渐进式框架。Vue被设计为可以自底向上逐层应用，Vue的核心只关注图层。二、优点：注：这里只是列举了一小部分的优点。体积小——压缩后33k。更高的运行效率——基于虚拟DOM（一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，这个DOM操作属于预处理操作并没有真正的操作DOM，虚拟DOM的构建与更新都是在内存中完成的，并不会渲染到真正的DOM中去）。双向数据绑定。三、React与Vue的差别：相似之处：
2020-11-14 11:44:08
185
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人