前端
文章平均质量分 57
swallowblank
这个作者很懒,什么都没留下…
展开
-
什么时候一个变量应该以state的形式出现?
当props或state改变,触发rerender时,相当于会重新执行一遍这个函数,所以这个函数中定义的局部变量也会初始化,因此下面代码中,按下按钮后会触发。(不会初始化),即使是父组件重新渲染,子组件中的这种变量依然不会刷新。当props或state改变,触发rerender时,这个变量。依然不改变——一直是。原创 2022-08-23 21:17:15 · 628 阅读 · 0 评论 -
为什么函数组件会渲染两次?
为什么函数组件会渲染两次?原创 2022-08-23 19:52:06 · 748 阅读 · 0 评论 -
利用原生JS实现实时文本框搜索,并实现防抖和竞态
const {useEffect, useState} = React;const root = ReactDOM.createRoot( document.getElementById('app'));// 创建一个实现竞态的函数,对于多次发送的请求,永远维持最新的请求的响应function generateStateFunction(fn) { let requestId = 0; return function() { requestId ++;原创 2022-05-16 14:56:04 · 523 阅读 · 0 评论 -
Rust and WebAssembly 后篇 + 补充
Rust与JavaScript的接口⚡ 这是本教程中需要理解和掌握的最重要的概念之一!JavaScript 的垃圾收集机制作用的堆——分配对象、数组和 DOM 节点的地方——与 WebAssembly 的线性内存空间不同,我们的 Rust 值存在于其中。 WebAssembly 目前无法直接访问垃圾收集堆(截至 2018 年 4 月,这预计会随着“接口类型”提案而改变)。另一方面,JavaScript 可以读取和写入 WebAssembly 线性内存空间,但只能作为标量值(u8、i32、f64 等)原创 2021-10-11 18:40:05 · 495 阅读 · 0 评论 -
Rust and WebAssembly 先导篇
原文地址:Rust ???? and WebAssembly ????为什么是Rust和WebAssembly?更底层的控制与高等级的工学设计更小的 .wasm 体积不需要重写任何东西良好的兼容性更底层的控制与高等级的工学设计JavaScript网络应用着力于获得更加可靠的性能和表现。但是JavaScript的动态类型和垃圾回收造成的卡顿会产生反面的影响。如果你不小心偏离了JIT的最佳路径,看似很小规模的代码的改动都可能造成性能的急剧下降。更小的 .wasm 体积代码大小很重要,因为对原创 2021-10-09 15:07:43 · 204 阅读 · 0 评论 -
折腾我的vscode
最近看了一个视频,发现了一个他的字体还不错 Releases · microsoft/cascadia-code但是我发现,他的代码关键字都是斜体的,很好看,但是我的没有。解决方案:https://stackoverflow.com/questions/41320848/how-do-i-get-visual-studio-code-to-display-italic-fonts-in-formatted-code...原创 2021-08-01 11:35:05 · 104 阅读 · 0 评论 -
手写实现JSONP功能
相信很多人都看过jsonp的相关知识,对jsonp的工作原理大致有所了解,不过眼看千遍不如手写一遍,今天就手写实现一下jsonp。JSONP全称json with padding是解决跨域问题的策略之一。该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,并构造出一个执行该函数的字符串,返回的字符串能直接作为js执行,这样客户端就可以定制自己的函数以处理返回的数据。如果要理解jsonp很重要的一点是,用scr原创 2021-06-23 20:23:18 · 979 阅读 · 1 评论 -
小米前端笔试题记录——动态规划
选择题Promise.all, race,allSettled下面关于Promise说法正确的是(注意“返回结果”的意思包含成功或者失败):A. Promise.all在所有给定的promise都fulfilled后才返回结果B. Promise.race在给定的promise中,某个fulfilled后才返回结果C. promise.then的回调函数中,可以返回一个新的promiseD. 对于一个向后台获取数据已经产生结果的promise:p1,再次调用p1.then,不会去重新发起请求获取原创 2021-06-20 13:35:01 · 1395 阅读 · 8 评论 -
HTML原生文档加载事件+React\Vue生命周期+浏览器的渲染 三者之间顺序关系思考
事件的起因是这样的:我有一个为自己的博客增加暗模式的需求,需要把用户的选择保存在loaclstorage里,但是要把内容发布到github Pages里需要在node环境下编译,就会出现找不到window,localstorage等对象,如果要解决这一问题就需要把逻辑写到useEffect里。但问题就随之而来了,经过后续的测试发现,useEffect的回调函数是在文档的onload事件之后的,那么就会发生样式闪烁的问题,因为,onLoad事件发生之前浏览器就已经开始绘制了,如果这时候再切换主题颜色,就有原创 2021-06-14 16:22:48 · 669 阅读 · 1 评论 -
this的绑定机制 以及 手写实现call、apply、bind
前言call apply bind 他们都是为了把对象绑定到这个函数的this上。其实我在这之前一直是这样理解的——“把this绑定到函数上”,毕竟传进来的参数是this,其实这么理解是正向的,但是一直感觉很难理解。直到今天看了一个视频,他这么反着一说,我突然有点茅塞顿开的感觉。其实仔细想一想,call,apply,bind 这三个函数执行的主体都是函数(函数中的this理解为占位符,他们只在执行该函数时才有明确的指向,因此我们需要清楚的知道,在某一时刻这个this到底表示的是什么,这也是JavaS原创 2021-06-01 14:01:51 · 177 阅读 · 0 评论 -
实现一个两栏三列布局,要求两边固定宽度,中间自适应
方法1:margin + 双absolute <style> html, body { margin: 0; height: 100%; box-sizing: border-box; } div { height: 100%; } .box { position: relative;原创 2021-04-01 21:37:07 · 132 阅读 · 0 评论 -
实现一个两栏布局,左栏宽度固定,右栏自适应
方法1:左侧使用float,右侧margin-left原理:因为float就脱离文档流了,右侧会挤到左侧的位置上,所以需要margin-left,margin-left要等于float的宽度。<style>* { box-sizing: border-box;}html, body { margin: 0; height: 100%;}div { height: 100%;}.aside { width: 300px; float原创 2021-04-01 20:40:25 · 416 阅读 · 0 评论 -
如何创建一个水平垂直居中 且 宽高成比例缩放的div?
答:利用padding-bottom + absolute。如果height的值是百分制,则是以父元素的高度为标准,但是padding的值如果是百分制,那么是以父元素的宽度为标准。我们可以从这里入手,创建一个宽度为100%,高度为0,但是padding-bottom为56.25%(16:9)的div.inner。这个inner的position为relative。再创建一个div.box,box的position为absolute,width和height都为100%即可。<!DOCTYPE h原创 2021-04-01 16:30:57 · 144 阅读 · 0 评论 -
记遇到的两个BUG
未解决bug1我们假设有这么一个statethis.state = { isShow: false, events: []}show是一个非常简单的原始类型的属性,events是一个很长的对象的数组。show用来控制modal是否展示,events用来渲染一个list。但是当我只改变show 的值的时候,也会触发class组件的render()函数,下图中,135-137行的代码就会重新被执行,这无疑是造成巨大浪费的。首先,我猜想,虽然这里会执行136行很多次,但是在diff算法下,发现不原创 2021-03-13 17:21:26 · 148 阅读 · 0 评论 -
朝花夕拾 —— Promise
Promise 作为ES6中提出的十分重磅的对象,我自然是学了很久,但是,由于我对细节的疏忽,导致自以为对其理解的很到位,但是每当看起别人的源码总感觉哪里怪怪的,如今我就再强化学习一番。一个例子入手观察以下两个代码,看看有何不同,这也是我一直疏忽的关键点:片段1new Promise((resolve, reject) => { setTimeout(() => { resolve(1); }, 1000);}).then(res => { aler原创 2021-03-05 21:16:26 · 79 阅读 · 0 评论 -
HTML中的几何与滚动
元素具有以下几何属性:offset系列:offsetParent — 是最接近的 CSS 定位的祖先(relative、absolute、fixed),或者是 td,th,table,body。offsetLeft/offsetTop — 是相对于 offsetParent 的左上角边缘的坐标。offsetWidth/offsetHeight — border+padding+content。client系列clientLeft/clientTop — 从元素padding外侧左上角到bo原创 2021-01-22 13:36:58 · 199 阅读 · 0 评论 -
给定年月,创建一个当月的日历
function createCalendar(elem, year, month) { let mon = month - 1; // months in JS are 0..11, not 1..12 let d = new Date(year, mon); let table = '<table><tr><th>MO</th><th>TU</th><th>WE</th>转载 2021-01-21 12:35:08 · 174 阅读 · 0 评论 -
修改document
转载 2021-01-20 21:28:19 · 114 阅读 · 0 评论 -
css卡片——毛玻璃特效,backdrop-filter的性能问题记录
今天在youtube上看到了一个关于使用css完成毛玻璃特效的视频。很奇怪的一点是,在card上加入了backdrop-filter之后,card上的所有过渡动画肉眼可见的不流畅,在用titl.js之后更是卡的不行。backdrop-filter: blur(5px);当去掉这个属性以后,整个页面极其流畅。...原创 2020-12-15 17:18:37 · 2428 阅读 · 1 评论 -
使用Prettier美化代码
在项目根目录创建.prettierrc{ "semi": fasle, "singleQuote": true, "tabWidth": 4,}原创 2020-11-30 19:07:40 · 150 阅读 · 0 评论 -
一丢丢学习之webpack4 + Vue单文件组件的应用
一丢丢学习之webpack4 + Vue单文件组件的应用 之前刚学了一些Vue的皮毛于是写了一个本地播放器https://github.com/liwenchi123000/Local-Music-Player,如果觉得ok的朋友可以给个star。就是很简单,由于是第一次用Vue写小demo,所以代码写的有点蠢很裸的那种,不像大神那样一看代码组...原创 2018-04-13 14:54:00 · 173 阅读 · 0 评论 -
前端杂谈
前端杂谈 1.JavaScript中的this:http://www.ruanyifeng.com/blog/2018/06/javascript-this.html2.js中字符串匹配,"index.html".indexOf(".html") != -1因为search和match的参数都是正则表达式,在匹配特殊字符时需要转化...原创 2018-07-08 18:00:00 · 99 阅读 · 0 评论 -
css常用知识
css常用知识 Q: CSS 有哪些样式可以给子元素继承!可继承的:font-size,font-weight,line-height,color,cursor等不可继承的一般是会改变盒子模型的:display,margin、border、padding、height等-----------------------------...原创 2019-04-08 21:57:00 · 149 阅读 · 0 评论 -
JS面试问题小总结——1
目录JS常见问题Q: JS有几种数据类型,其中基本数据类型有哪些!Q: null 和 undefined的区别Q:垃圾收集Q: 给一个DOM添加捕获和冒泡的两种写法的事件点击,谁先执行?(如何阻止冒泡)Q:相等运算符和严格相等运算符Q: 谈谈你对ajax 的理解,以及用原生 JS 实现有哪些要点需要注意;Q: JS 实现一个闭包函数,每次调用都自增1Q:...原创 2019-04-09 21:41:00 · 1690 阅读 · 0 评论 -
前端之网络协议、浏览器
前端之网络协议、浏览器 问题汇总:https://github.com/forthealllight/blog/issues/19============================================================================================================...原创 2019-04-11 22:36:00 · 185 阅读 · 0 评论 -
npm查看、更换 镜像、代理
之前都每次百度查别人的,怪麻烦的,自己整理一下,自用原创 2020-11-22 15:35:32 · 817 阅读 · 0 评论 -
web布局——Flex布局进阶学习
文章目录1. 创建一个flex容器2. 用flex-wrap实现多行Flex容器3. 简写属性flex-flow:4. flex元素上的属性4.1 flex-basis4.2 flex-grow4.3 flex-shrink4.4 三者的简写前言为什么说是进阶学习,在初识flex布局时,觉得比传统布局好用无数倍。随着经常使用,flex布局的简单使用随手就来,比如:body { display: flex; flex-direction: column/row; justify-content:原创 2020-11-20 15:13:20 · 308 阅读 · 0 评论 -
react react-router-dom 踩坑——根据是否登录进行页面展示
文章目录react react-router-dom 踩坑——根据是否登录进行页面展示网上的参考react react-router-dom 踩坑——根据是否登录进行页面展示我做了一个简单的前端,为了省力,把登录成功的token保存到localStorage里,我在一个受保护的页面被访问之前在useEffec中判断是否存在token,如果存在就可以渲染,否则用react-router-dom的Redirect进行重定向。但是似乎出了一点问题。大概代码逻辑如下:export default funct原创 2020-10-07 10:51:06 · 744 阅读 · 1 评论 -
Ajax——XHR与Fetch的选择
Fetch Api 全面介绍与使用 (MDN)XMLHttpRequest vs the Fetch API: What’s Best for Ajax in 2019?原创 2020-09-29 10:42:05 · 177 阅读 · 0 评论 -
web布局——Grid布局学习
文章目录1 基础概念2 网格轨道与grid-template-columns[rows]2.1 网格轨道的宽度单位 fr2.2 网格轨道函数 repeat()2.3 隐式和显式网格轨道大小和minmax()函数2 网格线3.1 跨轨道放置网格元素4 网格区域5 网格间距6 使用z-index控制层级1 基础概念和flex布局一样,先声明几个概念以防混淆:网格容器:指声明了display: grid的父容器网格元素:指网格容器的直系子元素,可以被gird控制。网格轨道:网格线之间的“轨道”网格线原创 2020-09-09 14:48:37 · 564 阅读 · 0 评论 -
scss中循环的妙用
文章目录1 @each in 循环2 @for... from... to 循环1 @each in 循环使用一个变量: #{$变量名}$colors: ( p1: rgb(255, 113, 61), p2: lightblue, p3: lightseagreen);@each $key, $color in $colors { &.#{$key} { background-color: $color; }}2 @for原创 2020-09-08 15:08:04 · 6007 阅读 · 0 评论 -
Flex布局【弹性布局】学习
Flex布局【弹性布局】学习 先让我们看看在原来的学习中遇到的问题之前在软件工程的大作业中,自己从零开始学习如何开发一个网站,从页面,到后台,当然数据库是大二的必修课在学习如何编写一个静态页面的时候,完全是自学,自己摸索,所以遇到了很多问题,自己花费了太多时间去解决问题,今天就拿其中一个比较让我头疼的问题来引出今天的话题当时在初识h...原创 2018-02-18 14:55:00 · 331 阅读 · 0 评论 -
JS 正则表达式——自学笔记
从大二知道正则表达式,但是一直没有系统的学习过,每次用的时候都是抄百度,今天打算正规的学习一下文章目录1 创建声明一个正则对象2 RegExp() 构造函数3 字符串匹配常用方法3.1 正则对象方法3.2 字符串对象方法4 正则表达式语法 & 常用表达式1 创建声明一个正则对象有两种方法可以创建一个 RegExp 对象:一种是字面量,另一种是构造函数。字面量由斜杠包围而不是引号包围。构造函数的字符串参数由引号而不是斜杠包围。以下三种表达式都会创建相同的正则表达式:let reg原创 2020-08-27 17:32:10 · 264 阅读 · 0 评论 -
HTMLCollection、 NodeList | children、 childNodes,以及节点类型
1 HTMLCollectionHTMLCollection 接口表示一个包含了元素(元素顺序为文档流中的顺序)的通用集合(generic collection)。HTML DOM 中的 HTMLCollection 是即时更新的(live);当其所包含的文档结构发生改变时,它会自动更新。注意以下几点:[Docuement, Element].getElementsBy[TagName, ClassName]()返回的就是一个HTMLCollection。但是,特殊的是[Docuement原创 2020-08-07 15:21:09 · 1271 阅读 · 0 评论 -
【困难版】如何实现一个类vue的双向绑定——Vue2.0 | MVVM | 数据劫持+发布订阅
相信根据上一篇文章,你已经大致明白Vue的工作原理了,但还有很长一部分路要走,我花了三天时间,满打满算估计有16个小时,才把这些弄明白,其中写了三版的代码,接下来的内容要比上一篇难理解20倍不止。因为我们将要引入Dep类,我在一开始看的时候,看了两个多小时,都没明白Dep类的作用是什么,甚至有的代码都看不懂,而且困难版的Vue实现还支持嵌套数据,在下面的内容中你可能会难以理解这些点:Dep的作用Dep和watcher的关系Dep是怎么保存Watcher的Dep和变量的关系访问子变量时,如何触发原创 2020-07-23 20:50:26 · 2896 阅读 · 3 评论 -
如何理解vue中的Dep类,太绕了
最近看实现一个vue,然后看到了vue的源码部分,这个Dep属实给我整懵了,如果数据绑定、模板解析的难度算1颗星,这个Dep掺和进去以后就是100颗星。怎么说呢,按顺序理一遍,首先,创建Vue实例,observer订阅vm.$data,递归的订阅data中的每一个变量,用defineProperity,然后就到了这个get了。关键是看什么时候把watcher添加到dep.subs[]里的,有的文章说是在订阅时触发get的时候创建的watcher,简直就是胡扯。大概顺序是这么个回事,编译html模板时,原创 2020-07-22 17:07:47 · 6892 阅读 · 6 评论 -
【简易版】如何实现一个简单的双向绑定——Vue2.0 | MVVM | 数据劫持+发布订阅
1 从MVC到MVVM1.1 MVCView UI布局,展示数据。Model 管理数据。Controller 响应用户操作,并将 Model 更新到 View 上。但这依然有三个痛点开发者在代码中大量调用相同的 DOM API, 处理繁琐 ,操作冗余,使得代码难以维护。大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。当 Model 频繁发生变化,开发者需要主动更新到View ;当用户的操作导致 Model 发生变化,开发者同样需要将变化的数据同步到Model 中,这样原创 2020-07-21 20:31:39 · 769 阅读 · 1 评论 -
还在使用Media Query?来试试Grid布局的黑魔法吧——使用Grid、minmax快速完成响应式布局
一开口就知道是老qq看点了,今天从youtube上学了一招,一行代码解决响应式布局的处理,只适用于大方向的布局,对于布局细节还是要用媒体查询。1 先看看基础布局和基础css<!DOCTYPE html><html lang="en"><head> ...hidden</head><body> <div class="container"> <div class="queto">原创 2020-07-15 17:34:00 · 416 阅读 · 0 评论 -
单页应用在部署后利用localhost发不出数据请求
因为请求是浏览器发出的,因此在本地开发的时候,你的node、java、Django、flask、php服务器刚好也在本地,当你把spa打包和服务挪到服务器上时,你的请求还是浏览器发出的,相当于你的localhost是你浏览器所在的这台主机,因此,你要把前端项目的BaseURL删除,浏览器会自动转发到你的公网ip。...原创 2020-05-20 18:21:40 · 786 阅读 · 2 评论 -
如何在React.FunctionComponent中使用async/await同步获取后端api数据
直接上例子const BlogList: React.FunctionComponent<IProps> = (props: IProps) => { let [fakedata, setFakeData] = React.useState<blogsData>([]); React.useEffect(() => { async function temp () { let res = await getBl原创 2020-05-12 11:05:39 · 2844 阅读 · 0 评论