自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(30)
  • 收藏
  • 关注

原创 js事件轮询机制

Q:js为什么是单线程?A:如果前一秒对dom元素进行了删除操作,下一秒又对该元素进行了赋值,如果是多线程的话,浏览器在解析的时候不知道该怎么处理,单线程就不会出现这种歧异。(以上观点是个人理解哈,可能底层的设计有其他的考虑),既然是单线程就会出现另一个问题,每次只能执行一个任务,如果某个任务卡住了,剩下的都无法继续执行了,所以呢,异步任务就是用来解决这种情况的。举个例子:js的单线程——>每条车道只允许同时通过一辆汽车(JS主线程每次只能同时执行一个任务),假如3号车突然坏掉了,又只有这一条车

2020-09-03 11:37:36 692

原创 js 实战小技巧

ES6 过滤数组唯一值通过扩展运算符…和 ES6 新增的 Set 生成一个新的数组,该数组只存在唯一元素var arr = [1,1,2,3,3,3,4,5,5]var arrs = [...Set(arr)]console.log(arrs)JS 对象数组(Json)根据某个共同的字段进行分组处理元数据格式[ {"id":"001","name":"Jack","Value":"111"}, {"id":"001","name":"Jack","Value":"111"},

2020-08-04 14:21:56 373

原创 HTTP header设置referer的目的

在防盗链的白名单设置中,如果指名白名单中包含空的Referer,那么通过浏览器地址栏直接访问该资源URL是可以访问到的,但如果不指名需要包含空的Referer,那么通过浏览器直接访问也是被禁止的。referer是记录当前网页的访问来源是哪,如果服务器配置只允许访问自己的静态资源,那服务器每次都需要判断Referer的值是否是配置的白名单网址,如果是就继续访问,不是就拦截。

2023-01-10 09:48:43 406

原创 ReactDOM.createPortal

ReactDOM.createPortal。

2022-11-30 11:10:56 790

原创 new urlSearchParams

URLSearchParams构造函数 通过new实例化,并传入查询的字符串。URLSearchParams上的方法。

2022-11-29 12:13:55 3328 3

原创 JS LRU算法实现

JS LRU算法实现。

2022-11-24 12:42:58 120

原创 平铺数据转化成树

平铺数据转化成树

2022-11-16 17:55:31 212

原创 偏移量获取方式兼容

微信环境下 document.documentElement.scrollTop获取不到值兼容大多数浏览器设置scrollTop的方法:设置scrollTop的值,兼容大多数浏览器

2022-07-18 17:54:12 181

原创 React报错:Minified React error #152

Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=xe for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 报错react 官方文档给出的解释:render里什么也没有返回 ,注意检查一下

2021-06-01 19:02:23 2527

原创 redux和mobx对比

1.为什么需要使用 redux或者mobx? (react 单向数据流)2.redux或者mobx解决了什么痛点?(跨组件通信)3.redux 原理(函数式编程,严格的工程化思想)4.mobx原理(面向对象,观察者模式)

2021-05-16 14:59:09 6256

原创 滚动加载问题

问题描述下拉选带滚动加载功能的组件,在分辨率低的屏幕上,无法加载下一页数据问题原因知识点介绍:scrollHeight,offsetHeight, scrollTop 概念更多属性可参考:https://blog.csdn.net/lhjuejiang/article/details/79492290scrollHeight:内容高度 + 内边距,这个内容包括肉眼看不见、溢出、被窗口遮挡的部分offsetHeight: 元素内容+内边距+边框。不包括外边距和滚动条部分,返回值是一个整数,单

2021-03-27 21:47:37 102

转载 git避免已添加ssh公钥还要输入密码

http://www.cnblogs.com/niepeishen/p/5710575.html在linux中使用git,去提交或者下载代码都是很方便的,但是最近新配置了一套系统,发现每次git pull或者其他动作都需要输入密码。想一想不对劲啊,我使用的是ssh的方式clone的代码,而且在clone之前还生成并且上传了公钥,还把公钥填入git的公钥库里面了,怎么还要我输入密码??仔细研究后,发现了问题所在,原来是在生产公钥的时候,执行命令 ssh-keygen -t rsa -C xxxx 后

2021-03-25 11:17:24 425 1

原创 React class里setTimeOut里setState不会批量更新

先看下这段代码:import React from 'react'export default class HK extends React.Component{ constructor(props){ super(props) this.state = { val: 0 } } componentDidMount(){ this.setState({val:this.state.val

2021-02-23 13:43:46 1302

转载 webpack-dev-server启动后,localhost:8080返回index.html的原理

webpack-dev-server是一个采用Node.js Express实现的微型服务器, 内部使用webpack-dev-middleware来响应发送到服务器监听单口的HTTP请求。webpack-dev-server主要用于前端项目的本地开发和调试。具体使用,只需要在package.json的devDependencies里添加它的依赖即可。同样在package.json里定义dev script,执行该webpack-dev-server, 这样用命令行npm run dev就可启动we

2021-02-20 20:47:04 1156

转载 如何理解react中的super(),super(props)

转载:https://www.cnblogs.com/itgezhu/p/11199313.html1.constructor( )-----super( )的基本含义constructor( )——构造方法 这是ES6对类的默认方法,通过 new 命令生成对象实例时自动调用该方法。并且,该方法是类中必须有的,如果没有显示定义,则会默认添加空的constructor( )方法。super( ) ——继承 在class方法中,继承是使用 extends 关键字来实现的。子类 必须 在 con

2021-02-19 19:02:26 1479

原创 实现flat

const arr = [1,2,3,[4,5,6,[7,8,9]] 平铺成一层结构[1,2,3,4,5,6,7,8,9]const newArr = []function flatten(arr){ arr.forEach(item => { if(Array.isArray(item)){ flatten(item) return } newArr.push(item) }) return newArr}

2021-01-26 16:51:24 163

原创 JS 数组求和几种方法

求和数组为 const arr = [1,2,3,4,5]递归方法function sum(arr){ if(arr.length === 0){ return 0; }else if(arr.length === 1){ return arr[0]; }else{ return arr[0]+sum(arr.slice(1)); }}使用reduceconst sum = arr.reduce((total, curValue) => total + curV

2021-01-19 21:00:32 371

原创 阮一峰ES6学习笔记

1. let和const1.let 和 const不存在变量提升问题;2.let 负责定义变量、const 负责定义常量;3.二者在同一作用域内(即{}内) 不允许重复声明同一变量名;4.const 声明后需立即赋值,不然会报错;5.使用lett定义变量时,该变量不允许使用,此区间称为 暂存性死区// 暂存性死区 if (true) { // TDZ开始 tmp = 'abc'; // ReferenceError console.log(tmp); // ReferenceErr

2021-01-14 21:53:40 5437

原创 数组的反转

和我们用到的Array.reverse()效果一样 function reverse(arr){ for(let i=0;i<arr.length/2;i++){ let temp = arr[i] arr[i] = arr[arr.length-1-i] arr[arr.length-1-i] = temp } return arr } const demo = [1,2,3,4,5,6] reverse(

2020-09-15 22:18:11 272

原创 转驼峰命名

get-element-by-id转成GetElementById const str = 'get-element-by-id' function upperCase(str,method){ let temp = str.split(`${method}`) for(let i = 0;i < temp.length; i++){ temp[i] = temp[i].charAt(0).toUpperCase()+temp[i].substr(1

2020-09-15 20:36:52 131

原创 实现一个深拷贝

总结:深拷贝和浅拷贝 考察的实际上是对内存的理解 基本类型数据存在栈内存中,而对象,数组实际的存储位置是在堆内存中,但是它们的指针存在栈内存中,所以直接拷贝基本类型数据相当于在栈内存中新建一块内存进行存储,而拷贝对象、数组实际上是对其指针的指向进行了改变,相当于在栈内存中新建一块内存存放指针,而拷贝过来的数据和原数据都指向同一块堆内存的地址,所以会出现数据互相影响的问题。第一种 可以使用简单的方法JSONconst person = { name:'jack', age:'11'}const c

2020-08-27 10:48:13 370

原创 browserHistory和hashHistory 区别

hashHistory 路由前方会多一个# 当切换页面时 客户端不会请求服务端 客户端会通过通过 HTML 5 History 进行前端路由管理。hashHistory 每次切换页面 客户端都会去服务器请求资源文件 需要我们在服务器端进行特殊的配置 以常用的nginx为例 :要在你的server 里配置 才能正常访问页面...

2020-08-26 09:36:45 596

原创 webpack中hash、chunkHash、contextHash区别

三者可以处理缓存hash :打包后生成的文件名后都会增加相同的一串hash码chunkHash:打包后生成的文件会根据是否存在依赖关系(即是否import其他模块,如果引入了其他模块则,打包后形成同一chunk块)若存在则打包后的文件会增加相同的hash码eg:index.js中 引入了index。...

2020-08-24 09:05:54 238

原创 多层数组平铺展开

flat(x) x为变量 当为空时 默认展开一层,x规则为 要展开数组长度减1 ,结果不影响原数组,如果原数组有空位,flat()方法会跳过空位。var arr = [1,2,3,[11,22,33,[111,222,333]]]arr.flat() // [1, 2, 3, 11, 22, 33, Array(3)] x为空arr.flat(2) // [1, 2, 3, 11, 22, 33, 111, 222, 333] x为2 arr数组长度减1如果原数组有空位,flat()方法

2020-08-17 10:04:33 1049

原创 react 中使用防抖函数获取值时 控制台提示use event.persist()

想异步访问事件属性,需要在事件上调用event.persist(),此方法会从池中移除合成事件,允许用户代码保留对事件的引用。同时需要注意此时this的指向问题。react文档:event.persist()

2020-08-14 14:40:31 550

原创 console.log()和console.dir()区别

console.log() 会在浏览器控制台打印出信息console.log()可以显示一个对象的所有属性和方法log可以用于我们判断某个值或者确定某个对象里的内容dir可以用于我们判断某个函数是否拥有某个属性或方法...

2020-08-13 10:22:35 323

原创 echarts 相关问题

鼠标悬浮提示信息使用tooltip进行设置 formatter方法可以对悬浮部分进行设置显示 提示如果不知道目前鼠标悬浮能拿到哪些资源的话,可以通过打印params参数的方法进行查看,我们可以使用params.的方式拿到我们想要用的资源tooltip: { trigger: 'axis', axisPointer: { type: 'cross', }, formatter(params) { .

2020-08-11 14:19:40 499

原创 函数节流与防抖

函数防抖原理:采用定时器,触发方法后,在n秒以内,多次触发该方法时,该方法只会执行一次,并且每次触发时都会重新计时。例如,公交司机关车门,在乘客上车后,司机会等待几秒看看是否有下一秒乘客上车,如果有,在下一名乘客上车后,还会等待几秒,看看是否有下下一名乘客要上车,直到等待几秒后,没有乘客继续上车,才会关闭车门。用途:浏览器窗口大小改变,重新渲染页面;输入框检验手机号、邮箱地址格式是否正确;代码:以页面滚动加载为例(从头到底)function debounce (callback, delay){

2020-08-11 10:05:15 113

原创 数组对象去重

数组对象去重有多种方法,本方法为冒泡方法去重根据对象id去重var arrs = [{id:1,name:‘che’},{id:2,name:‘wang’},{id:3,name:‘li’},{id:1,name:‘lin’},]function Dupremove(arr){for(var i = 0;i<arr.length;i++){for(var j = i+1;j<arr.length;j++){if(arr[i].id===arr[j].id){arr.spl

2020-08-06 10:18:23 146

原创 Nginx windows启动、停止命令

首先进入到Nginx文件夹下输入命令 start nginx 回车 即可启动服务根据自己的配置文件中的 服务器 地址 在浏览器中输入后即可看到页面(例如:我配置的服务器地址是localhost)停止命令 nginx.exe -s stop 或 nginx.exe -s quit区别:stop可以快速停止nginx,可能并不保存相关信息;quit是完整有序的停止nginx,并保存相关信息,推荐使用第二张方法修改相关配置信息后,需要重启服务 命令 nginx.exe -s reload..

2020-08-05 11:59:34 1362

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除