- 博客(53)
- 资源 (3)
- 收藏
- 关注
RSS订阅转载 【WebSocket】WebSocket学习笔记
目录什么是WebSocket？为什么需要WebSocketWebSocket与HTTP的区别WebSocket协议的原理WebSocket的优缺点WebSocket应用场景WebSocket断线重连什么是WebSocket？WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就可以创建持.
2021-11-15 13:37:02
555
原创 【Javascript】This指向问题
前言：终于找了一个早晨看书，把this搞了个透彻！旧文总结的太乱了，都是这里学一点，那里看个视频的，学习基础知识还是得买书！旧的链接：https://blog.csdn.net/qs52955339/article/details/115759345?spm=1001.2014.3001.5501留着做个纪念吧。this到底指向谁this要从多角度理解：全局环境下的this，箭头函数中的this，构造函数中的this，this的显隐性和优先级等。在函数体中，非显式或隐式地简单调用函数时，在严格模
2021-11-10 13:49:03
684
原创 【webpack】webpack.config.j为什么只能用require不能用import
刚刚摸鱼的时候看到群里有人提问，忽然发现自己也没关注过这个问题，顺手上网搜索了一下，感觉挺有意思的，留着以后深入学习一下。https://webpack.js.org/concepts/configuration/#the-simplest-configuration...
2021-11-05 11:24:59
837
原创 【JQuery】常见的AJAX
JQuery实现AJAX我们可以使用AJAX做些什么？不刷新页面更新网页在页面加载后从服务器请求数据在页面加载后从服务器接收数据在后台向服务器发送数据json是Ajax发送小部分数据的一种轻量级数据格式，可以简单易懂的给服务器或浏览器交互数据，包括json对象，json数组对象。JQuery库中已经封装了ajax请求的方法。示例： $(function() { //请求参数 let params = {}
2021-11-04 14:58:31
399
原创 【JQuery】JQuery基础手册
最近入职了，接手了比较老的代码，基本都是jquery实现的，上次用jquery已经是8年前的事了…趁这个机会复习下！JQuery<script src="https://code.jquery.com/jquery-3.5.0.js"></script>JQuery是一个JavaScript函数库，包括以下特性：HTML元素选取HTML元素操作CSS操作HTML事件函数JavaScript特效和动画HTML DOM遍历和修改AJAXUtlities文档就
2021-11-03 18:30:00
485
原创 【前端缓存】cookies, sessionStorage和localStorage的区别
cookies,sessionStorage和localStorage的区别cookie用来表示用户身份而存在client上（通常是加密过的）。从数据的生命周期来看cookie一般由服务器生成，可设置失效时间，过期时间之前一直存在。sessionStorage的数据在当前浏览器窗口关闭后自动删除。localStorage存储持久数据，浏览器关闭后数据不会丢失，除非主动删除数据。与服务器端通信cookie每次都会携带在同源Http头中，即使不需要也会在浏览器和服务器之间传递，如果使用cookie
2021-10-13 16:02:21
117
原创 【Vue】生命周期相关面试题
Vue的生命周期Vue的生命周期有哪些？一般在哪一步发起哪些请求及其原因？vue的生命周期总共分为8个阶段：创建前/后（beforeCreate/created），载入前/后（beforeMount/mounted），更新前/后（beforeUpdate/updated），销毁前/后（beforeDestroy/destroyed） ![avatar][lifecycle]生命周期钩子是如何实现的？Vue的生命周期钩子就是回调函数，创建组件实例的过程中会调用对应的钩子方法；内部主要是用callHoo
2021-10-12 20:29:24
465
原创 【HTTP】面试常见HTTP系列的问题
1、HTTP的几种请求和方法Http的几种方法：get：发送一个请求来取的服务器上的某一资源。post：向url指定的资源提交数据或附加新的数据。put：跟post方法很像，也是向服务器提交数据，但它们之间有所不同，put指定了资源在服务器上的位置，而post没有。head：只请求页面首部。delete：删除服务器上的某资源options：它用于获取当前url所支持的方法，如果请求成功，会有一个Allow的头包含类似"get,post"这样的信息。trace：用于激发一个远程
2021-10-10 10:33:06
146
原创 解决打完cnpm x xx之后光标闪动但没任何反应的办法
npm uninstall -g cnpm --registry=https://registry.npm.taobao.orgnpm set registry https://registry.npm.taobao.orgnpm set disturl https://npm.taobao.org/distnpm cache clean --forcenpm install -g cnpm --registry=https://registry.npm.taobao.org
2021-08-09 23:17:33
91
原创 【Vue】点击哪个li，就显示红色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&.
2021-07-08 00:26:27
409
原创 【Vue】哪些数组方法是支持响应式的？
支持响应式的数组方法：push(), pop()shift(), unshift()splice(), sort(), reverse()Vue.set()方法也支持响应式
2021-07-08 00:18:52
74
原创 【Javascript】使用Set求交集并集差集
let arr1 = [1,2,3]let arr2 = [4,3,2]let a = new Set(arr1)let b = new Set(arr2)//并集let union = new Set([...a, ...b])console.log(Array.from(union))//交集let inter = new Set([...a].filter(function (x) {return b.has(x)}))console.log(inter)//差集let d
2021-06-15 16:19:27
453
3
原创 【Javscript】解构赋值
解构赋值数组解构赋值 //通过数组对变量进行赋值 let [a,b,c] = [1,2,3] console.log(a) console.log(b) console.log(c)模式匹配等号两边的模式完全相同，左边的变量就会被赋予对应的值 let [a, [[b],c]] = [1,[[2],3]] console.log(a) console.log(b) console.log(c)不完全解构 let [x,
2021-06-11 17:17:22
157
1
原创 2021年6月9日 随手做两个题
题目给定一组数据，给定一个目标值，通过编写一个函数，返回两数之和等于目标的下标 var arr = [2, 7, 11, 15] var target = 9 //解法一： // function fn(arr, target) { // var temp = [] // for (var i = 0; i < arr.length; i++) {
2021-06-09 16:44:43
88
原创 浏览器的缓存策略
浏览器的缓存策略强缓存不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的Network选项中可以看到该请求返回的200的状态码，并且Size显示formdiskcache或者frommemorycache。强缓存可以通过设置两种HttpHeader实现：Expires和Cache-Control。-Cache-Control-public表示相应可以被客户端和代理服务器缓存-private表示响应只可以被客户...
2021-06-09 14:16:22
267
原创 【Javascript】数组常用方法及其手写代码
Array.prototype.forEach()forEach()方法对数组的每个元素执行一次给定的函数。语法
2021-06-06 00:23:12
207
1
原创 【Javascript】实现setTimeout传值的例子
function func(param) { return function() { alert(param) }}var f1 = func(1)setTimeout(f1, 5000)
2021-06-01 13:08:31
161
1
原创 【vue】使用v-bind和v-on来实现双向绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
2021-05-27 14:41:20
387
原创 【Javascript】严格模式
什么是严格模式Javascript除了提供正常模式外，还提供了严格模式（strict mode）。ES5的严格模式是采用具有限制性Javascript变体的一种方式，即在严格的条件下运行JS代码。严格模式在IE10以上版本的浏览器才支持，旧版本会被忽略。严格模式对正常的Javascript语义做了一些更改：1、消除了Javascript语法的一些不合理不严谨之处，减少了一些怪异行为。2、消除代码运行的一些不安全之处，保证代码运行的安全。3、提高编译器效率，增加运行速度。4、禁用了
2021-05-25 10:54:01
223
原创 【Html+CSS】基础知识点梳理
Htmlweb标准三层组成标准 说明 结构 用于对网页元素进行整理和分类。（Html） 表现 用于设置网页元素的版式、颜色、大小等外观（CSS） 行为 指网页模型的定义及交互的编写（Javascript） Html标签分类常规元素 双标签 例如<p></p> 空元素 单标签 例如<br />文档类型，页面语言，字符集<!DOCTYPE html> 就是告诉浏览器按照...
2021-04-29 21:01:26
566
原创 【Javascript】判断函数被调用的方法
前情提要ES5及早期版本中函数具有多重功能，可以结合new使用，函数内的this值将指向一个新对象，在ES6中，函数混乱的双重身份有一些改变。Javascript函数有两个不同的内部方法：[[Call]]和[[Construct]]，当遇到通过new关键字调用函数时，执行的是[[Construct]]函数，它负责创建一个通常被称作实例的新对象，然后再执行函数体，将this绑定到实例上。否则将执行[[Call]]函数，从而直接执行代码中的函数体。具有[[Construct]]方法的函数被统称为构造函数
2021-04-27 18:15:27
5275
1
原创 【Javascript】条件语句的优化
昨晚听了个公开课，老师讲了几种条件语句优化方法，真不错！数组方法 Array.includes 提前退出/提前返回 使用对象字面量代替switch语句 默认参数解构 Array.some/Array.every示例一： function printAnimals(animal) { const animals = ['dog', 'cat', 'hamster'] if (animals.includes(animal)){
2021-04-23 16:45:39
79
原创 【FitNesse】环境搭建
2020年被经理调去后端帮忙做自动化测试时写的文档。准备环境：1、安装Java sdkhttps://www.oracle.com/technetwork/java/javase/downloads/index.html2、配置Java环境变量，编辑Path添加bin路径3、Download FitNessehttp://fitnesse.org/FitNesseDownload4、Download PowerSlimhttps://github.com/konstantin
2021-04-22 14:24:40
107
原创 【Javascript】原型链与继承（ES5、ES6）
原型链（Prototype chain）的定义：每个对象拥有一个原型对象，对象以其原型为模板，从原型继承方法和属性。原型对象也可能拥有原型，并从中继承方法和属性，一层一层以此类推，这种关系被称为原型链。在js中，函数可以有属性，每个函数都有一个特殊的属性叫做原型（Prototype）。prototype属性：继承成员被定义的地方（继承的属性和方法是定义在prototype属性之上的。）prototype属性的值是一个对象，我们希望被原型链下游的对象继承的属性和方法，都存在这里。 Obje.
2021-04-22 12:51:52
223
5
原创 【CSS】Flex弹性布局
示例：Flex的布局原理：Flexible Box，意思是弹性布局，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局。当我们为父盒子设置flex布局以后，子元素的float、clear和vertical-align属性将失效 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局注：在这里不需要浮动就可以使多个div在同一行，所以float和clear失效。flex可以让盒子垂直居中，所以vertical-align也将失效。采用Flex布局的元素称为Flex容
2021-04-21 17:04:51
231
原创 【Javascript】call、apply、bind
概念：call()方法使用一个指定的this值和单独给出的一个或多个参数来调用一个函数。apply()方法调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。bind()方法创建一个新的函数，在bind()被调用时，这个新函数的this被指定为bind()的第一个参数，而其余参数将作为新函数的参数，供调用时使用。注：call方法的作用和apply方法的作用类似，区别就是call接受的是参数列表，而apply方法接受的是参数数组（见例1）。bind与他们的区别在于
2021-04-21 15:15:00
90
原创 【Javascript】shift、unshift、pop、push的区别
shift()定义：shitft方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。说明：如果数组是空的，那么shift方法将不进行任何操作，返回undefined值，该方法会修改原数组。unshift()定义：unshift方法可向数组的开头添加一个或更多元素，并返回新的长度。说明：unshift会直接修改原数组。pop()定义：pop() 方法用于删除并返回数组的最后一个元素。说明：如果数组已经为空，则pop不改变数组，并返回undefined..
2021-04-19 11:35:14
1233
原创 【Javascript】this
1、在函数中直接调用this 指向window function get() { console.log('hello world') } get() //get.call(windows)2、函数作为对象的方法被调用 var person = { name: 'lee', run: function () { console.log(`${this.name} is run`)
2021-04-16 14:39:52
91
原创 【Javascript】使用reduce()处理数组
reduce 是js数组的一个方法，为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素。arr.reduce(function(prev, cur, index, arr){...}, init)arr 表示原数组 prev 表示上一次调用回调时的返回值，或者初始值 init cur 表示当前正在处理的数组元素 index 表示当前正在处理的数组元素的索引，若提供init值，则索引为0，否则索引为1 init 表示初始值示例：求和第一次调用函数时.
2021-04-14 18:16:21
218
原创 【CSS】BFC
对BFC的理解（Block Formatting Context）：块级格式化上下文是Web页面的可视CSS渲染的一部分，是块盒子布局过程发生的区域，也是浮动元素与其他元素交互的区域。它是指一个独立的块级渲染区域，只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。如何创建BFC： 方法一：float的值不是none 方法二：position的值不是static或者relative 方法三：display的值是Inline-block.
2021-04-14 17:03:26
117
原创 【Javascript】发布订阅模式
定义：发布订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。发布订阅模式与观察者模式的区别在于，观察者模式是松耦合，而发布者与订阅者是解耦的，它们彼此互不认识，发布者需要告诉调度中心要发的消息是什么，订阅者需要向调度中心订阅事件，当发布者发布此类事件时，也就是该事件触发，再由调度中心通知订阅者。示例：当用户们在购物网站购物发现没有现货时，用户们收藏了该店铺，等商家补货时会通知他们。实现思路：1、想好谁是发布者2、给发布
2021-04-13 18:46:28
109
原创 【Javascript】策略模式
定义：定义了一组算法，将每个算法都封装起来，并且使它们之间可以互换。解决的问题：在多重算法相似的情况下，使用if...else或单纯使用硬编码方式导致新增一种方法都需要修改封装算法类的源代码，更换查找方法也需要修改客户端调用的代码，维护较为困难。何时使用：系统中有许多类，而区分它们的只是它们的直接行为，算法需要自由切换。如何实现：将这些算法封装成一个一个的类，任意地替换。优点：算法可以自由切换；消除了一些if...else语句 扩展性良好；增加一个策略只需要实现接口。缺点：策略类会增多.
2021-04-13 16:56:14
78
原创 【Javascript】单例模式
定义：只有一个实例；提供全局的一个访问点。解决的问题：一个全局使用的类，频繁的创建和销毁。何时使用：当你想控制实例的数目，节省系统化资源的时候。如何实现：判断系统是否已经有这个单例，如果有则返回，没有则创建。单例模式的优点：内存中只有一个实例，减少了内存的开销，尤其是频繁的创建和销毁实例。使用场景：全局的缓存；弹窗。注：ES5实现单例模式依靠闭包，ES6实现单例模式可使用类。ES5 实现单例模式<!DOCTYPE html><html><.
2021-04-12 16:41:09
116
原创 【Javascript】 Event Loop
前情提要event-loop，即事件循环机制，它是由调用栈、消息队列、微任务队列这三部分组成的。js它是单线程的解释型语言，解释一行 执行一行。我们将从三个例子逐步理解。例1在event-loop开始的时候，会从全局一行一行的执行，遇到函数调用 会压入到调用栈中，被压入的函数被称之为帧，当函数返回后会从调用栈弹出。如上图，在fun2()函数被调用时，fun2()先入栈，执行console.log(2)，控制台打印出2，接着执行fun1()，fun1()入栈，console.l
2021-04-09 17:17:54
90
原创 前端面试常问题（持续整理中）
1、js的运行机制？ js主要用途是和用户互动，用来操作DOM，所以js是单线程的，避免了同时操作同一个DOM的矛盾问题。2、arguments对象是什么？ 它是一个类数组对象，它有length属性，但是没有数组的方法。 它是如何转化成数组的呢？ 使用ES6中的【...】(展开运算符) 在ES5中的话可以使用Array.prototype.slice.call(arguments)。 注：slice()方法返回一个新的数组丢向，这一对象是由begin和end决定...
2021-04-08 16:58:18
1838
原创 【Javascript】节流函数--闭包的应用
节流函数：当持续触发事件时，保证一段时间内，只调用一次事件处理函数。实际应用：表单的提交。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>节流函数</title></head><body> <button id="button">点击</button> <scrip
2021-04-08 15:13:10
144
1
原创 【Javascript】防抖函数--闭包的应用
防抖函数：当持续触发事件，一定时间内没有再触发事件，事件处理函数才会再执行一次。如果设定的时间到来之前，又一次触发了事件，就重新开始延时。实际应用：1、使用echarts时，改变浏览器宽度的时候，希望重新渲染。2、echarts的图像，可以使用此函数，提升性能。3、在输入框输入结束n秒后才进行搜索请求，n秒内输入新的内容时则重新计时。例：<!DOCTYPE html><html><head> <meta ch..
2021-04-08 14:56:33
106
原创 【Javascript】赋值、深拷贝、浅拷贝
前置知识js中的常见类型：基本类型（原始类型）：number、string、boolean、null、undefind引用类型：object注：变量存储在栈内存中，对象存储在堆内存中。浅拷贝：浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。深拷贝：深拷贝是将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个
2021-04-07 18:50:23
129
原创 【Javascript】箭头函数
箭头函数：箭头函数相当于匿名函数，并且简化了函数定义。箭头函数中的this：箭头函数中的this是在定义函数的时候绑定，而不是在执行函数的时候绑定。箭头函数中，this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正式因为它没有this，所以也就不能用作构造函数。例：注：请参考上例正确理解外部代码块的意思。所谓定义时绑定，就是this是继承自父执行上下文中的this。...
2021-04-07 17:50:44
106
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人