- 博客(23)
- 收藏
- 关注
RSS订阅原创 将canvas界面转成本地链接
将canvas界面转成本地链接分成三个步骤canvas 转 base64function convertCanvasToImage(canvas) {return canvas.toDataURL(“image/png”);}base 转 blobfunction dataURItoBlob(dataURI) {var byteString = atob(dataURI.split(‘,’)[1]);var mimeString = dataURI.split(‘,’)[0].sp
2022-05-16 17:47:32
1042
原创 useCallback 与 React.Memo之性能优化
组件优化useCallBack （缓存钩子函数）React.Memo (props浅比较)useCallBack （缓存钩子函数）使用场景：如果父组件将一个函数作为props参数传给了子组件，当父组件因为state或依赖的props发生变化时，子组件也会发生更新，因为每当父组件发生更新时内部的函数都会被重新创建，这导致依赖了这个函数的子组件也会被更新，这种情况就是useCallBack发挥作用的时候了。useCallBack官方描述React.Memo (props浅比较)类似于类组件React.
2022-03-23 17:03:27
918
转载 Go 状态协程 Stateful
状态协程package mainimport ( "fmt" "math/rand" "sync/atomic" "time")// 读数据结构体type readOp struct { key int resp chan int}// 写据结构体type writeOp struct { key int val int resp chan bool}func main() { var read
2021-12-13 13:58:20
163
原创 最长有效括号
求最长合法括号长度题目题解题目给你一个只包含 ‘(’ 和 ‘)’ 的字符串，找出最长有效（格式正确且连续）括号子串的长度。示例 1：输入：s = “(()”输出：2解释：最长有效括号子串是 “()”示例 2：输入：s = “)()())”输出：4解释：最长有效括号子串是 “()()”示例 3：输入：s = “”输出：0提示：0 <= s.length <= 3 * 104s[i] 为 ‘(’ 或 ‘)’题解...
2021-11-25 11:35:38
263
原创 利用ReactDOM.createPortal 实现一个tooltip组件
/**一、创建btn和tooltip组件二、获取当前btn的几何属性和全局定位属性三、tooltip需要得到btn的几何属性和全局定位属性四、tooltip根据btn的位子几何信息进行定位（当滚轮滑动时重新定位tooltip）五、创建点击事件、点击btn反转display状态、点击不再tooltip中 隐藏tooltip用到的api useRef useEffect usestate createPortaluseRef：作用在实际的元素上可以获取当前元素的实例，作用在组建上时需要配合api
2021-11-11 17:31:36
1281
原创 ahooks 源码学习
ahooks 源码学习LifeCycle 生命周期相关的hooksuseMountuseUpdateuseUnmountuseTrackedEffectLifeCycle 生命周期相关的hooksuseMount利用useEffect的特性，当他的依赖项为空数组时组件只在加载完成时执行一次回调函数import { useEffect } from 'react';const useMount = (fn: () => void) => { useEffect(() => {
2021-11-11 17:25:20
521
原创 盛最多水的容器
题目：给你 n 个非负整数 a1，a2，...，an，每个数代表坐标中的一个点(i,ai) 。在坐标内画 n 条垂直线，垂直线 i的两个端点分别为(i,ai) 和 (i, 0) 。找出其中的两条线，使得它们与x轴共同构成的容器可以容纳最多的水。解题方式：双指针法解题思路：如下通过题目中的描述可以得出以下这两个结论一、两个木板的盛水量和短的那根正相关，和长的那根无关。二、两个木板的盛水量和它们之间的距离正相关。既然知道两个木板的盛水量和它们之间的距离正相关，那就直接取...
2021-11-11 17:20:00
400
原创 git基本操作
文章目录前言一、什么是git？二、初始化git三、查看状态总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、什么是git？分布式版本管理工具，对代码进行（备份、记录、共享、协同）操作二、初始化git代码如下：git init三、查看状态代码如下：git status总结提示：这里对文章进行总结：例如
2020-09-22 15:36:31
68
原创 使用echarts的map-polygon地图
文章目录前言一 申请百度地图AK二、使用步骤1.将百度地图sdk插入到html模板中2.在插入图表的组件中插入如下代码3.引入echarts4.将官网实例的地图代码CV到组件中。前言一 申请百度地图AK进入百度地图开放平台>开发文档>Web服务API>获取密钥AK。如图二、使用步骤1.将百度地图sdk插入到html模板中代码如下（示例）：<script type="text/javascript" src="//api.map.baidu.com/api?v=2
2020-09-20 13:59:31
1177
原创 intersectionObserver实现图片懒加载
图片懒加载图片懒加载的目的：更加快速的加来页面，减少不必要的资源浪费。简单代码实现<body> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br>
2020-09-17 23:27:05
148
原创 在npm上发布Vue组件库
文章目录前言一、注册npm账号二、创建开发环境三、发布到npm前言在日常些项目时用的都是别人写好的库，就没想过自己也发布一些实用的组件库吗一、注册npm账号二、创建开发环境1、这里我用的时vue cli3vue create mycomponent2、项目生成后在根目录下创建package文件夹存放组件目录结构如下图3、添加配置文件vue.config.jsmodule.exports = { // 扩展 webpack 配置，使 packages 加入编译 c
2020-09-02 14:35:04
278
原创 js_class
class首先先写一个简单的class看看 class a{ constructor(name){ this.name = name } sayname(){ console.log(this.name) } } class b extends a{ constructor(name,age){ ...
2020-03-09 21:08:42
149
原创 常用布局
CSS经典布局双飞翼布局布局要求基本描述header和footer各自占领屏幕所有宽度，高度固定。中间的container是一个三栏布局。三栏布局两侧宽度固定不变，中间部分自动填充整个区域。中间部分的高度是三栏中最高的区域的高度。双飞翼布局的实现left、center、right三种都设置左浮动。设置center宽度为100%设置负边距，left设置负边距为100%，right...
2020-03-05 17:15:18
123
原创 层叠上下文
层叠上下文在本篇之前的部分——运用 z-index，（我们认识到）某些元素的渲染顺序是由其 z-index 的值影响的。这是因为这些元素具有能够使他们形成一个层叠上下文的特殊属性。MDN解释层叠上下文由满足以下任意一个条件的元素形成：文档根元素（）；position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；posi...
2020-02-26 22:53:34
278
原创 事件循环
js_任务列队任务列队之主程序任务（main非异步任务）、微任务列队（如Promise任务）、宏任务列队（如settimeout任务）执行优先级 主程序任务>微任务>宏任务注意：定时器并不会等待主程序结束才开始计时，而是当主程序开始运行时就已经开始计时，计时完成将任务让如列队中去，最后等待主程序完成执行任务。注意：即使有两个定时器的时间是一样的它们也会分别被加入到列队中去。应...
2020-02-25 12:22:10
112
原创 浏览器渲染HTML页面的简单过程
绘制的主要过程DOM构造布局绘制页面DOM构造1.浏览器首先将收到的HTML代码通过HTML解析器解析创建为一个DOM树这样的对象模型决定了节点之间都有一定的关连。顺着这棵树我们可以做出许多操作。2.通过CSS解析器构建样式表规则，然后将这些规则分别放在对应的DOM树节点上，得到一颗带有样式属性的DOM树布局1.浏览器读取DOM树的文档节点，按照从上到下从左到右的顺序进行，...
2020-02-25 11:53:36
517
原创 性能优化之回流_重绘
回流与重绘当render树中的元素发生尺寸、布局、隐藏等变化时就需要重新构建。当页面布局和几何属性发生变化时就需要回流。当render树中的一些元素更新属性，而属性只是影响外观风格时，不会影响布局，比如background-color。会触发页面重新布局的属性盒子模型相关属性定位相关属性改变节点内部因素盒模型定位文字widthtoptext-align...
2020-02-07 21:51:21
734
原创 js_单例设计模式
实现单例模式单例模式的定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。单例模式的实现：主要通过创建一个标志变量来保存第一次创建过的实例，当下一次获取该类的实例时进行判断标志变量是否已经被赋值，如果已被赋值直接返回标志位上保存的值。//第一种var Singleton = function( name ){ this.name = name; this.instance ...
2020-02-06 19:41:49
76
原创 利用axios创建用与网络请求
解耦axios与组件：在引入axios之前最好单独将它再次封装，有助于以后更换axios时不至于手忙脚乱。//创建一个network文件夹由于存放有关axios的文件（request.js respose.js）//将所有请求放入request.jsimport axios from 'axios'export function request(config) { //创建axios...
2019-12-01 15:58:46
170
1
原创 call_apply_bind
call 将a函数内部的this指向重新定位到第一个参数上，第二参数为传入函数参数的值function a(name){ console.log(this.y) console.log(name)}a.call({y:100},10)apply 和call基本相同知识apply的第二个参数类型为数组类型function a(name){ console.log(this.y) ...
2019-12-01 15:47:09
66
原创 TCP_UDP
传输层传输层的两个协议TCP 需要将要传输的文件分段 传输 建立会话 可靠传输 流量控制UDP 一个数据包就可以完成数据通讯 不将数据分段 不需要建立会话 不需要流量控制 不可靠传输传输层协议和应用层协议之间的关系常见的应用层协议使用的接口http=TCP+80https=TCP+443RDP=TCP+3389ftp=TCP+21共享文件夹=TCP+445SMTP=TCP+2...
2019-10-23 14:19:10
396
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人