- 博客(148)
- 收藏
- 关注
RSS订阅原创 【浏览器】端数据库存储方案----indexDB、localForage
localStorage 只是使用了其功能中的一部分，很多功能受限，如：localStorage 一次只能存一个字段。而业界普遍的前端都是与页面打交道的，数据库操作属于后端的后端了，离的有些远，于是，很多前端都不了解，需要从零开始的数据库学习；说到本地存储数据，首先想到的是 localStorage，应该很多小伙伴都用过，使用很简单。localforage 的作用就是用来规避上面 localStorage 的缺点，同时保留 localStorage 的优点而设计的。
2023-08-31 11:59:51
505
原创 【css】样式 +GASP
GSAP（GreenSock Animation Platform）是一个从 Flash 时代一直发展到现在的专业动画库，底层使用 JavaScript 实现。data-wow-iteration（动画执行次数）这四个属性可选可不选。是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。data-wow-offset（元素的位置露出后距离底部多少像素执行）data-wow-duration（动画持续时间)data-wow-delay（动画延迟时间）
2023-07-27 17:24:23
323
原创 【mybatis】【mybatisPlus】
在application.properties\application.yaml属性配置文件中配置数据源和mybatis相关配置。MyBatis 是一个半自动化的ORM框架 (Object Relationship Mapping) -->对象关系映射。所有的事情，不用Mybatis依旧可以做到，只是用了它，会更加方便更加简单，开发更快速。Mybatis就是帮助程序员将数据存取到数据库里面。
2023-06-15 16:40:55
139
原创 【ConcurrentHashMap】
HashMap 在我们日常的开发中使用频率最高的一个工具类之一，然而使用 HashMap 最大的问题之一就是它是线程不安全的，如果我们想要线程安全, 这时候就可以选择使用 ConcurrentHashMap，ConcurrentHashMap 和 HashMap 的功能是基本一样的，ConcurrentHashMap 是 HashMap 的线程安全版本。如果value为null，则将当前的key-value删除，相当于执行了一次remove(key)，如果函数式异常，则不会影响到原key-value。
2023-06-09 11:00:41
359
原创 【线程、线程池】
此外，被唤醒的线程不能马上从 wait方法返回并继续执行，它必须在获取了共享对象的监视器锁后才可以返回,也就是唤醒它的线程释放了共享变量上的监视器锁后，被唤醒的线程也不一定会获取到共享对象的监视器锁，这是因为该线程还需要和其他线程一起竞争该锁，只有该线程竞争到了共享变量的监视器锁后才可以继续执行。不同于在共享变量上调用notify()函数会唤醒被阻塞到该共享变量上的一个线程，notifyAll()方法则会唤醒所有在该共享变量上由于调用wait系列方法而被挂起的线程。
2023-06-01 17:02:27
88
原创 【WebRTC】音视频通信
比如想用 socket 连接某台服务器，一定要知道这台服务器的一些基本信息，如服务器的 IP 地址、端口号以及使用的传输协议。只有知道了这些信息，才能与这台服务器建立连接。而 Candidate 正是 WebRTC 用来描述它可以连接的远端的基本信息，因此 Candidate 是至少包括 IP 地址、端口号、协议的一个信息集。
2023-05-29 17:46:14
1344
原创 【openlayer】随笔
openlayers 也是一个前端库，那么它肯定离不开 html 的运用，比如，我们首先需要在页面放置一个显示地图的 html 元素，一个 p 元素（假设其 id 属性设置为 “map”，后面简称为 map p），然后在地图初始化的时候指定这个元素，openlayers 会首先在这个元素中创建一个 class 为 ol-viewport 的 p 元素，其尺寸保持与 map p 相同，然后在 ol-viewport p 中创建一个 canvas 元素，在这个 canvas 元素中渲染请求到的地图；
2023-05-05 10:18:37
351
原创 【springboot】知识点汇集
IDEA快速生成get、set等方法： 快捷键alt+insert快速进入生成方法界面。IDEA 生成返回值对象快捷键 ：快捷键ctrl+alt+v。
2023-05-05 10:18:12
430
原创 【CSS】实现长宽比的几种方案
这是最早提出的一种实现方案，主要借助的原理是利用padding-top或者padding-bottom的百分比值，实现容器长宽比。在CSS中padding-top或padding-bottom的百分比值是根据容器的width来计算的。如此一来就很好的实现了容器的长宽比。调整替换后的内容大小，以填充元素的内容框。cover - 调整替换内容的大小，以在填充元素的整个内容框时保持其长宽比。contain - 缩放替换后的内容以保持其纵横比，同时将其放入元素的内容框。none - 不对替换的内容调整大小。
2023-03-31 15:11:16
431
原创 【大屏设计方案】
相差不多的话也可以如下取rem，不同点不用根据rem 设置外层layout的，宽度直接用100vw,高用100vw，整体布局分布用百分比设置高度宽度，中间用flex=1撑开，再里面的布局用流体式。理想中的效果，当屏幕的尺寸比例刚好是16：9时，页面能刚好全屏展示，内容占满显示器，但是如果屏幕过长或者过宽的情况也要保持16：9的情况的话，就会出现一下的如下情况。这就很麻烦，但是也得设置放大比例，一般以宽度为基准 如下获取rem,宽度直接用100vw,高用100vw，整体布局就得用流体布局。
2023-03-24 11:39:48
514
原创 【svg】引入svg（非图标）
on +事件名属性只能为同一个事件添加一个处理方法，再对这个属性进行设置时会覆盖掉上一个方法，而element.addEventListener多次使用也不会覆盖上一个，而是从原来的事件上叠加。目的：如果直接以图片的方式引用svg 不能改变内层svg的属性 ,但是一下都引用方式都不能满足我的需求（svg的大小，内部背景颜色或者线条的颜色根据外部传入的值更改），最后我写了一个npm插件 ✌。SVG也可以像HTML那样为元素添加自定义事件。效果同object 不知原因。效果同object 不知原因。
2023-02-28 10:48:26
664
原创 【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
611
原创 【react】setState 是同步还是异步
React18版本之后 setState默认是异步，假如所有setState是同步的，意味着每执行一次setState时(有可能一个同步代码中，多次setState)，都重新vnodediff + dom修改，这对性能来说是极为不好的。如果是异步，则可以把一个同步代码中的多个setState合并成一次组件更新。在react的生命周期函数或者作用域下为异步，在原生的环境下为同步。在setTimeout、promise，axios或者setState在原生事件中是同步的，即通过dom绑定事件的方式实现。
2023-02-06 13:47:59
1527
原创 【react】理解Fiber
所以假如虚拟DOM很深的话，由于 JS线程和浏览器 GUI 线程是互斥的，处理 js 的时间过长，会导致浏览器刷新的时候掉帧，造成卡顿。把一个耗时长的任务分成很多小片，每一个小片的运行时间很短，虽然总时间依然很长，但是在每个小片执行完之后，都给其他任务一个执行的机会，这样唯一的线程就不会被独占，其他任务依然有运行的机会。在这个阶段的开始，Fiber 有已经在 UI 上渲染的 current 树，finishedWork，或者在渲染阶段建立的 workInProgress 树和效果列表。
2023-02-02 11:47:20
316
原创 【react】createPortal &路由鉴权高阶组件
react Portal实现传送门（可以把组件挂载到任意节点上）父组件调用子组件的可用。在componetWillUnmout取消绑定，不然会造成重复渲染。
2023-01-03 16:30:54
199
原创 【react】render prop
组件是React中最基础的代码复用单元，render props是一种灵活并且复用性非常高的模式。它可以把特定行为或功能封装成一个组件，提供给其他组件让其拥有这样的能力。ender Props是一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术。
2023-01-03 15:40:47
103
原创 【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
626
原创 【react-use】useInterval
原理：利用了useEffect，所有直接使用，不用考虑要清除定时器，用法和setInterval一致。
2023-01-03 14:31:06
476
原创 【react-hook】 useCallback
在开始监听一个鼠标的移动的时候，想要删除这个监听不生效，由于是, 加入useState导致组件再次渲染 handleMouse 函数在次渲染, handleMouse 作为组件内的方法, 会跟着一同再次渲染, 并且在内存里, 再次渲染出的 clickFunc!== 前clickFunc.可以根据实际情况将依赖加进去，就能确保依赖不变的情况下，函数的引用保持不变。先来分析下这段代码的用意，Child组件是一个纯展示型组件，其业务逻辑都是通过外部传进来的，这种场景在实际开发中很常见。就这么轻轻松松，一个。
2023-01-03 13:55:18
569
2
原创 【node.js】使用forever/pm2
forever可以在cmd或ssh连接断开时,让项目一直运行,而且可以在项目崩溃时自动重启。forever 管理多个站点，每个站访问量不大，不需要监控。pm2 网站访问量比较大，需要完整的监控界面。
2022-08-26 16:16:56
393
原创 【css】布局
流式布局：元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。屏幕窄，元素的宽就小；屏幕大，元素的宽就大，即元素宽高随屏幕尺寸实时变化。eg: Flex Box 或 以Grid 为代表的栅格系统等 + 媒体查询+ 流式布局 或 vm vh rem等宽高单位。响应式布局：采用自适应布局和流式布局的综合方式。自适应布局：不同尺寸下显示的布局会改变(太窄行转列、太窄隐藏 等)，但是元素的大小不会改变。eg: 媒体查询(用媒体查询宽高来控制切换某个静态布局) + 多个静态布局。...
2022-08-24 20:42:59
91
原创 【openlayers】地图【三】
地理坐标系是三维的，我们要在地图或者屏幕上显示就需要转化为二维，这被称为投影（Map projection）。显而易见的是，从三维到二维的转化，必然会导致变形和失真，失真是不可避免的，但是不同投影下会有不同的失真，这让我们可以有得选择。常用的投影有等矩矩形投影（Platte Carre）和墨卡托投影。所以我们常常看到和用到的坐标系数据往往不是墨卡托坐标，而是EPSG:4326坐标系下的坐标数据。EPSG:4326 的数据一般是这种的。，将图标特性添加容器，再将容器放到。
2022-08-09 14:36:20
459
原创 【Sqlite3】【Nodejs 】
serialize可保证回调函数中的代码顺序执行，但其中的代码若是异步调用，其不能将异步调用变为同步调用！执行的顺序是：00000==>22222==>44444==>11111=>33333。上面是封装的sqlite 这里就可以使用了。最近在使用 Sqlite 小记一下。......
2022-08-09 10:38:15
984
原创 【openlayers】地图【二】
学习不用慌，我们可以看到官网这个界面我们只需要掌握下面几大项就可以操练起来了。当然在学习中要经常查官方文档自然慢慢就会了。
2022-07-29 11:13:04
1322
1
原创 【openlayers】地图【一】
OpenLayers的核心组件是map（ol/map），被呈现到目标容器当中（例如，包含地图的网页上的div元素）；所有的地图元素要么在构造时配置所有映射属性。ol/layer/Tile瓦片图层——平铺-渲染网格中提供平铺图像的源，网格按特定分辨率的缩放级别组织。ol/layer/VectorTile矢量瓦片——作为矢量分幅提供的数据呈现。ol/layer/Image图像——渲染以任意范围和分辨率提供地图图像的源。ol/layer/Vector矢量图层——在客户端呈现向量数据。...
2022-07-28 17:25:46
729
原创 【webgl】 buffer的使用
webgl提供一种很方便的机制 ，就是缓冲区对象，它可以一次性向着色器传入多个顶点的数据。缓冲区对象是WebGL系统中的一块内存区域，我们可以一次性地向缓冲区对象中填充大量的顶点数据，然后将这些数据保存在其中，供顶点着色器使用。如果没有用缓冲区，然后循环遍历 数组列表，位置传递到顶点着色器， 然后去绘制顶点 就像下面代码一样循环一次，绘制一次。使用缓冲区第一步：创建缓冲区对象（gl.createBuffer()）// 删除缓冲区对象gl.deleteBuffer(buffer)第二步：绑定缓冲区
2022-07-12 11:14:12
412
原创 【webgl】初识
WebGL应用程序代码是JavaScript和OpenGL着色语言的组合。JavaScript是需要与CPU进行沟通OpenGL着色语言，需要与GPU通信是从使用计算机程序模型生成图像的过程。在图形中，一个虚拟场景是使用像几何，视点，纹理，光照和阴影，这是通过一个渲染程序传递信息描述。此呈现程序的输出将是一个数字图像。有两种类型的渲染渲染可以在本地或远程上进行。如果所要呈现的图像太复杂，则呈现远程具有足够的渲染复杂场景所需的硬件资源可以在专用服务器上完成。它也被称为基于服务器的绘制。渲染也可以通过在本地CP
2022-07-08 15:48:27
791
原创 【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
148
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人