- 博客(29)
- 收藏
- 关注
原创 axios
1.区别 axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样。 简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。 axios是ajax ajax不止axios2.fetchAJAX在ES6的替代品fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象。兼容性差因为axios在浏览器端使用XMLHttpRequest 对象发送ajax请求;在node环境使用 http 对象发送aja
2022-06-12 22:19:12 165
原创 vue组件通信
一、props/emit父传子 props子传父 this.emit('‘func’,data)二、$parent $children官网不推荐,作为紧急使用方法,推荐props/emit三 provide injectprovide. 用来传递inject. 用来接收四、ref/refsref:如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例,可以通过实例直接调用组件的方法或访问数据, 我们看一个ref来访问组件的1.建立一个空间。把这个
2022-06-12 18:48:31 94
原创 vuex详解
stateVuex 使用单一状态树,即每个应用将仅仅包含一个store 实例,但单一状态树和模块化并不冲突。存放的数据状态,不可以直接修改里面的数据。mutationsmutations定义的方法动态修改Vuex 的 store 中的状态或数据。actionactions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法,简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。getters类似vue的计算属性,主要用来过滤一些数据。
2022-06-11 21:06:37 132
原创 事件循环机制
JavaScript引擎是单线程,也就是说每次只能执行一项任务,其他任务都得按照顺序排队等待被执行,只有当前的任务执行完成之后才会执行下一个任务。任务分为同步任务和异步任务,异步任务永远在同步任务执行完后才执行是一种后进先出的数据结构。当一个脚本执行的时候,js引擎会解析这段代码,并将其中的同步代码按照执行顺序加入调用栈中,然后从头开始执行。js引擎遇到一个异步任务后并不会一直等待其返回结果,而是会将这个任务交给浏览器的其他模块进行处理(以webkit为例,是webcore模块),继续执行调用栈中的其他任
2022-06-11 17:20:39 60
原创 webpack
谈谈你对webpack的理解?webpack是一个打包模块化js的工具,在webpack里一切文件皆模块,通过loader转换文件,通过plugin注入钩子,最后输出由多个模块组合成的文件,webpack专注构建模块化项目。WebPack可以看做是模块的打包机器:它做的事情是,分析你的项目结构,找到js模块以及其它的一些浏览器不能直接运行的拓展语言,例如:Scss,TS等,并将其打包为合适的格式以供浏览器使用。说说webpack与grunt、gulp的不同?三者都是前端构建工具,grunt和gulp
2022-06-11 16:10:41 65
原创 css定位
static无定位的意思不脱离文档流,参考自身静态位置通过 top(上),bottom(下),left(左),right(右) 定位,并且可以通过z-index进行层次分级。脱离文档流,选取其最近的父级定位元素,当父级 position 为 static 时,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。这里他所固定的对像是浏览器可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。相当于是相对定位和固定定位的结合,既有相对定位的保留自己原来位置的特
2022-06-10 23:11:08 69
原创 变量提升和函数提升
变量预解析 也叫 变量提升函数预解析 也叫 函数提升变量提升和函数提升优先级它们都会进行预解析,函数声明提前于变量声明,但是最终会被变量覆盖!最后的结果要看谁最后赋值,因为两种声明方式共同操作一块栈空间,所以,主要看是谁最后赋值的...
2022-06-10 22:30:40 62
原创 git常用操作
git clone 克隆代码git fetch 抓取git add 单个文件名|通配符 (作用:添加工作区一个或多个文件的修改到暂存区)git commit -m ‘这里输入你的注释内容’ (作用:提交暂存区内容到本地仓库的当前分支)git pull 拉代码git remote add origin 你仓库的地址 // 本地仓库联系远程仓库git push -u origin master // 将本地的master分支推送到origin主机,同时指定origin为默认主机,后面就可以不
2022-06-10 21:04:47 58
原创 get与post区别
1、GET请求一般用去请求获取数据,2、GET请求也可传参到后台,但是其参数在浏览器的地址栏的url中可见,所以隐私性安全性较差,且参数长度也是有限制的3、GET请求刷新浏览器或回退时没有影响4、GET 请求可被缓存5、GET 请求保留在浏览器历史记录中6、GET请求只能进行url编码(application/x-www-form-urlencoded)7、GET请求比较常见的方式是通过url地址栏请求...
2022-06-10 20:52:18 68
原创 es6面试题
1、let和const的相同点:① 只在声明所在的块级作用域内有效。② 不提升,同时存在暂时性死区,只能在声明的位置后面使用。③ 不可重复声明。2、let和const的不同点:① let声明的变量可以改变,值和类型都可以改变;const声明的常量不可以改变,这意味着,const一旦声明,就必须立即初始化,不能以后再赋值。const 一个对象的话。对象里的值是可以改变。因为const对象真正的值是在堆上。指向对象指针在栈上。就算改变对象的值。指针并没有改变一、简单介绍一下你了解的PromisePromise
2022-06-10 14:25:38 283
原创 forEach、filter、map区别
1.forEach遍历数组全部元素,利用回调函数对数组进行操作,不会返回新的数组,return只用于控制循环是否跳出当前循环;filter返回一个新的数组,filter方法需要在循环的时候判断一下是true还是false,是true才会返回这个元素;map根据当前数组映射出一个新的数组,返回新的被改变过值之后的数组,需要return。...
2022-06-10 13:56:16 69
原创 flex布局
row(默认值):主轴为水平方向,起点在左端。row-reverse:主轴为水平方向,起点在右端。column:主轴为垂直方向,起点在上沿。column-reverse:主轴为垂直方向,起点在下沿nowrap(默认):不换行。wrap:换行,第一行在上方。wrap-reverse:换行,第一行在下方。第一个值是flex-direction第二个值是flex-wrap**flex-start(默认值):左对齐flex-end:右对齐center: 居中space-between:两端对齐,
2022-06-10 11:26:35 56
原创 网络请求题
一.UDP与TCP1.UDP是不需要和TCP一样建立三次握手连接的。而TCP则在通信前是需要进行三次握手的。二.三次握手与四次挥手握手1.由浏览器发起,告诉服务器我要发送请求了2.由服务器发起,告诉浏览器我准备接受了,你赶紧发送吧3.由浏览器发送,告诉服务器,我马上就发了,准备接受吧注意:TCP建立连接过程中并没所有发生数据的传输。在TCP建立过程中,为什么不能进行二次握手?浏览器第一次向服务端请求,并没有收到数据,经过一段时间会发起第二次,然后建立成功,考虑这样一种特殊情况,浏览器第一
2022-05-09 23:53:06 249
原创 call apply bind
call、apply、bind都是改变this指向的方法call,apply绑定的时候立即执行call('xxx',1,2,3)apply('xxx',[1,2,3])bind函数执行的才会执行bind(obj)使用场景取最大值和最小值var num = [1,3,5,7,2,-10,11];var maxNum = Math.max.apply(Math, num);var minNum = Math.min.apply(Math, num);console.log(maxNu
2021-10-12 21:58:49 56
原创 构造函数,原型,原型链
构造函数构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。在 JS 中,使用构造函数时要注意以下两点:1. 构造函数用于创建某一类对象,其首字母要大写构造函数要和 new 一起使用才有意义new 在执行时会做四件事情:① 在内存中创建一个新的空对象。② 让 this 指向这个新的对象。③ 执行构造函数里面的代码,给这个新对象添加属性和方法。④ 返回这个新对象(所以构造函
2021-10-12 21:49:07 73
原创 内存泄漏和垃圾回收
1. 什么是内存泄漏 指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束。 指因为疏忽或错误造成程序未能释放已经不再使用的内存的情况。内存泄漏并不是指内存在物理上的消失,而是应用程序分配某段内存后,因为设计错误,失去了对该段内存的控制,因而造成了内存的浪费。JS的回收机制JavaScript垃圾回收的机制很简单:找出不再使用的变量,然后释放掉其占用的内存,但是这个过程不是实时的,因为其开销比较大,所以垃圾回收系统(GC)会按照固定的时间间隔,周期性的执行。到底哪个变量是没有用的
2021-10-12 21:41:53 144
原创 跨域解决方案
jsonpJSONP的思想是在页面动态插入一个script标签,向服务器请求JSON数据,服务器收到请求后,将数据放在一个指定名字的回调函数中返回。document.domain目标:父域A页面(https://www.hao123.com )向子域B页面(https://www.second.hao123.com)请求数据;在A页面与B页面的脚本中分别设置document.domain。document.domain='hao123'在B页面中添加 Cookie。document.cook
2021-10-12 21:27:41 89
原创 react路由
hash和history的区别react路由原理Router组件本身只是一个容器,真正的路由要通过Route组件定义react-router库中的相关组件1> Router : 路由器组件, 用来包含各个路由组件属性 : history={hashHistory} 用来监听浏览器地址栏的变化, 并将URL解析成一个地址对象,供React Router匹配2> Route : 路由组件, 注册路由path="/xxx" ## 根路由组件 path="/"的组件, 一般为App
2021-10-06 18:31:08 83
原创 redux
redux数据流通component --> dispatch(action) --> reducer --> subscribe --> getState --> componentstore1.dispatch 发送action2.subscribe 监听state的变化3.getState 利用subscribe监听到state发生变化后调用它来获取新的state数据reducerreducer是一个函数,它接受一个state和一个action,根据act
2021-10-06 18:07:23 118
原创 react hooks
usestate设置和改变state,代替原来的state和setStateconst [user, setUser] = useState({name: 'Jack', age: 18})useref传统用法const couterRef = useRef();<button ref={couterRef}> </button>usecontextuseContext 的参数必须是 context 对象本身// 创建一个 contextconst Conte
2021-10-06 17:39:37 637
原创 react refs
Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。createRef一般在构造函数中将refs分配给实例属性,以供组件的其它方法中使用对于Class Components:可以获取组件类的实例对于Function Components:无法获取class App extends React.Component{ constructor(props) { super(props); this.myRef =
2021-10-06 11:11:53 61
原创 react key
react中的key属性可以与组件建立了一种对应关系,利用key来识别组件,他是一种身份标识,每个key 对应一个组件,相同的key 会认为是同一个组件,这样后续相同的key对应组件都不会被创建不推荐用属性中的index来做key值,操作数组的时候可能会改变index,ey就失去了本身的意义,并且会带来其他问题key 值必须保证其唯一和稳定性...
2021-10-06 10:58:15 63
原创 react组件通信
传值父传子。父组件通过向子组件传递 props,子组件得到 props 后进行相应的处理。 父 data={fatherdata}.子 this.props.data子传父利用回调函数,可以实现子组件向父组件通信:父组件将一个函数作为 props 传递给子组件,子组件调用该回调函数,便可以向父组件通信。父 getdata={fatherfunc(data)} fatherfunc(data){console.log(data)}子。this.props.getdata(sondata)兄弟
2021-10-06 10:51:47 47
原创 diff 和虚拟dom
虚拟dom对 真实DOM 的操作很耗时,使用 JS 对象来模拟 DOM Tree,在渲染更新时,先对 JS 对象进行操作,再按批将 JS 对象虚拟dom渲染成 DOM Tree,减少对 DOM 的操作,提升性能。虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存,利用 dom diff 算法避免了没有必要的 dom 操作,从而提高性能。用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中当状态变更的时候,重新构造一棵新的对象树。然后
2021-10-03 19:40:17 70
原创 react setstate
setState 何时同步何时异步React控制之外的事件中调用setState是同步更新的。比如原生js绑定的事件,setTimeout/setInterval等。大部分开发中用到的都是React封装的事件,比如onChange、onClick、onTouchMove等,这些事件处理程序中的setState都是异步处理的。调用 setState 之后发生了什么(1)代码中调用 setState 函数之后,React 会将传入的参数对象与组件当前的状态合并,然后触发所谓的调和过程。(2)经过调和过
2021-10-03 19:36:28 49
原创 react组件
类组件和函数组件区别 函数组件 类组件生命周期 无 有this 无 有state 无 有改变state React.Hooks : useState this.setState()性能 高(不用实例化) 低(需要实例化)可控组件组件和不可控组件一个表单组件,如果它的值是可以被 state 控制的,那就是受控组件* *如果它的值不能 state 控制的,那就是不受控制组件purecomponentReact.PureComponent与React.Component完全相同,只是它为
2021-10-03 19:14:35 46
原创 cyf手写doublebind
myvue.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>myVue</title></head><body> <
2021-08-17 00:47:38 112
原创 js数据类型
js的基本数据类型和引用类型基本类型:Number,String,Boolean,Null,undefined。引用类型:Object,Array,Date,RegExp,Functionnull和undefined 空的区别undefined表示"缺少值",就是此处应该有一个值,但是还没有定义 典型用法是: (1)变量被声明了,但没有赋值时,就等于undefined。 (2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。 (3)对象没有赋值的属性,该属性的值为u
2021-07-27 23:04:39 58
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人