![](https://img-blog.csdnimg.cn/20201204113926622.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
web前端
文章平均质量分 79
里面是关于前端总结的一些知识点
Cherish_喜爱
前端菜虫
展开
-
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 · 1495 阅读 · 0 评论 -
浏览器缓存介绍
一、数据库缓存:数据库会在内存划分一个专门的区域,用来存放用户最近执行的查询,这块区域就是缓存。二、应用层缓存:缓存数据库的查询结果,减少数据的压力。 缓存磁盘文件的数据,常用的数据放到内存,不用每次都去读取磁盘。 缓存某个耗时的计算操作。三、服务端缓存:一般针对静态文件类型,比如图片、css、js、html等静态文件。原因如下:请求更快:通过将内容缓存在本地浏览器或距离最近的缓存服务器(CDN),在不影响网络交互的前提下可以大大加快网站加载速度。 节省带宽:对于已缓存的文件原创 2021-03-21 17:19:14 · 338 阅读 · 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 · 176 阅读 · 0 评论 -
Vue源码解析--AST抽象语法树
一、概念介绍:在开发Vue的时候编译器会将模板语法编译成正常的HTML语法,而直接编译的时候是非常困难的,因此此时会借助AST抽象语法树进行周转,进而变为正常的HTML语法,使编译工作变得更加简单。抽象语法树的本质上是一个JS对象,Vue在审视所有HTML结构时是以字符串的新式进行的,最终将其解析为JS对象。AST抽象语法树服务于模板编译,将一种语法翻译为另一种语法。在Vue中将模板语法编译为HTML语法,自己作为中转站。二、抽象语法树与虚拟DOM节点的关系:图示:抽..原创 2021-02-09 17:16:02 · 3460 阅读 · 0 评论 -
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 · 453 阅读 · 1 评论 -
diff算法的深入学习--由浅入深循序渐进(一篇文章搞定)
一、感受diff算法的心得:1. 最小量更新:在最小量更新中key很重要,key是这个节点的唯一标识。告诉diff算法在更改前后它们是同一个DOM节点。2. 虚拟节点:只有是同一个虚拟节点,才能进行精细比较,否则就是暴力删除旧的,插入新的。3. 如何定义同一个虚拟节点?:选择器相同且key相同。4. 同层比较:diff算法只进行同层比较,不会进行跨层比较。即使是同一层虚拟节点但是跨层了,那么就不会进行精细算法比较,而是暴力删除旧的,然后插入新的。二、深入diff核心思路:原创 2021-02-04 10:13:05 · 1267 阅读 · 0 评论 -
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 · 336 阅读 · 0 评论 -
简单介绍虚拟DOM和diff算法
一、diff算法简介:上面代码的改变有很多种方式,第一种:我们可以将左边box这个div全都删掉然后替换成右边这个div(但这种方式感觉太大费周章),第二种方法:是我们可以保持原有的内容不发生变化只添加新增的内容。像第二种这样进行精细化对比实现最小量更新我们称为diff算法。二、虚拟DOM :用JavaScript对象描述DOM的层次结构。DOM中的一切属性都在虚拟DOM中有对应的属性。diff算法是在两个虚拟DOM之间计算的,新虚拟DOM和老虚拟DOM进行diff(精细化比较.原创 2021-01-30 17:10:15 · 755 阅读 · 0 评论 -
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 · 258 阅读 · 0 评论 -
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 · 564 阅读 · 2 评论 -
Vue源码探索--mustache模板引擎(基本使用)
一、什么是模板引擎?模板引擎是将数据变为视图最优雅的解决方案。二、将数据变为视图的方法:1、纯DOM法通过原生JS分别创建(document.createElement(" "))不同的标签把子元素的标签添加(appendChild())到父元素的内容上。 <ul id="list"> </ul> <script> var arr = [ { "name": "小明",...原创 2021-01-25 11:45:11 · 685 阅读 · 0 评论 -
JavaScript继承--原型式继承
一、原型式继承的由来:克罗克福德介绍了一种实现继承的方法,这种方法并没有使用严格意义上的构造函数,而是借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型。其给出的函数如下: function Object(o){// 临时性的构造函数 function F() {} F.prototype = o; return new F(); }解释:(1)在object函数内部,先创建了一个临时性的构造原创 2021-01-22 20:22:03 · 146 阅读 · 0 评论 -
JavaScript继承--组合继承
组合继承有时候也称为伪经典继承,指的是将原型链和借用构造函数的技术组合到一起,从而发挥二者之长的一种继承模式。其背后的模式是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。 function SuperType(name){ this.name = name; this.colors = ["red","blue","green"]; }原创 2021-01-22 16:39:11 · 124 阅读 · 0 评论 -
JavaScript继承--借用构造函数继承
目录一、知识回顾:二、借用构造函数实现继承:三、借用构造函数的问题:一、知识回顾:在学习新知识之前我们简单回顾一下 call、apply、bind方法的使用:call和apply的共同点是能够改变函数的执行时的上下文,将一个对象的方法交给另一个对象来执行,并且是立即执行的;bind() 方法创建一个新的函数,在调用时设置 this 关键字为提供的值。1、call方法的使用:a:语法:Function.call(obj,[param1[,param2[,…[,para..原创 2021-01-22 15:08:58 · 700 阅读 · 0 评论 -
JavaScript继承--原型链继承详解
一、回顾原型概念:在学习原型链继承之前我们先简单回顾一下原型的概念:每个函数都有一个prototype属性,它默认指向一个空的Object对象(称为原型对象),原型对象里面有一个constructor属性,它指向函数对象。function foo(){ }console.log(foo.prototype.constructor == foo); //true构造函数、原型、实例的关系:每一个构造函数都有一个原型对象(Foo.prototype)、原型对象都包含一个指向构造原创 2021-01-21 18:08:31 · 251 阅读 · 0 评论 -
深拷贝与浅拷贝
一、数据类型:基本数据类型: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 · 376 阅读 · 0 评论 -
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 · 184 阅读 · 0 评论 -
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 · 113 阅读 · 0 评论 -
原生AJAX实现过程
一、JavaScript异步编程异步是与同步相对的概念。同步:不意味着所有步骤同时运行,而是指步骤在一个控制流序列中按顺序执行。异步:异步过程的执行将不再与原有的序列有顺序关系,从主线程发射一个子线程来完成任务。简单理解:同步按代码的顺序执行,异步不按照代码的顺序执行,异步的执行效率更高。二、什么时候用异步编程? 在前端编程中,我们在处理一些简短、快速的操作时,往往在主线程中就可以完成。主线程作为一个线程,不能够同时接受多方面的请求。所以,当一个事件没有结束时,界面将无法处理其他请求。 如原创 2021-01-14 14:21:28 · 132 阅读 · 0 评论 -
深入理解CSS定位中的偏移
CSS中有三种基本形式的布局机制:普通流、浮动和绝对定位。利用定位可以准确定义元素的位置,或者是元素相对于其父元素、另一个元素、浏览器窗口的位置。一、Position定位:五个值:staticrelativefixedabsolutesticky1.static:HTML元素的默认值,即没有定位,遵循正常的文档流对象。静态定位的元素不会受到投top、bottom、left、right的影响。HTML代码:<div class="box1"></div>原创 2021-01-12 19:27:20 · 1384 阅读 · 0 评论 -
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 · 392 阅读 · 5 评论 -
圣杯布局详解--浮动
圣杯布局是什么:圣杯布局是两边固定宽度,中间自适应的三栏布局。中间栏放到文档流前面,先行渲染。目的是为了解决三栏布局。浮动实现:实现效果:首先HTML:头部<header></header>标签,内容区域<div class="container"></div>里面包含中、左、右三个 div 标签。底部<footer></footer>标签HTML代码: //标题 <header>&l原创 2020-12-13 21:07:30 · 5902 阅读 · 0 评论 -
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 · 143 阅读 · 0 评论 -
Vue源码解析涉及知识--Object.defineProprty
一、 Object.defineProprty概念: Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。二、 语法:Object.definePrototype(obj,prop,descriptor)obj:要定义属性的对象。prop:要定义或修改的属性的名称。descriptor:要定义或修改的属性描述符。返回值:被传递给函数的对象。...原创 2020-11-16 13:11:15 · 1638 阅读 · 0 评论 -
Vue源码解析--模板解析(表达式文本节点)
一、模板解析的基本流程:(1)将el的所有子节点取出,添加到一个新建的文档fragment对象中。(2)对fragment中所有层次子节点递归进行编译解析处理。对大括号表达式文本节点进行解析。对元素节点的指令属性进行解析。事件指令解析。一般指令解析。二、大括号表达式文本节点解析流程:1.HTML中的代码:<div id="test"> <p>{{name}}</p></div>2.引入的JavaScript文件:&原创 2020-11-15 11:00:32 · 526 阅读 · 0 评论 -
Vue与React的区别
一、基本介绍: Vue是用于构建用户界面的渐进式框架。Vue被设计为可以自底向上逐层应用,Vue的核心只关注图层。二、优点:注:这里只是列举了一小部分的优点。体积小——压缩后33k。更高的运行效率——基于虚拟DOM(一种可以预先通过JavaScript进行各种计算,把最终的DOM操作计算出来并优化的技术,这个DOM操作属于预处理操作并没有真正的操作DOM,虚拟DOM的构建与更新都是在内存中完成的,并不会渲染到真正的DOM中去)。双向数据绑定。三、React与Vue的差别:相似之处:原创 2020-11-14 11:44:08 · 199 阅读 · 0 评论 -
DOM操作优化--DocumentFragment高效更新多个节点
前言:DOM树的操作会引起回流,而DocumentFragment可以一次性加入DOM树减少回流的次数,达到优化目的。一、基本概念:DocumentFragment:它被作为一个轻量版的 Document 使用,就像标准的document一样,存储由节点(nodes)组成的文档结构。document: 对应显示的页面,包含n个element一旦更新document内部的某个元素界面更新。与document的不同点:与document相比,最大的区别是DocumentFragment 不是真实 DOM原创 2020-11-14 11:36:23 · 407 阅读 · 0 评论 -
JS高级--原型以及原型链
一、原型1.什么是原型?原型是JS中继承的基础,JS的继承就是基于原型的继承。2.几个基本定义(1)每个函数都有一个prototype属性,它默认指向一个空的Object对象(称为原型对象)(2)原型对象里面有一个constructor属性,它指向函数对象代码展示:(3)图示:注:函数名叫Type ,prototype是其属性,Type.prototype指向的是Type的原型对象,原型对象里面有constructor属性constructor又指向的是Type。构造函数和函数对象之间是原创 2020-10-05 16:02:31 · 249 阅读 · 0 评论 -
手写Promise并理解其内涵
一、首先看流程分析图:二、搭建基本框架//自定义Promise函数模块:采用立即执行函数(function(window){ })(window)原创 2020-08-04 18:43:20 · 209 阅读 · 0 评论 -
秒懂async与await
一、async 定义、await定义:1、async function: 用来定义一个返回AsyncFunction对象的异步函数。异步函数是指通过时间循环一步执行的函数,它会通过一个隐式的promise返回其结果。2、await: 操作符用于等待一个Promise对象。它只能在异步函数 async function中使用。二、语法:1、async functionasync function name([param[, param[, ... param]]]) {statements}注:原创 2020-08-03 22:25:25 · 7536 阅读 · 0 评论 -
Promise使用和基本问题
一、Promise基本使用:代码演示://1、创建一个新的Promise对象 const P = new Promise((resolve,reject) => {//执行器函数 setTimeout(() => { const time = Date.now()//如果当前时间是偶数就代表成功,否则代表失败 if(time % 2 == 0){ //3原创 2020-07-31 17:04:46 · 390 阅读 · 0 评论 -
Promise基本介绍
在Promise学习之前我们先来掌握以下几个概念:1、区别实例对象和函数对象 。2、回调函数的分类。一、区别实例对象和函数对象:函数对象:将函数作为对象使用,简称为函数对象。 function Fn(){ } console.log(Fn.prototype);注:函数是对象,当函数操作其属性或者方法时函数作为对象使用。实例对象:new函数产生的对象,简称为对象。 function Fn(){ }原创 2020-07-29 21:30:07 · 1278 阅读 · 0 评论 -
hygen--自动化模板生成器 快速入门
hygen是一个简单,快速,可扩展的代码生成器。一、安装hygen:如果已经安装好node.js,则可以使用npm(或者Yarn),进行全局安装以便在其他项目中使用。$ npm i -g hygen二、初始化hygen:$ hygen init self运行完成后我们可以看到在我们的项目根目录下生成了一个 _templates 文件夹。三、构建第一个项目生成器:$ hygen generator new mygen可以看到 _templates 文件夹下多了一个 componen原创 2020-07-22 16:20:07 · 1329 阅读 · 0 评论 -
JS函数基础---你会了吗?
一、定义:函数也是一个对象,可以重复执行的代码块,完成特定功能的一段代码,使用typeof检查会返回function。二、函数常用定义方式:(1)函数声明式:function sun(a,b){ return a+b;}sum(1,2);(2)函数表达式声明方式:var sum = function(a,b){ console.log(a+b);}sum(1,2);三、arguments对象:Arguments维数组对象,里面的指针是callee,用来装函数里面的实参,拿到传原创 2020-07-17 21:59:55 · 175 阅读 · 0 评论 -
JS数据类型详解--你搞清楚了吗?
一、数据类型:1、基本值类型(简单的数据类型):String(任意字符串)、Number(任意的数字)、Boolean、Undefined、Null2、引用数据类型(复杂的数据类型):Object、Function(一种特别的对象)、Array(一种特别的对象,内部数据是有序的)。二、数据类型基本介绍:(1)Number:JS中所有的数值都是Number类型由于内存限制并不能保存所有的数值NAN(not a number) JS中当对数值进行计算时没有结果返回整数运算会精确,浮原创 2020-07-17 18:32:05 · 181 阅读 · 0 评论 -
CSS Modules
前言: CSS是前端领域中进化最慢的一块.由于ES6的快速普以及webpack等工具的迅猛发展,相较于JavaScript,CSS被远远甩在了后面,逐渐成为各类大型项目工程化的痛点,也变成了前端走向彻底模块化前必须要解决的一个问题。 CSS模块化的解决方案有很多,但主要有两类。InlineStyle.这种方案彻底抛弃CSS,使用JavaScript或JSON来写样式,能给CSS提供JavaScript那样强大的模块化能力。但缺点同样明显,InlineStyle几乎不能利用CSS本身的特性,比如级原创 2020-07-12 14:59:05 · 147 阅读 · 0 评论 -
React安装以及基本介绍
React介绍:用于构建用户界面的JavaSript库。特点:声明式 编码组件化 编码支持客户端与服务器渲染高效单向数据流React高效的原因:虚拟DOM,不总是直接操作DOM(较少更新的次数)。DOM Diff 算法(算哪些地方需要更新,减少更新的区域),最小化页面重绘。环境安装: React项目是基于Node.js的工程化项目,需要使用npm来管理依赖。Node环境下载地址:https://nodejs.org/zh-cn/下载完成后我们可以cmd一下输入no原创 2020-06-06 18:28:41 · 211 阅读 · 0 评论 -
webpack中使用source map
基本介绍: 当webpack打包源代码时,可能会很难找到错误和警告在源代码中的位置。而source map的功能就是将编译后的代码映射回原始源代码,可以明确的找到错误或警告的代码位置。代码演示:const HtmlWebpackPlugin = require('html-webpack-plugin');//默认会创建一个var webpack = require('webpack');const {resolve} = require('path');const TerserPlugin =原创 2020-05-16 22:38:17 · 509 阅读 · 0 评论 -
webpack模块热替换(HMR)在开发环境中应用
HMR概念介绍:模块热替换功能会在应用程序运行过程中替换、添加或删除模块,而无需重新加载整个页面。主要是通过一下几种方式来加快开发速度:只更新变更内容,以节省开发时间。保留在完全重新加载页面时丢失的应用程序状态。几乎相当于在浏览器中更改样式。HMR在开发环境中使用webpack.config.js中代码:/** * html文件:默认不能使用HMR功能,同时会导致问题:html文件不能热更新 * 解决:修改entry入口,将html文件引入 * * css样式文件可以使用HMR原创 2020-05-16 16:50:45 · 434 阅读 · 0 评论 -
webpack介绍
webpack概念: webpack是一种前端资源构建工具,是一个现代JavaScript应用程序的静态资源打包器。当webpack处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle。“模块”理解: 在模块化编程中,开发者将程序分解成离散功能块,并称之为模块。每个模块具有比完整程序更小的接触面,使得校验、调试、测试轻而易举。精心编写的模块提供了可靠的抽象和封装界限,使得应用程序中每个模块都具有条理清楚的设计和明确的目的。w原创 2020-05-16 11:01:36 · 290 阅读 · 0 评论