- 博客(13)
- 收藏
- 关注
RSS订阅原创 JS防抖与节流
函数防抖(debounce): 触发高频事件后n秒内只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间函数节流(throttle):高频事件触发，但是在n秒内只会执行一次函数节流与函数防抖都是为了限制函数的执行频次。以优化函数触发频率过高导致响应速度跟不上 出现延迟卡顿的现象实际开发中需要防抖处理的场景还是非常多的，如resize事件、scroll事件、input事件、拖拽事件等。除了这些,还有很多情况需要我们结合实际开发处理。// 防抖函数const handlerScroll = fu
2021-10-27 20:59:12
217
原创 RxJS进行定时请求
使用定时器发送异步请求会不按照顺序执行，得到的结果可能也不是顺序的举个栗子，要请求进度条的进度 可能得到的是50% 30% 70% 21%这种不按照顺序执行的得到的结果但是RXJS也可以对这种异步情况进行处理interval 操作符可以处理定时任务，而且更强大的是返回结果也是有顺序的。interval:创建一个可观察对象，在规定的调度程序中，以规定的时间间隔发出连续的数值。官方示例import { interval } from 'rxjs'; import { take } from
2021-10-13 20:47:24
604
原创 React定义组件及state的使用
1.React的特点采用组件化模式、声明式编码，提高开发效率及组件复用率。在React Native中可以使用React语法进行移动端开发使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的操作2.为什么React要使用JSX而不使用JS呢?JSX 创建虚拟DOM的方式为 const VDOM = <h1>Hello,React</h1> // 浏览器页面就会显示Hello,ReactJS创建虚拟DOM的方式为 // 这种方
2021-09-15 00:16:57
830
原创 CSS3伪元素
1.伪元素选择器伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTNL结构。比如一些应用场景中需要在内容前面加上盒子或者是在内容后面加上盒子的时候，这种时候就可以使用伪元素的方式来替代。使用方式：::before -------------- 在元素内部的前面插入内容::after------------------ 在元素内部的后面插入内容注意！！！1.before和afgter创建一个元素，但是属于行内元素2.新创建的这个元素在文档树中是找不到的，所以
2020-08-29 18:05:20
203
原创 Vuex
1.什么是Vuex?Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据的共享2.使用vuex统一管理状态的好处1.能够在vuex中集中管理共享的数据，易于开发和后期维护2.能够高效实现组件之间的数据共享，提高开发效率3.存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步3.什么样的数据适合存储到vuex中一般情况下，只有组件之间的共享数据才有必要存储到vuex中，对于组件中的私有数据，就存储在组件自身的data中4.vuex的基本使用1.安装vue
2020-08-25 06:24:15
124
原创 Vue项目实现记住密码功能
Vue项目实现记住密码功能记住密码一般是记录在cookie中，设置一个过期时间，在过期时间之内用户的用户名和密码都保存在cookie中。首先编写存入/取出信息cookie中的方法 // 设置cookie mounted() { this.getCookie(); }, methods: { setCookie(cname,cpwd,cdays) { //获取当前时间 var curDate = new Date(); //设置7天过期时间 curDate.setTi
2020-08-14 16:11:39
548
1
原创 CSS清除浮动
1.为什么要清除浮动假设有一个场景，一个父盒子里面有三个子盒子，但是这三个子盒子使用了float来排列。也就是说三个盒子都是浮动的，所以盒子不占有高度。父盒子没有设置高度，目的就是想要让子盒子自己填充，如果子盒子都是使用的浮动，那么就不占有高度。那么这个父盒子及子盒子的区域就会被其他的非浮动盒子填充。以上就是浮动所带来的影响。2.清除浮动的方式2.1 额外标签法(隔离法)具体实现： 在浮动元素的末尾添加一个空的标签例如：<div style="clear:both"></di
2020-08-08 22:17:28
97
原创 Vue项目遇到的问题归纳
1.设置html,body的width,height之后出现滚动条？刚开始的时候，想要做登录界面，然后就写一个新的界面。这个时候遇到的问题是整个html只占屏幕的部分高度。怎么解决？很自然的想到设置宽高为100%html body {height: 100%;width: 100%}但是这个时候出现的问题是： 界面上出现了滚动条。界面上啥也没有，出现滚动条...
2020-08-06 22:11:31
271
原创 WebSocket建立连接的过程
1.实时通讯的方式1.1 Ajax轮询异步的方式，是通过ajax+js的方式，每隔一段时间发送一个请求到后端，询问服务器有没有相关的消息或者是数据的更新，如果有就把数据拿到前端进行渲染。但是这种方式是一种死循环，会一直循环下去。ajax是不需要刷新浏览器的，页面上的一些状态更新的操作就需要使用ajax轮询去做。1.2 Long pullLong pull的原理和Ajax轮询的方式是差不多的，但是不同的是Long pull是一种阻塞的方式。性能差这两种方式其实都是向服务器发送请求等待处理，都是被动的
2020-08-04 13:39:39
2426
原创 webpack学习总结
webpack学习总结webpack是实现前端工程化的一个工具。什么是前端工程化？前端工程化指的是将前端开发的流程规范化、标准化，包括开发流程、技术选型、代码规范、构建发布等用于提升前端工程师的开发效率和代码质量1.安装webpack1.1 安装方式的选择安装wbepack可以使用npm的方式也可以使用yarn的方式npm下载速度太慢，推荐使用yarn的方式进行安装yarn相对于webpack的而言的优势在于yarn相对于npm的优势：（1）yarn并行安装，同步执行所有的任务，提高了性
2020-07-30 16:02:07
150
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人