前端分享会-CSDN博客

原创 10分钟搞定Axios源码

Axios方法的定义function Axios(instanceConfig) { //接受默认的配置参数 this.defaults = instanceConfig; //定义请求和响应的拦截器 this.interceptors = { request: new InterceptorManager(), response: new InterceptorManager() };}我们在创建Axios对象时会传入一个默认的配置对象，将它赋值给内部的属..

2021-08-21 16:27:01 380

原创 HTTPS协议

HTTPS协议说道HTTPS协议就要说一说HTTP，HTTP的特性就是明文传输，因此在传输的每一个环节都有可能被第三方窃取或者篡改，具体来说，HTTP数据经过TCP层，然后经过WIFI路由器、运营商和目标服务器，这些环节中都有可能被中间人拿到数据并进行篡改，为了防范这一类的攻击，我们不得不引入新的加密方案HTTPS。HTTPS并不是一个新的协议，而是一个加强版的HTTP，其原理是在HTTP和TCP之间加了一层中间层，当HTTP和TCP之间进行通信时并不会像以前那样直接通信，而是经过了一层中间层进行加密，

2021-02-03 22:23:04 329

原创谈谈安全沙箱

安全沙箱前言在最开始的阶段，浏览器是单进程的，这意味着渲染过程、JavaScript 执行过程、网络加载过程、UI 绘制过程和页面显示过程等都是在同一个进程中执行的，从稳定性视角来看，单进程架构的浏览器是不稳定的，因为只要浏览器进程中的任意一个功能出现异常都有可能影响到整个浏览器，如页面卡死、浏览器崩溃等。浏览器本身的漏洞是单进程浏览器的一个主要问题，如果浏览器被曝出存在漏洞，那么在这些漏洞没有被及时修复的情况下，黑客就有可能通过恶意的页面向浏览器中注入恶意程序，其中最常见的攻击方式是利用缓冲

2021-01-30 19:38:57 1359

原创 for-in和for-of区别

for-in和for-of区别先说说结论for-in适合遍历对象属性，for-of适合遍历数组for-in循环出的是key值，for-of循环出的是valuefor-in可以遍历可枚举的属性，for-of遍历的是可迭代的for-of不能直接遍历普通的对象，需要通过Object.keys()搭配使用for-in循环最早期遍历数组的方式就是一层for循环遍历数组下标：let a=[1,2,3,4];for(let i=0;i<a.length;i++){ console.l

2021-01-28 15:02:24 836 2

原创谈谈js的变量提升

谈谈js的变量提升所谓变量提升就是指在js代码的执行过程中，js引擎会把变量的声明部分和函数声明部分提升到代码开头的行为，变量被提升后会给变量设置默认值undefined。下面举个例子：paly();console.log(name);var name="zhangsan";function paly(){ console.log("this is paly");}//将代码拆分成声明和执行部分//-------声明-----------var name=undefined;func

2021-01-27 22:07:47 147

原创谈谈对this的理解

谈谈对this的理解什么是this每个函数在被调用时都会创建一个执行上下文，这个上下文包含了变量环境、this、作用域链等，this就是执行上下文中的一个属性，他是在函数运行时进行绑定的，this的绑定和函数的声明位置没有关系，它取决于函数的调用方式。this的绑定规则默认绑定首先要说的就是函数最常用的调用方式独立函数调用，这时this就会遵守默认绑定规则。看下面这个例子：var name="zhangsan";function a(){ console.log(this.nam

2021-01-27 22:07:13 1431

原创 js原型和原型链

原型和原型链什么是原型？在js中，每当定义一个函数数据类型(Object、Function、Arrry、Date等)的时候都会自带一个prototype对象，这个对象就是我们说的原型。原型有什么作用？先来看一个例子：function Person(){ this.showName=function(){ console.log("zhangsan") }}let person1=new Person();let person2=new Person();console.lo

2021-01-27 22:06:02 1613 1

原创前端复习—CSS篇

什么是BFC定义:在W3C中是这样定义的，浮动元素和绝度定位元素非块级盒子的块级元素(inline-block、table-cells)、以及overflow值不为visiable的块级盒子，都会为他们的内容创建新的BFC(Block Fromatting Context，即块级格式上下文)，也就是说在BFC中的元素如何排列不会影响到BFC之外的元素。触发:浮动元素(float不是none)定位元素(position为abslute或fixed)行内块元素(display为inline-bl.

2021-01-24 20:29:26 140

原创 Hooks API你了解多少

useState1、定义：useState是用来代替class Component里的state2、useState的性质useState的初始值只在第一次有效，这要特别注意不然容易采坑，下面看个例子：import React, { useState,memo } from 'react'const Child =memo(({data})=>{ const [name,setName]=useState(data); return( <div> <d.

2020-12-27 18:43:39 143

原创 hooks和类组件的区别

为什么我么要使用hooks呢，这一点很多人可能觉得没必要去探究，觉得官方初的东西只要好用就行，对于这一点我觉得最重要的还是要去学习大佬们为什么去设计hooks，解决了什么问题，设计的思路是什么？React团队在设计层面的思路能够在一定程度上代表着当前业界在框架设计领域上的最佳实践。函数组件的写法更轻量、灵活在函数组件中我们不需要去继承一个class对象，不需要去记忆那些生命周期，不需要把数据定义在state中。函数作为js中的一等公民，可以让我们更加高效更加灵活的去组织代码。类组件的自身缺陷

2020-12-27 18:42:35 3004

原创谈谈js中new的作用

js中new的作用function fun(name){ this.name=name;}fun.prototype.getNmae=function(){ console.log(this.name)}let fc=new fun("xiaoming");console.log(fc.name);//xiaomingfc.getNmae()//xiaoming从上面的例子中可以得出以下结论：new的时候会将函数fun作为构造函数，创建一个新的实例，这个实例可以访问到构造函数中

2020-12-09 21:20:08 1706 1

原创浅析/XSS/CSRF/同源策略

3、浏览器安全3.1、同源策略什么是同源？如果两个url的协议、域名、端口相同，就称这两个url是同源比如http://store.company.com:80/index.html和 http://store.company.com:80/dir/index.html是同源，而 https://store.company.com:80/index.html和 http://store.company.com:80/index.html不同源，因为协议不同。同源策略主要表现在DOM、Web数据

2020-11-20 21:46:20 590 1

原创了解HTT1/HTT2/HTT3 ?

2、HTTP1/HTTP2/HTTP3前言：HTTP请求和响应的步骤：2.1、HTPP1在了解HTTP1之前先来了解HTTP0.9，HTTP0.9功能很简单，就是用来实现在网络之间传递HTML超文本内容，采用的是请求响应模式，客户端发送请求，服务端返回数据。HTTP0.9请求完整过程：获取IP地址，端口号和服务器建立TCP连接，TCP连接的过程就是TCP协议的三次握手建立好连接后会发送一个GET请求行的信息，例如GET /index.html用来获取index.html服务器接收到请求后会

2020-11-20 10:39:48 2081

原创浅析vuex的原理

8、vuex原理解析vuex的思想：Vuex维护着一个全局的对象，使用到单列数据模式，在这个对象中所有的数据都是响应式的，任意属性进行改变，都会让这个属性所有的依赖进行更新，并且只能通过Mutations进行改变。实现了单向数据流。8.1、vuex的安装vuex和vue0router的安装方式很一样都是通过vue.use()方法进行安装，内部通过调用install方法进行插件的安装。下面看下vuex的install安装函数。/*暴露给外部的插件install方法，供Vue.use调用安装插件*

2020-11-14 16:27:41 803

原创 vue-router原理上

7.1、单页面应用和多页面应用7.1.1、单页面应用（SPA）单页面应用就是第一次进入页面时会向服务器请求一个html文件，通过ur的改变实现组件之间的切换，要注意的是url在变化的过程中并没有发送请求去请求新的html文件，既然没有新的html文件为什么页面会更新呢？其实这都是靠s帮我们实现的，当url改变时，js会感知到url的变化，通过这一点，可以用js动态的将页面的内容清除掉，然后将下一个页面的内容挂在到当前页面上，这时候的路由不是由后端来做，而是由前端来实现，判断页面到底该显示哪一个组件后，清

2020-11-13 22:02:35 306

原创浏览器重排、重绘、合成进阶

1、重排、重绘、合成在进入主题之前先讲讲浏览器渲染过程HTML被HTML解析器解析成DOM Tree接受CSS文本，将CSS文本转换成浏览器可以理解得结构——styleSheets，转换样式表中的属性值，使其标准化，计算出DOM树中每个节点的具体样式。注意：在给DOM树中每个节点计算具体的样式时要遵循CSS的继承规则和层叠规则DOM树和CSSOM树解析完成之后被合成到一起，形成渲染树。对节点进行布局计算，这个过程叫做重排，即根据渲染树计算每个节点的几何信息。绘制页面

2020-11-08 10:19:12 495 2

原创 Vue响应式系统的基本原理

关于Vue.jsVue.js是一款MVVM框架，通过响应式在修改数据的时候更新视图。Vue.js的响应式原理依赖于Object.defineProperty，尤大大在Vue.js文档中就已经提到过，这也是Vue.js不支持IE8 以及更低版本浏览器的原因。Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图，下面来一探究竟。4.1、Object.definePropertyO

2020-11-07 09:24:59 458 2

原创 new Vue()深入理解

我们都知道new Vue()将执行Vue的构造函数，进而执行this_init方法，那this,_init在哪里，它做了哪些事？先来看看_init函数的实现。3.1、_init函数实现Vue.prototype._init = function (options?: Object) { const vm: Component = this//定义全局变量vm，等于初始化的vue对象 // a uid vm._uid = uid++//当前Vue实例唯一标识 //非生产

2020-11-07 09:23:24 3074

原创 Vue初始化前发生了什么

2.1、定义 Vue 构造函数并执行五个函数import { initMixin } from './init'import { stateMixin } from './state'import { renderMixin } from './render'import { eventsMixin } from './events'import { lifecycleMixin } from './lifecycle'import { warn } from '../util/index'

2020-11-07 09:21:46 245 5

原创详解vue中v-model

6.1、问题探究<template> <div> <div>{{obj.message}}</div> <div><input v-model="obj.message" type="text" @input="change1"></div> <button @click="change">click</button> </div></templa

2020-11-06 22:30:19 1291

原创探究async/await

async是‘异步’的简写，async声明一个function是异步的，而await用于等待一个异步方法执行完成，await只能出现在async函数中。async await和generator的写法很像，就是将 Generator 函数的星号（*）替换成 async，将 yield 替换成await但async 函数对 Generator 函数做了改进：1、内置执行器：Generator函数的执行必须靠执行器，所以才有了 co 函数库，而 async 函数自带执行器.也就是说，async 函数的执行

2020-11-03 22:04:21 163 2

原创理解React hook useCallback作用

为什么需要使用useCallback呢？？，我们先来看看官网给出的解释这里我们看到的作用就是减少子组件没必要的渲染，具体怎么去理解我们等下看例子，我在官网的基础上再加上自己的理解吧，useCallback的目的是在与缓存了每次渲染时inline callback的实例，这样方便配合子组件的shouldComponentUpdate或者React.memo，去减少没必要的渲染，这里要提醒下React.memo和React.callback要配合使用，不然不仅不能提升性能还有可能让性能下降场景展示在cl

2020-10-11 13:31:00 5410 8

原创进阶前端路由hash和history

前端路由&hash模式与history模式首先我们先来说说路由的进化最开始路由就是简单的一个URL，在浏览器输入URL地址向服务器发送请求，服务器会根据这个地址将对应的HTML文件返回给浏览器进行渲染，如果这个页面还用到了外部的js和css资源文件，浏览器将会再发送一次请求，服务器才会将对应的资源返回给浏览器，这样的话我们可以简单的模拟一下，当用户首次访问网站时，输入地址向服务器发送请求，服务器返回对应的html文件让浏览器进行渲染，当用户跳转到第二个页面时，浏览器又会发送请求，让服务器返回

2020-10-06 11:28:53 511 1

原创你不知道的js函数提升

今天我们来聊聊js的函数提升！！！！情况一先来看的例子foo();function foo() {console.log(“foo”);}这个我们应该很容易看出来，结果是"foo"，因为这是一个函数声明，函数声明在执行的时候会被提升，所以在调用之前就会被声明。所以可以写成下面这样function foo() {console.log(“foo”);}foo();情况二foo();var foo = function fun() { console.log("fun")

2020-09-29 22:23:25 500 1

原创 this.props.history填坑

项目场景：this.props.history填坑问题描述：今天在写路由跳转的时候发现当我点击跳转按钮时地址栏可以跳转到/我想要的路由下,但是组件加载不出来但是刷新后就可以了!可以正常加载 | |；原因分析：1、首先我们要知道对于子组件他是获取不到this.props.history这个方法的2、第一点解决后还有个坑，对于子组件是不能通过this.props.history跳转到父组件的下面我们通过实例来演示并解决解决方案：1、怎么让子组件可以使用this.props.history这个

2020-09-29 16:40:20 2917

原创 getDerivedStateFromProps填坑

项目场景：今天又来填一个坑！！！！问题描述：最近写的react项目中用到getDerivedStateFromProps ，这可把我折腾坏了，先说说我想实现的目标吧，在一个组件中当它的props发生变化时，组件需要重新获取对应的数据刷新页面，一开始我想到的是getDerivedStateFromProps不是能监听到props的变化吗，我就直接在这个函数中调用获取数据的方法，这里要注意getDerivedStateFromProps是静态方法不能用this直接调用组件中的方法，就想起上次看了一篇博客博

2020-09-23 22:19:02 5302 1

原创解决img放入标签中上下出现间隙问题

问题描述：今天在写项目的时候突然遇到了这个问题，自己将img放入div中，但是照片顶部并没有和div顶部重合，一开始以为自己设置了边距，找半天没找出原因，下面来分享几种解决这个问题的方法问题分析：对于不是块级元素的可见元素都是内联元素，这里有个注意点就是这些内联元素特性都是“行布局”形式。对于img它是内联元素，他默认的对齐方式都是和他的父元素的baseline去对齐，与此同时你撑开的高度却是元素整体的高度，所以这就会造成间隙。解决方案：1、第一种方式就可以直接将内联元素设置成块级元素(d

2020-09-16 19:04:49 481

原创 webpack中publicPath的深入解析

最近在学习webpack打包原理及过程，在配置出口output时遇到了个难题，就是publicPath配置项，一直没搞明白他有什么作用，官网上就解释它是用来按需加载或者加载外部资源时要用到，当我们打包的时候webpack会在静态文件路径前面添加publicPath的值，当我们把资源放到CDN上的时候，把publicPath的值设为CDN的值就可以了，对于我这种小白来说肯迪是一脸懵逼，所以还是决定自己去一探究竟。首先我想要说一下publicPath的作用是分环境的，在开发环境中，也就是启动webpack-d

2020-07-22 17:03:38 15655 2

原创在localStorage中存取值的方法

在前端开发中，当我们重新加载页面时我们希望显示到上一次页面的数据，这时我们就要用到LocalStorage,将我们的数据保存到这里，退出页面时将数据保存，重新加载就直接取出我们的数据，下面用个实例来介绍下我们存取值的方法。在一些购物app中我们点击不同的商家就会显示对应商家的基本信息，我们一般通过给每个商家的页面设定一个id，当我们访问某个商店时只要将对应的id返给后端，后端就会给我们对应的信息，下面我们就来实现下。上代码//假设我们的地址http://localhost:8081/?id=1234

2020-06-10 20:57:54 4166 2

原创 vue中子组件修改父组件传入的值问题

在讲vue之前，我们先来了解一下js中参数的传递按值传递什么是按值传递呢？简单来说按值传递就是将一个变量复制给另一个变量，当复制的那个变量发生改变时，原来的变量不会发生改变，举个简单的例子。var a=1;function arr(b){ b=2; console.log(b);//2}arr(a);console.log(a);//1这就验证了我们刚才所说的，这里将变量a复制给了b，相当于将a拷贝了一份，b改变时a不改变引用传递引用传递相对于按值传递适用于更复杂的数据结构，比如

2020-06-07 11:34:52 1475

原创 Vue.nextTick工作原理以及应用

最近在做仿饿了吗项目时遇到了一个问题，在mounted阶段通过refs获取到HTMLCollection数据时无法读取他的数据，最后也查了很多资料才发现在mounted阶段，mounted 不会承诺所有的子组件也都一起被挂载，所以在此阶段，dom结构还没加载完，js就执行了，最终用vm.nextTick解决问题，纳闷下面我们来介绍下vm.nextTick解决问题，纳闷下面我们来介绍下vm.nextTick解决问题，纳闷下面我们来介绍下vm.nextTick的工作原理。注：在组件内使用 vm.$nextTi

2020-05-29 23:25:01 210

原创实现水平垂直居中方法详情

最近做项目时用到了水平垂直居中，一开始有些方法的使用情况还没搞透，就卡的头疼，今天就总结下。实现水平居中1、一般来说实现水平居中最好的办法当然就是margin:0 auto;当然要在宽度固定的情况下。<style type="text/css" rel="stylesheet"> *{ margin: 0; padding: 0; } #box { width: 200px; height: 200px; marg

2020-05-25 14:05:08 170

转载 Touch事件

Touch 事件首先 touch 包含三类事件，它们分别是：touchstart、touchmove、touchend 。望文生义这种本能相信你应该会有，但在这里我还是有必需对这三个词进行一翻不必要的解释。授课时间touchstart：手指触摸到一个 DOM 元素时触发。touchmove：手指在一个 DOM 元素上滑动时触发。touchend：手指从一个 DOM 元素上移开时触发。这三个事件又分别对应三个相同的触摸列表：授课时间touches：正在触摸屏幕的所有手指的一个列表。targe

2020-05-21 13:50:49 3223

原创 Sticky footers详解

在网页设计中，Sticky footers设计是最古老和最常见的效果之一，最近在做页面时就遇到了这种情况，在页面足够长时我希望一部分内容一直在页面最底层，当页面不够时会出现滚动条，这时这一部分内容任然固定在最底部。这种效果不仅是无处不在，很受欢迎，而且实现起来看上去也非常容易。但实际上实现起来要比预期花的时间更多。此外，在CSS2.1中的解决方案中几乎都要给页脚设置一个固定高度。这是很脆弱的，很少是可行的。实际上实现这个效果过于复杂，而且还需要增加特定的标记和一些Hack手段。在CSS2.1中受到一些限制，

2020-05-18 19:08:07 129

原创你不知道的JS事件

鼠标事件1、onclick：单击事件2、ondbclick：双击事件3、oncontextmenu：右击事件4、onmouseover：鼠标移入事件5、onmouseout：鼠标移出事件6、onmousemove：鼠标移入事件（只要鼠标在范围内就一直会触发函数）7、onmousedown：鼠标按下事件8、onmouseup：鼠标释放事件键盘事件1、onkeydown：键盘按下2、onkeyup：键盘释放3、keyCode：按键属性（数字）其它类事件1、onload：加载事件（DO

2020-05-13 21:30:01 306

原创 DOM节点

节点属性1、childNodes:返回所有子节点的一个集合，子节点包括元素节点、文本节点、属性节点。2、nodeName:返回节点名称，注意是大写。3、nodeType:返回数字（节点类型）******返回1代表元素节点******返回3代表文本节点4、firstChild:获取第一个子元素（包括文本节点）5、lastChild:获取最后一个子元素（包括文本节点）6、firstElementChild:获取第一个元素节点（子元素）与之对应的是lastElementChild.举个例子区分f

2020-05-12 22:21:35 86

原创解决使用exclude后activated和deactivated失效问题

在一个项目中如果我们想每次访问一个界面时只访问一次ajax数据，那我们可以使用我们的keep-alive属性，一般我们用来包裹，这样当我们第一次访问某个页面时保存当前页面的ajax数据，但是有时候我们想访问某个页面不保存他的ajax数据，而是重新加载，这时候我们只要单独设置一下这个组件就行，这里要用到我们要讲的exclude属性，然而这样也会带来一个问题，我们都知道，使用keep-alive时vue会给我们多添加两个钩子，activated和deactivated，他们分别在页面重新显示和消失时启动，但是当

2020-05-09 21:02:04 1343

空空如也

空空如也