![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端相关知识
文章平均质量分 67
折桂怀橘
坚持搬砖的程序媛~
展开
-
【npm插件reactUI】
【代码】【npm插件reactUI】原创 2023-03-10 09:44:42 · 90 阅读 · 0 评论 -
【自己写的npm_vue_UI插件】
自己研发的UI美化插件目前还在继续做 ✌。原创 2023-03-01 15:36:32 · 101 阅读 · 0 评论 -
【svg】引入svg(非图标)
on +事件名属性只能为同一个事件添加一个处理方法,再对这个属性进行设置时会覆盖掉上一个方法,而element.addEventListener多次使用也不会覆盖上一个,而是从原来的事件上叠加。目的:如果直接以图片的方式引用svg 不能改变内层svg的属性 ,但是一下都引用方式都不能满足我的需求(svg的大小,内部背景颜色或者线条的颜色根据外部传入的值更改),最后我写了一个npm插件 ✌。SVG也可以像HTML那样为元素添加自定义事件。效果同object 不知原因。效果同object 不知原因。原创 2023-02-28 10:48:26 · 703 阅读 · 0 评论 -
【react】读源码笔记
否则直接返回null.effectList中第一个Fiber节点白存在fiber.firstEffect,最后一个元素保存在fiber.lastEffect中,在归的阶段,所有有effectTag的Fiber节点都会被追加到effectList中,最终形成以rootFiber.firstEffect为起点的单向链表。我们知道,除rootFiber以外, 组件mount时,由于是首次渲染,是不存在当前组件对应的Fiber节点在上一次更新时的Fiber节点,即mount时current === null。原创 2023-02-08 14:25:22 · 661 阅读 · 0 评论 -
【react】Hook 源码解读
hook 用在最顶层 不能包在if else 里面原创 2023-02-03 16:04:23 · 540 阅读 · 0 评论 -
【react】理解Fiber
所以假如虚拟DOM很深的话,由于 JS线程和浏览器 GUI 线程是互斥的,处理 js 的时间过长,会导致浏览器刷新的时候掉帧,造成卡顿。把一个耗时长的任务分成很多小片,每一个小片的运行时间很短,虽然总时间依然很长,但是在每个小片执行完之后,都给其他任务一个执行的机会,这样唯一的线程就不会被独占,其他任务依然有运行的机会。在这个阶段的开始,Fiber 有已经在 UI 上渲染的 current 树,finishedWork,或者在渲染阶段建立的 workInProgress 树和效果列表。原创 2023-02-02 11:47:20 · 338 阅读 · 0 评论 -
【react】createPortal &路由鉴权高阶组件
react Portal实现传送门(可以把组件挂载到任意节点上)父组件调用子组件的可用。在componetWillUnmout取消绑定,不然会造成重复渲染。原创 2023-01-03 16:30:54 · 219 阅读 · 0 评论 -
【react】render prop
组件是React中最基础的代码复用单元,render props是一种灵活并且复用性非常高的模式。它可以把特定行为或功能封装成一个组件,提供给其他组件让其拥有这样的能力。ender Props是一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术。原创 2023-01-03 15:40:47 · 111 阅读 · 0 评论 -
【react-hooks】useRef、createRef、useState、useContext、useReducer
1、 useState触发重新渲染,useRef不触发(变量是决定视图图层渲染的变量,请使用useState,其他用途useRef) ------- 显示的是当前点击的值。如果不希望出现新的n:可以使用 useRef 或 useContext 等。4、useRef 是定义在实例基础上的,如果代码中有多个相同的组件,每个组件的 ref 只跟组件本身有关,跟其他组件的 ref 没有关系。3、采用useRef (useRef 类似于类组件的 this)-------显示的是实时值。原创 2023-01-03 15:10:32 · 664 阅读 · 0 评论 -
【react-use】useInterval
原理:利用了useEffect,所有直接使用,不用考虑要清除定时器,用法和setInterval一致。原创 2023-01-03 14:31:06 · 563 阅读 · 0 评论 -
【react-hook】 useCallback
在开始监听一个鼠标的移动的时候,想要删除这个监听不生效,由于是, 加入useState导致组件再次渲染 handleMouse 函数在次渲染, handleMouse 作为组件内的方法, 会跟着一同再次渲染, 并且在内存里, 再次渲染出的 clickFunc!== 前clickFunc.可以根据实际情况将依赖加进去,就能确保依赖不变的情况下,函数的引用保持不变。先来分析下这段代码的用意,Child组件是一个纯展示型组件,其业务逻辑都是通过外部传进来的,这种场景在实际开发中很常见。就这么轻轻松松,一个。原创 2023-01-03 13:55:18 · 592 阅读 · 2 评论 -
【node.js】使用forever/pm2
forever可以在cmd或ssh连接断开时,让项目一直运行,而且可以在项目崩溃时自动重启。forever 管理多个站点,每个站访问量不大,不需要监控。pm2 网站访问量比较大,需要完整的监控界面。原创 2022-08-26 16:16:56 · 404 阅读 · 0 评论 -
【css】布局
流式布局:元素的宽高用百分比做单位,元素宽高按屏幕分辨率调整,布局不发生变化。屏幕窄,元素的宽就小;屏幕大,元素的宽就大,即元素宽高随屏幕尺寸实时变化。eg: Flex Box 或 以Grid 为代表的栅格系统等 + 媒体查询+ 流式布局 或 vm vh rem等宽高单位。响应式布局:采用自适应布局和流式布局的综合方式。自适应布局:不同尺寸下显示的布局会改变(太窄行转列、太窄隐藏 等),但是元素的大小不会改变。eg: 媒体查询(用媒体查询宽高来控制切换某个静态布局) + 多个静态布局。...原创 2022-08-24 20:42:59 · 98 阅读 · 0 评论 -
【openlayers】地图【三】
地理坐标系是三维的,我们要在地图或者屏幕上显示就需要转化为二维,这被称为投影(Map projection)。显而易见的是,从三维到二维的转化,必然会导致变形和失真,失真是不可避免的,但是不同投影下会有不同的失真,这让我们可以有得选择。常用的投影有等矩矩形投影(Platte Carre)和墨卡托投影。所以我们常常看到和用到的坐标系数据往往不是墨卡托坐标,而是EPSG:4326坐标系下的坐标数据。EPSG:4326 的数据一般是这种的。,将图标特性添加容器,再将容器放到。原创 2022-08-09 14:36:20 · 501 阅读 · 0 评论 -
【openlayers】地图【二】
学习不用慌,我们可以看到官网这个界面我们只需要掌握下面几大项就可以操练起来了。当然在学习中要经常查官方文档自然慢慢就会了。原创 2022-07-29 11:13:04 · 1427 阅读 · 1 评论 -
【react】学习笔记
代码】[react]学习笔记。原创 2022-07-27 17:56:56 · 478 阅读 · 0 评论 -
【webgl】 buffer的使用
webgl提供一种很方便的机制 ,就是缓冲区对象,它可以一次性向着色器传入多个顶点的数据。缓冲区对象是WebGL系统中的一块内存区域,我们可以一次性地向缓冲区对象中填充大量的顶点数据,然后将这些数据保存在其中,供顶点着色器使用。如果没有用缓冲区,然后循环遍历 数组列表,位置传递到顶点着色器, 然后去绘制顶点 就像下面代码一样循环一次,绘制一次。使用缓冲区第一步:创建缓冲区对象(gl.createBuffer())// 删除缓冲区对象gl.deleteBuffer(buffer)第二步:绑定缓冲区原创 2022-07-12 11:14:12 · 435 阅读 · 0 评论 -
【webgl】初识
WebGL应用程序代码是JavaScript和OpenGL着色语言的组合。JavaScript是需要与CPU进行沟通OpenGL着色语言,需要与GPU通信是从使用计算机程序模型生成图像的过程。在图形中,一个虚拟场景是使用像几何,视点,纹理,光照和阴影,这是通过一个渲染程序传递信息描述。此呈现程序的输出将是一个数字图像。有两种类型的渲染渲染可以在本地或远程上进行。如果所要呈现的图像太复杂,则呈现远程具有足够的渲染复杂场景所需的硬件资源可以在专用服务器上完成。它也被称为基于服务器的绘制。渲染也可以通过在本地CP原创 2022-07-08 15:48:27 · 815 阅读 · 0 评论 -
【threejs】飞线效果
three原创 2022-07-06 16:50:16 · 3284 阅读 · 3 评论 -
地图数据下载
geojson下载地址原创 2022-07-06 14:59:14 · 272 阅读 · 0 评论 -
【threejs 】添加标签和射线
three原创 2022-07-06 09:36:38 · 1433 阅读 · 2 评论 -
【angular】记录
关于Angular CLIng generate: 新建component、service、pipe, class 等ng new: 新建angular appng update: 升级angular自身,以及依赖ng version: 显示anuglar cli全局版本、以及本地的angular cli、angular code等的版本ng add: 新增第三方库。会做2件事,1)基于npm安装node_modules, 2)自动更改配置文件,保证新的依赖正常工作关于angular的依赖注入(原创 2022-07-06 09:19:20 · 152 阅读 · 0 评论 -
【three.js】世界坐标系和设备坐标系
three原创 2022-07-05 13:52:22 · 6782 阅读 · 0 评论 -
【d3js】小记
d3原创 2022-07-01 10:12:58 · 102 阅读 · 0 评论 -
Vue 3 响应性原理以及源码分析
Vue 3 响应性原理Reactivity(数据是怎么更新的)Proxy & Reflect(何时让数据变化)reactive的函数Ref实现实现computed()方法Vue响应式系统的核心依然是对数据进行劫持,只不过Vue3采样点是Proxy类,而Vue2采用的是Object.defineProperty()。Vue3之所以采用Proxy类主要有两个原因:可以提升性能,Vue2是通过层层递归的方式对数据进行劫持,并且数据劫持一开始就要进行层层递归(一次性递归),如果对象的路径非常深将会非常原创 2022-02-23 17:27:59 · 1057 阅读 · 0 评论 -
vue3新特性补充
差异对比1、实例&生命周期vue3-创建应用createAppcompute组合式 APIv-modelvue中组件的data为什么是一个函数异步组件1、实例&生命周期\vue2vue3创建Vue 实例var vm = new Vue({ // 选项})const app = Vue.createApp({ /* 选项 */ })生命周期beforeCreate、created、beforeMount 、mounted、beforeUpdate、upda原创 2022-01-25 16:08:43 · 2043 阅读 · 0 评论 -
vue3 - watchEffect
watchEffectwatch、watchEffect 不同点停止侦听side effect 副作用watchEffect的执行时机watchEffect、computed 的不同Vue 3 watchVue 3 computed特点:watch、watchEffect 不同点const count = ref(0)watchEffect(() => console.log(count.value))// -> logs 0 组件初始化的时候就会执行一次setTimeout(()原创 2022-01-25 14:08:57 · 2715 阅读 · 2 评论 -
性能分析工具和 Performance API
性能分析灯塔(lighthouse)指标详解性能名词解释FCP (First Contentful Paint)LCP (Largest Contentful Paint)TBT (Total Blocking Time)CLS (Cumulative Layout Shift)TTFBFIDTTI利用Performance API分析网站性能灯塔(lighthouse)指标详解1.Performance(性能)First Contentful Paint(FCP):衡量页面开始加载到页面中第一个元素原创 2022-01-17 15:30:33 · 1072 阅读 · 0 评论 -
vue-源码分析
diff响应式抽象语法树源码分析原创 2022-01-10 14:41:47 · 582 阅读 · 0 评论 -
服务端渲染(SSR) 和客户端渲染(CSR)
一、服务端渲染(SSR)是什么用户使用的浏览器浏览的都是一些没有复杂逻辑的、简单的页面,这些页面都是在后端将 html 拼接好的,然后返回给前端完整的 html 文件,浏览器拿到这个 html 文件之后就可以直接解析展示了,这也就是所谓的服务器端渲染。将组件或页面通过服务器生成HTML字符串,在发送到游览器,最后将静态标记 “混合”为客户端上完全交互的应用程序。二、客户端渲染(CSR)是什么随着前端页面的复杂性提高,前端就不仅仅是普通的页面展示了,可能是添加更多功能的组件,复杂性更大,另外,此时 a原创 2022-01-05 14:07:56 · 667 阅读 · 0 评论 -
angular- 动画垂直滚动到页面指定位置
animate.js/** * 动画垂直滚动到页面指定位置 * @param { Number } currentY 当前位置 * @param { Number } targetY 目标位置 */function scrollAnimation(currentY, targetY, dom) { // 获取当前位置方法 // const currentY = document.documentElement.scrollTop || document.body.scrollTo原创 2021-12-29 15:07:33 · 599 阅读 · 0 评论 -
精灵图CSS Sprites
CSS Sprites 精灵图 应用地址原创 2021-11-18 15:27:03 · 59 阅读 · 0 评论 -
理解 css - clear:both
clear属性总结clear1、下图是三个盒子右浮动 ,.clear 作用在第二个盒子上,当是clear : right (clear : left没效果)的时候第二个盒子才会跑到第二行,并且对第三个盒子没有影响随同和第二盒子一起下来2、同理三个盒子都是左浮动的时候,clear : left (clear : right没效果)第二个盒子才会跑到第二行,并且对第三个盒子没有影响随同和第二盒子一起下来。其实同上我们就知道了其实 clear 针对的是自己,对于第一种情况为什么? 第二个盒子的 clea原创 2021-11-17 14:58:31 · 457 阅读 · 0 评论 -
Vue----keep-alive内部原理
要想搞明白组件的内部实现原理,首先我们得搞明白这个组件怎么用以及为什么要用它,关于组件,官网如下介绍:是Vue中内置的一个抽象组件,它自身不会渲染一个 DOM元素,也不会出现在父组件链中。当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。这句话的意思简单来说:就是我们可以把一些不常变动的组件或者需要缓存的组件用包裹起来,这样 'keep-alive ’ 就会帮我们把组件保存在内存中,而不是直接的销毁,这样做可以保留组件的状态或避免多次重新渲染,以提高页面性能。’keep-aliv原创 2021-11-05 14:35:15 · 357 阅读 · 0 评论 -
angular9 导出Excel文件
1、安装file-saver、@types/file-saver和xlsxnpm install file-saver --savenpm install @types/file-saver --save-devnpm install xlsx --saveimport * as FileSaver from 'file-saver';import * as XLSX from 'xlsx';...... tableData= [ { date:'202022',原创 2021-10-26 14:36:54 · 287 阅读 · 2 评论 -
数据结构随笔
最近想回顾一下数据结构,今天看到一篇内容是是关于 ‘二叉树 ’的,突然感觉数据结构忘记了好多,今天来整理一下把,还曾记得当初准备考研的时候,数据结构还是学的不错的,没想到忘记的这么快~~~一 基本概念1、栈的特点是"LIFO,即后进先出(Last in, first out)"。数据存储时只能从顶部逐个存入,取出时也需从顶部逐个取出。(就像是一个杯子一样,先放入的要想拿出来话,就得先拿出后放入得)var arr = [1, 2, 3, 4, 5];arr.push(6); // 存入数据 arr原创 2021-10-25 15:40:18 · 1508 阅读 · 2 评论 -
Vue 纯前端导出Excel
一、下载依赖npm install xlsx file-saver -Snpm install script-loader -S -D二、.在 -src文件夹下创建增加两个文件/* Blob.js * A Blob, File, FileReader & URL implementation. * 2019-04-19 * * By Eli Grey, http://eligrey.com * By Jimmy Wärting, https://github.com/jimmyw原创 2021-10-20 10:38:24 · 131 阅读 · 0 评论 -
defineProperty和proxy的对比
“数据绑定”这个词是现在市面上流行框架必懂的概念,“数据绑定”的关键在于监听数据的变化,主要的实现方法是defineProperty(数据劫持)和proxy(代理)这两种方法,vue2.0实现数据绑定正是使用前者,vue3.0使用是后者definePropetyES5 提供了 Object.defineProperty 方法,该方法可以在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象。Object.defineProperty(obj, prop, descriptor)参数原创 2021-10-12 15:34:47 · 512 阅读 · 0 评论 -
RxJS:如何用 RxJS 实现高效的 HTTP 请求
原创 2021-10-11 16:06:28 · 328 阅读 · 0 评论 -
RxJS:所有订阅都需要调用 unsubscribe 取消订阅?
从此用 RxJS 订阅的时候,时刻都不忘调用 unsubscribe() 以防内存泄漏。对于结束 Observable,释放内存的方式有三种方式:第一种,Observable 完成值的发送,执行 Observable.onComplete()第二种,Observable 发生错误,执行 Observable.OnError()第三种,订阅者主动取消订阅,执行 subscription.unsubscribe()对于Observable.onComplete()和Observable.OnError(原创 2021-10-11 15:54:53 · 1738 阅读 · 0 评论