- 博客(34)
- 收藏
- 关注
RSS订阅原创 react的setState函数
问题情境一：当我们要改变React类组件的状态的时候，为什么不能直接用 this.state = xxx 这种方式来修改？setState方法是由父类Component所提供的，当我们调用这个函数时，React.js会更新组件的状态state，并重新调用render方法，然后把render方法所渲染的最新内容显示到页面上。而如果直接用 this.state = xxx 这种方式来修改， React.js就没办法知道你修改了组件的状态，它也就没有办法更新页面，所以，一定要使用 React.js 提供的 s
2022-02-18 17:51:11
1002
原创 本地启动前端项目，如何让外部通过ip去访问
在项目的pakeage,json文件中写 --host ip(ip是本机的IP)，然后重新启动项目，就可以在其他主机通过ip:项目端口/访问路径访问对应的项目内容了
2022-01-20 22:36:08
12194
2
原创 创建npm包教程以及npm脚本和package.json
1.npm是什么？npm是Node的模块管理器，其功能极其强大，它是node获得成功的重要原因之一。正是因为有了npm，我们只要一行命令，就能安装别人写好的模块。一个 npm 模块 只 需要包含一个带有 name 和 version 属性的 package.json 文件。npm模块安装机制简介npm官网那么下面来介绍一下,如何创建自己的第一个node模块,并把这个模块上传到npm上面,让别人可以用我们的模块。2.创建第一个node模块Node.js模块就是发布到npm的代码包。①创建一个新.
2022-01-14 11:14:16
2066
原创 vue.nextTick
1.官方文档说明：那么为什么nextTick方法会在下次DOM更新循环结束之后执行延迟回调呢？首先我们需要知道下面几个问题：1.如何进行更新DOM：这里首先要提醒的是，如果是异步任务，且不是宏任务的几种，如果环境支持微任务，则默认是微任务，会被放入微任务队列。异步更新DOM默认也是微任务。可能你还没有注意到，Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列
2022-01-11 11:10:31
825
原创 Patch:虚拟DOM最核心的部分--如何对比虚拟DOM树,以及如果生成真实DOM
虚拟DOM最核心的部分是patch,它可以将vnode渲染成真实DOM.patch也可以叫做patching算法,通过它渲染真实DOM时,并不会暴力覆盖原有DOM.而是比对新旧俩个vnode之间有哪些不同,然后根据对比结果找出需要更新的节点进行更新.这点从名字就可以看出,patch本身就有补丁,修补等意思.其实际作用是在现有DOM上进行修改来实现更新视图的目的.之所以要这么做，主要是因为DOM操作的执行速度远不如JavaScript的运算速度快。因此，把大量的DOM操作搬运到JavaScript 中，.
2021-12-29 18:20:53
810
原创 虚拟DOM的VNode
摘自:深入浅出vue.js在虚拟DOM中, VNode是比较重要的知识点,那么下面我们将介绍VNode.1.什么是VNode在Vue,js中存在一个VNode类，使用它可以实例化不同类型的vnode 实例，而不同类型的vnode实例各自表示不同类型的DOM元素。例如，DOM元素有元素节点、文本节点和注释节点等，vnode 实例也会对应着有元素节点、文本节点和注释节点等。VNode类的代码如下:从上面的代码可以看出，vnode只是一个名字，本质上其实是JavaScript中一个普通的对象，是
2021-12-29 15:48:57
481
原创 虚拟DOM
1.什么是虚拟DOM虚拟DOM是随时代发展而诞生的产物。在web早期，页面的交互效果比现在简单得多，没有复杂的状态需要管理，也不需要频繁地操作DOM，使用jQuery来开发就可以满足我们的需求。但是随着时代的发展，页面上的功能越来越多，需要实现的需求也越来越复杂，程序中需要维护的状态也越来越多，DOM操作也越来越频繁，此时我们会发现如果像之前那样使用jQuery来开发页面，那么代码会有很多操作DOM，程序中的状态也很难管理，代码逻辑也会很混乱。这其实就是命令式操作DOM的问题，虽然简单易用，但业务复杂
2021-12-29 11:51:49
1167
原创 vm.$delete的原理
vm.$delete的作用是删除数据中的某个属性。由于Vue.js的变化侦测是使用object.defineProperty实现的，所以如果数据是使用delete关键字删除的，那么无法发现数据发生了变化。为了解决这个问题，vue.js提供了vm.$delete方法来删除数据中的某个属性，并且此时vue.js可以侦测到数据发生了变化。一：用法参考：深入响应式原理二：实现原理vm.$delete方法是为了解决变化侦测的缺陷。在ES６之前，javascript并没有办法侦测到一个属性在object
2021-12-28 18:09:07
445
原创 vm.$set的原理
在vue.js中，vm.$set是一个比较常用的API，先简单回顾一下用法。一.用法：vm.$set(target, key, value)参数：{object | Array} target{string | number} key{any} value返回值：{function} unwatch用法：在object上设置一个属性，如果object是响应式的，vue.js会保证属性被创建后也是响应式的，并且触发视图更新。这个方法主要是用来避开vue.js不能侦测属性被添加的限制。注意：
2021-12-28 16:03:16
763
原创 vm.$watch的内部原理
在介绍内部原理前，先简单回顾一下它的用法：1.1 用法：vm.$watch(expOrFn, callback, [options])参数分析：{String| Function} expOrFn{Function | Object} callback{Object} [options] =>①{boolean} deep ②{boolean} immediate返回值：{Function} unwatch用法：用于观察一个表达式或computed函数在vue.js实例上的变化。.
2021-12-24 15:02:43
698
原创 如果页面的图片太多，如何优化图片的加载
优化图片加载1.使用图片服务器：专门为图片的读写操作优化的服务器。2.图片无损压缩：不失真，分辨率不变3.精灵图：将图片拼接在一起，通过移动背景图来显示图片。4.base64图片：随着html和css文件一起下载到浏览器，无需多余的请求，但是如果图片大，则这样更加浪费资源。所以最好小图片使用Base64。5.图片懒加载：当屏幕没有...
2021-12-22 14:23:11
505
原创 node-sass安装失败的解决方法
原文：为什么node-sass总是安装失败？作者：李平海node-sass是我们开发中很常见的依赖包，也是安装时间冗长和最常见到报错的依赖。 安装node-sass失败原因有很多种，我们在说失败原因之前，先来分析一下node-sass的安装过程(以下node版本为v10.15.3)：PS D:\demo> npm i node-sass// 从npm源安装到node_modules> [email protected] install D:\demo\node_modules\node
2021-12-22 14:08:29
16090
2
原创 npm的装包原理
原文：npm安装包原理前言：提起npm，大家第一个想到的应该就是 npm install 了，但是 npm install 之后生成的 node_modules大家有观察过吗？package-lock.json 文件的作用大家知道吗？除了 dependencies 和 devDependencies，其他的依赖有什么作用呢？接下来，本文将针对 npm 中的你可能忽略的细节和大家分享一些经验。npm安装机制：A 和 B 同时依赖 C，C 这个包会被安装在哪里呢？C 的版本相同和版本不同时安装会有
2021-12-22 11:45:32
729
原创 npm install生成的package-lock.json文件有什么作用？
package.json里面定义的是版本范围（比如^1.0.0），具体跑npminstall的时候安的什么版本，要解析后才能决定，这里面定义的依赖关系树，可以称之为逻辑树（logical tree）。产生背景：在拷贝项目时不需要拷贝node_modules文件夹，如果拷贝的话会很慢，那么如何解决安装的依赖与原项目依赖及版本保持一致呢？①package.json 项目描述文件，保存在项目的根目录下面，记录了当前的项目信息，用npm init -y命令生成。②拷贝项目后，直接执行npm install会自动.
2021-12-21 14:37:40
4134
原创 持续集成、持续交付、持续部署 ---CI/CD概念
概述：CI/CD 是一种通过在应用开发阶段引入自动化来频繁向客户交付应用的方法。CI/CD 的核心概念是持续集成、持续交付和持续部署。作为一个面向开发和运营团队的解决方案，CI/CD 主要针对在集成新代码时所引发的问题（亦称：“集成地狱”）。具体而言，CI/CD可让持续自动化和持续监控贯穿于应用的整个生命周期（从集成和测试阶段，到交付和部署）。这些关联的事务通常被统称为"CI/CD 管道"，由开发和运维团队以敏捷方式协同支持。CI 是什么？CI 和 CD 有什么区别？缩略词 CI / CD 具.
2021-12-16 10:48:23
242
原创 vue.js
javascript的流行库和框架带有元编程的特征。所谓元编程，简单来说，是指框架的作者使用一种编程语言固有的语言特性，创造初相对新的语言特性，使得最终使用者能够以新的语法和语义来构建他们的应用程序，从而在某些领域开发中获得更好的开发体验。...
2021-12-15 11:22:34
967
原创 闭包使用场景
场景一：采用函数引用方式的setTimeout调用（和click一样）闭包的一个通常的用法是为一个在某一函数执行前先执行的函数提供参数。例如，在web环境中，一个函数作为setTimeout函数调用的第一个参数，是一种很常见的应用。setTimeout将要执行的函数(或者一段javascript代码，但这不是我们要讨论的情况)作为它的第一个参数，下一个参数是需要延迟执行的时间。如果一段代码想通过setTimeout来调用，那么它需要传递一个函数对象的引用来作为第一个参数。延迟的毫秒数作为第二个参数，但这.
2021-12-07 23:55:32
3860
原创 JS数组拍平(数组扁平化)的6种方式
1.数组拍平也称数组扁平化，就是将数组里面的数组打开，最后合并为一个数组。2.实现var arr = [1,2,[3,4,5,[6,7,8],9],10,[11,12]];①：递归实现function fn(arr){ let arr1 = [] arr.forEach((val)=>{ if(val instanceof Array){ arr1 = arr1.concat(fn(val)) }else{
2021-12-06 18:17:59
5905
1
原创 JS如何判断是否为null、undefined、NaN
①判断null:var exp = null;if (!exp && typeof exp != "undefined" && exp != 0){ alert("is null");}//typeof exp != "undefined" 排除了 undefined；//exp != 0 排除了数字零和 false。更简单的正确的方法:var exp = null;if (exp === null){ alert("is null");
2021-12-06 17:33:45
9072
原创 最大堆JS实现
由于在力扣刷题时遇到了最小的k个数，该题可以使用最大堆解决。二叉堆是一种特殊的堆，二叉堆是完全二元树（二叉树）或者是近似完全二元树（二叉树）。二叉堆有两种：最大堆和最小堆。最大堆：父结点的键值总是大于或等于任何一个子节点的键值；最小堆：父结点的键值总是小于或等于任何一个子节点的键值。最大堆，又称大根堆（大顶堆）是指根结点（亦称为堆顶）的关键字是堆里所有结点关键字中最大者，属于二叉堆的两种形式之一。要求：①根节点的关键字既大于或等于左子树的关键字值，又大于或等于右子树的关键字值。②为完全二叉
2021-12-06 00:12:11
604
转载 http的长连接、短连接、长轮询、短轮询
转载： 作者：zuoxiaolong（左潇龙）出处：博客园左潇龙的技术博客–http://www.cnblogs.com/zuoxiaolong最近刚到公司不到一个月，正处于熟悉项目和源码的阶段，因此最近经常会看一些源码。在研究一个项目的时候，源码里面用到了HTTP的长轮询。由于之前没太接触过，因此LZ便趁着这个机会，好好了解了一下HTTP的长长短短。了解的方式主要都是LZ在网络上获取的，这里只是谈一下LZ对于这四种叫法最直观的理解。如果你之前不懂的话，可以帮你普及一下，如果你之前就懂得话，可以互.
2021-12-01 18:08:00
203
1
原创 http协议
一.http协议的定义：http(Hypertext transfer protocol)超文本传输协议，通过浏览器和服务器进行数据交互，进行超文本（文本、图片、视频等）传输的规定。也就是说，http协议规定了超文本传输所要遵守的规则。二.HTTP协议的特点：1.HTTP协议是无状态的就是说每次HTTP请求都是独立的，任何两个请求之间没有什么必然的联系。但是在实际应用当中并不是完全这样的，引入了Cookie和Session机制来关联请求。2.多次HTTP请求在客户端请求网页时多数情况下并不是一次
2021-11-30 11:28:51
82
原创 父元素设置指定高度，而子元素高度大于父元素问题
父元素设置指定高度，而子元素高度大于父元素，是否父元素高度会发生变化：答案：不会，父元素高度依然等于父元素设置的高度。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
2021-11-26 11:51:05
1829
原创 Vue对象属性值发生变化的监听三种方法
监听info对象中的a属性值变化：<script> const vm = Vue({ data() { return { b: true, info:{ a: 1, b:2, c: 3 } } }</srcipt>第一种方式：使用deep为了发现对象内部值的变化，可以在选项参数中指定 deep: true。
2021-11-01 17:57:32
40606
原创 数组去重的几种方法
1、Array.filter() + indexOf —>耗时 10926方法思路：将两个数组拼接为一个数组，然后使用 ES6 中的 Array.filter() 遍历数组，并结合 indexOf 来排除重复项。function distinct(a, b) { let arr = a.concat(b); return arr.filter((item, index)=> { return arr.indexOf(item) === index }
2021-08-25 16:08:46
299
原创 websocket以及聊天室的实现
WebSocketwebsocket可以实现客户端与服务端之间的数据实时通信。（长连接）网络通信过程中的长连接与短连接短连接： 客户端发起连接请求，请求建立连接，服务端接受请求，完成连接的创建，而后客户端通过该连接发送数据，服务端处理请求，返回响应，最后连接断开。这种通讯模式称为短连接。特点：这种通讯模式将会及时的释放服务端资源，所以可以为更多的客户端提供服务。但是也有缺点：无状态。（每个请求都是独立的，无法保存客户端状态）**长连接：**客户端发起连接请求，请求建立连接，服务端接受请求，完成连接
2021-08-11 19:00:58
575
1
原创 vue组件间传参
1.父给子(1). 问题: 子组件无权使用父组件中的成员。(2). 解决: 其实，vue中提供了多种组件间传值的机制。(3). 重点讲父给子传值: 3步:a. 父给子: 父组件:{template:`<子组件标签 :自定义属性名=“父组件的变量”> b. 子组件接收属性值: 子组件对象:{ props:[ "自定义属性名" ]} c. 在子组件内，props中的属性用法和data中的变量用法完全一样！只不过props的属性值来自于外部传入，data中的变量.
2021-08-01 16:32:06
53
原创 GIT笔记
远程仓库国内：码云国际：GitHub，世界上最大的代码托管平台在远程创建仓库以及使用仓库步骤：1.先创建远程仓库，产生仓库的地址https://gitee.com/tedul/myproject2-2.git2.将本地仓库的分支推送到远程仓库如果在第一次上传时，密码输入错误，以下解决：...
2021-05-28 20:57:27
240
原创 分治专题。
1.先介绍快排，在洛谷的这题中，所用的快排要比平时写的快排快才能AC，所以这里给出题目和AC代码快速排序#include<iostream>#include<string.h>using namespace std;int n, a[1000005];void quicksort(int *a, int s, int e){//应用二分思想 int mid ...
2020-03-28 23:14:23
68
原创 二分查找与二分答案专题
1.一元三次方程的解这个和慕课上的解不一样，慕课上的给定了方程abc的值，且最后算出来是单调函数。但是这题没有给定abc的值，且更加难以确定根的区间，接下来用二分的方法去解决问题，这里参考的是洛谷上的题解：#include<iostream>#include<string.h>#include<stdio.h> using namespace std;...
2020-03-18 15:44:20
79
原创 前缀和问题
下面笔者贴出学习大佬的博客地址：前缀和问题、前缀和、二维前缀和与差分的小总结、二维前缀和详解接下来是一个例题的参考博客：2019中山大学ACM校赛：二维前缀和二维差分贴出上面博客的注释代码：#include<iostream>#include<string.h>#include<stdio.h>#include<vector>usin...
2020-02-24 23:23:44
115
原创 贪心算法学习
在这次贪心算法学习中，我找到了许多博客去了解贪心算法，以下是我找到其他大佬写的博客：在贪心算法中还涉及了区间覆盖问题：下面我附上其他博主写的该知识的博客链接：区间覆盖问题博客一、区间覆盖问题博客二最大不相交覆盖（就是活动安排问题）区间选点问题 区间选点问题思路以及代码区间完全覆盖 区间完全覆盖问题的思路以及代码接下来是区间完全覆盖的例题：poj 2376和代码：本题参考的博客#...
2020-02-03 19:53:45
717
原创 关于快速幂和矩阵快速幂
在矩阵快速幂中，最关键的是构造矩阵，构造矩阵先找到题目中的关系式，然后根据关系式去构造矩阵，找到对应的关系1.这里可以去参考每个小项的构造，找出规律，然后构造，这里想获得的是a[n], a[n-1],a[n-2]的矩阵，所以通过以下方式去构造，也可以通过关系式直接构造2.还有一种矩阵构造的方法就是上面说的直接通过关系式去构造，附上其他博主的链接：矩阵构造方法总之，在矩阵快速幂中，构造矩阵是很...
2020-01-31 17:59:30
232
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人