前端学习
文章平均质量分 62
Recyclable brother
越努力越幸运
展开
-
零零散散之节流和防抖
节流和防抖一个常见的事情,比如我在项目中遇到的滚动监听,有这样一个需求,滚动到一定程度,就会出现一个滚到顶部的按键。我们可以发现这个滚动监听触发频率太高了,随便动一下都有好多条数据。防抖第一次触发事件时,不立即执行函数,而是限定一个期限值,比如200ms;当在200ms内再次触发,则清除上一次计时,重新计时;当超过200ms则重新触发。function debounce() { let timer = null return function () { if原创 2021-09-10 20:45:50 · 179 阅读 · 0 评论 -
零零散散之JS事件循环机制详解
JS事件循环机制(Event Loop)众所周知,JavaScript 是一门单线程语言,虽然在 html5 中提出了 Web-Worker ,但本质上JavaScript是单线程,,可是浏览器又能很好的处理异步请求,那么到底是为什么呢?任务队列所有的任务可以分为同步任务和异步任务,同步任务,顾名思义,就是立即执行的任务,同步任务一般会直接进入到主线程中执行;而异步任务,就是异步执行的任务,比如ajax网络请求,setTimeout定时函数等都属于异步任务,异步任务会通过任务队列的机制(原创 2021-09-10 20:40:03 · 236 阅读 · 0 评论 -
零零散散之flex相关属性、布局以及flex缩放
flex相关属性、布局以及flex缩放默认情况下,容器中的所有子元素都将进行水平排列,类似于强制进行了一个左浮动,所以容器子元素的float和clear属性会失效。同时,容器中的子元素的对齐方式将不受vertical-align控制,即vertical-align也会失效。display:flex子元素垂直水平居中的方式 display: flex; /* 水平方向对齐方式(上中下): flex-start、center、flex-end */原创 2021-09-10 20:32:12 · 1017 阅读 · 0 评论 -
零零散散之Object.defineProperty()
Object.defineProperty()Object.defineProperty()的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性Object.defineProperty(obj, prop, desc)obj 需要定义属性的当前对象prop 当前需要定义的属性名desc 属性描述符一般通过为对象的属性赋值的情况下,对象的属性可以修改也可以删除,但是通过Object.defineProperty()定义属性,通过描述符的设置可以进行更精准的控制对象属性。原创 2021-09-10 20:29:14 · 101 阅读 · 0 评论 -
React学习--发送请求的方式(axios与fetch)
前端项目发送请求的方式(1)jQuery—$.get 容易回调地狱(2)axios----axios.get Promise风格以上俩种需要xhr,没有xhr就不能发,本质上是ajax请求(3)fetch:系统自带的,直接发送,不需要xhr,也是Promise风格axios发送请求search = async () =>{ const {value} = this.keyWordNode // http://api.github.com/search/user原创 2021-09-01 21:07:07 · 816 阅读 · 0 评论 -
CSS实现居中(垂直/水平)的几种方法总结
居中是CSS布局非常常见的效果,有很多种方法可以实现这种效果:html结构: <div class="box box1"> <span>居中</span> </div>方法一:table-cell(垂直水平居中)CSS: .box1 { width: 200px; height: 200px; background-color: re原创 2021-03-05 21:41:57 · 125 阅读 · 0 评论 -
CSS解决高度塌缩问题和外边距重叠问题
高度塌陷的问题在浮动布局中,父元素默认是被子元素撑开的 当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离 将会无法撑起父元素的高度,导致父元素的高度丢失父元素高度丢失后,其下的元素会自动上移,导致页面布局混乱所以高度塌陷是比较常见的问题,这个问题必须处理 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X原创 2021-03-02 20:47:05 · 567 阅读 · 0 评论 -
CSS选择器-餐厅练习
餐厅选择器下载地址:https://github.com/flukeout/css-diner百度云下载:链接:https://pan.baidu.com/s/1zRID-xx58iD3lCQVkXAaHQ提取码:txm0元素选择器第1关plate选中 plate 元素第2关bento选中 bento 元素id选择器第3关#fancy选中 id = “fancy” 的元素后代选择器第4关plate>apple选中 plate 祖先元素下的 appl原创 2021-02-28 20:54:51 · 727 阅读 · 0 评论