- 博客(112)
- 收藏
- 关注
转载 React RFC Server Components
12月21日,React 团队公布了一个新的提案 Server Components。伴随这个提案同时发出的,还有一个小时的视频讲解、可供运行的Demo、详尽的介绍。这里有react团队的相关rfc可见,React 团队很重视这个提案。本文会从如下方面讲解:Server Components 是什么Server Components 解决了什么问题ServerComponent是什么一句话概括:Server Components 是在服务端运行的 React 组件。咦?这和 服务端
2020-12-26 00:31:30
536
转载 谈谈 React 新出的 Server Components
昨天看了 demo,今天翻了翻源码。我们应该从几个维度来“看待” React Server Components:当前开发遇到了哪些痛点?这些痛点目前有哪几种解决方案?Server Components 是怎么解决这些痛点的?Server Components 是否比这些解决方案更优秀?Server Components 是某一个或某几个解决方案的升级、颠覆还是互补?而最常拿来和 Server Components 对比的就是传统的 PHP/ASP 技术和为框架而生的 SSR 技术。Reac
2020-12-25 09:15:34
896
原创 Cookie详解
cookiecookie是浏览器端的一种数据存储,常和localStorage、session一起比较,常被用来记录用户的身份信息状态,为无状态的http请求添加了访问用户的身份标志。只要满足了发送条件,就会自动添加到http请求头中。满足条件是根据cookie的几个可选属性决定的,首先cookie是以键值对的方式存储(name = value),每个键值对还有不同的可选属性,都可以在设置cookie时一并添加:path:可以访问cookie的页面路径,该路径及它的子路径都可以访问domain:可以
2020-12-19 21:31:14
690
2
转载 如何编写一个 HTTP 反向代理服务器
如何编写一个 HTTP 反向代理服务器如果你经常使用 Node.js 编写 Web 服务端程序,一定对使用 Nginx 作为 反向代理 服务并不陌生。在生产环境中,我们往往需要将程序部署到内网多台服务器上,在一台多核服务器上,为了充分利用所有 CPU 资源,也需要启动多个服务进程,它们分别监听不同的端口。然后使用 Nginx 作为反向代理服务器,接收来自用户浏览器的请求并转发到后端的多台 Web 服务器上。大概工作流程如下图:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-
2020-11-10 09:17:21
655
转载 使用NodeJS实现JWT原理
使用NodeJS实现JWT原理jwt是json web token的简称,本文介绍它的原理,最后后端用nodejs自己实现如何为客户端生成令牌token和校验token为什么需要会话管理我们用nodejs为前端或者其他服务提供resful接口时,http协议他是一个无状态的协议,有时候我们需要根据这个请求的上下获取具体的用户是否有权限,针对用户的上下文进行操作。所以出现了cookies session还有jwt这几种技术的出现, 都是对HTTP协议的一个补充。使得我们可以用HTTP协议+状态管理构
2020-09-19 11:19:19
789
原创 web component指南
web component什么是web component?web component是web原生提供的封装组件的方式,让开发者定义一些可重复使用的自定义元素。主要包含custom elements、shadow dom、html templates部分,分别用于注册自定义元素、提供shadow-dom接口,为自定义元素的样式和脚本提供一个隔离的环境、通过template和slot编写自定义元素的结构模板。如何开发一个web component?一个web component就是一个我们可以在正常d
2020-09-13 20:59:01
4468
转载 Node.js + Consul 实现服务注册、健康检查、配置中心
作者:五月君原文:Nodejs技术栈本篇主要介绍了 Node.js 如何与 Consul 进行集成,Consul 只是服务注册的一种实现,还有其它的例如 Zookeeper、Etcd 等,服务注册发现在微服务架构中扮演这一个重要的角色,伴随着服务的大量出现,服务与服务之间的配置管理、运维管理也变的难以维护,通过 Consul 可以解决这些问题,实现服务治理、服务监控。关于 Consul 的更多知识点不在这里赘述,但是在学习本节之前还是希望您能先了解下,请移步我之前写的微服务服务注册发现之 Cons.
2020-08-16 19:06:11
1953
原创 vscode设置选择补全快捷键为tab
使用了vim后,实在忍受不了通过方向键选择代码补全~~将下面的配置添加到keybindings.json中,可替换为tab和shift tab{ "key": "tab", "command": "selectNextSuggestion", "when": "editorTextFocus && suggestWidgetMultipleSuggestions && suggestWidgetVisible"},{
2020-06-15 01:08:48
5147
3
原创 golang使用channel传递信号
使用channel在goroutines中传递信号在go里,使用channel在goroutines间交流数据是一个很好的方式,但是也可以使用它去传递信号。传递信号时,使用空的struct作为channel的类型,只表示信息传递。更有趣的是,它不会占用内存空间,一个空的struct没有任何的属性。你可以到这里查看这是一个信号channel:var signal chan struct{}可以使用go的内置make函数初始化它:signal := make(chan struct{})代码会
2020-05-29 09:31:21
1908
原创 如何自定义babel插件
babel是如何工作的babel主要处理步骤分为三个:解析、转换、生成解析解析步骤接受代码输出AST,该步骤分为两个阶段:词法分析、语法分析。词法分析主要是对源代码进行分词,产生一个叫做token的数组,分割的单位是运算符、括号、数字、字符串、标点符号等可以处理的最小单元。然后语法分析再将所有的tokens组合成一个整体,分析它们的语法和关系,最后输出AST(源代码的抽象语法树)。分成两个阶段后,更容易的对解析步骤作优化,因为解析步骤大部分的时间都在词法分析过程中,同时也能提高可移植性。转换
2020-05-26 23:26:59
1602
原创 计算机系统的硬件组成
1.总线:贯穿整个系统的管道,用于在各个组件中传递定长的字节块(字)。字长在不同系统中各不相同,要么是4个字节(32位),要么是8个字节(64位)。2.I/O设备是系统与外界的连接通道,例如:鼠标、键盘、显示器、磁盘等等。每个I/O设备连接I/O总线都需要一个控制器或者适配器,用于在I/O设备和I/O总线间传递信息。(控制器和适配器的区别在于他们的封装方式)3.主存:主存是一个临时的存储设备,用于存储CPU执行程序时的程序和处理的数据。物理上来讲,它是一组动态随机存取存储器芯片,逻辑上讲,存储器是一个.
2020-05-18 18:48:48
288
转载 Kubernetes Services 详解
Kubernetes Services 详解原文链接:https://medium.com/swlh/kubernetes-services-simply-visually-explained-2d84e58d70e5Kubernetes 有四种 service 类型,而 ClusterIP 是最基础的:如上图所示,你可以想象一下,如果你要创建一个 NodePort 类型的 service,Kubernetes 也会创建一个 ClusterIP。如果你要创建一个 LoadBalancer 类型的
2020-05-15 09:32:10
572
转载 深入浅出 useSWR 原理
原文链接:https://zhuanlan.zhihu.com/p/93824106 作者:飞冰-chenbin92本文主要是基于 SWR 源码对其原理进行分析,但并不会直接从源码开始,而是从实际需求场景一步一步推导进而实现 SWR 的功能,如果不了解 SWR 是什么,可以先看上一篇《SWR:最具潜力的 React Hooks 请求库》或者直接看 SWR 的官方介绍文档。本文完整示例代码...
2020-03-02 10:16:42
3168
转载 SWR 与前端数据依赖请求
原文链接:https://zhuanlan.zhihu.com/p/90660704 作者:shud.in数据依赖关系其实是一个 DAG(有向无环图)。有些数据依赖于其他,有的则无依赖性:DAG:对数据的请求则是对这个有向无环图的遍历。最高效的请求方式一定是在拓扑序上尽可能地并行(每当一个数据的依赖都就绪时,立即发起请求)。仔细想想,大部分时候(请求并不复杂时),我们都用 Promi...
2020-03-01 21:32:52
1080
转载 SWR:最具潜力的 React Hooks 数据请求库
原文链接:https://zhuanlan.zhihu.com/p/89570321 作者:飞冰-chenbin92说明:本文内容主要来源于 SWR 的 官方文档 以及 GitHub zeit/swr 仓库,本篇主要为功能简介篇。简介React Hooks library for remote data fetching一个用于请求远程数据的 React Hooks 库,官网的快速...
2020-03-01 21:19:50
1994
原创 【Golang】gorm添加数据库排他锁,for update
适用于先读后更新的数据竞争场景,且应该将加锁操作放到事务中,防止锁被自动释放,原因参考mysql docsfunc UpdateUser(db *gorm.DB, id int64) error { tx := db.Begin() defer func() { if r := recover(); r != nil { tx.Roll...
2020-02-25 18:14:27
15461
转载 GO语言基础进阶教程:bufio包
原文链接:https://zhuanlan.zhihu.com/p/73690883 作者:茹姐生命不止,继续Go go go。。Go语言在io操作中,还提供了一个bufio的包,使用这个包可以大幅提高文件读写的效率。一、bufio包原理bufio 是通过缓冲来提高效率。io操作本身的效率并不低,低的是频繁的访问本地磁盘的文件。所以bufio就提供了缓冲区(分配一块内存),读和写都先...
2020-02-24 09:21:04
617
转载 【Go 专家编程】go.mod 文件中的indirect准确含义
原文链接:https://my.oschina.net/renhc/blog/3162751 作者:恋恋美食在使用 Go module 过程中,随着引入的依赖增多,也许你会发现go.mod文件中部分依赖包后面会出现一个// indirect的标识。这个标识总是出现在require指令中,其中// 与代码的行注释一样表示注释的开始,indirect表示间接的依赖。比如开源软件 Kuberne...
2020-02-22 12:00:48
32670
1
原创 【Golang】计算两个地理坐标之间的距离
package mainimport ( "fmt" "math")// 球面距离公式:https://baike.baidu.com/item/%E7%90%83%E9%9D%A2%E8%B7%9D%E7%A6%BB%E5%85%AC%E5%BC%8F/5374455?fr=aladdin// GeoDistance 计算地理距离,依次为两个坐标的纬度、经度、单位(默认:英里,K...
2020-02-18 16:50:29
3594
原创 【Golang】echo框架获取二进制数据body,content-type:application/octet-stream
r := c.Request() // c: echo.ContextbodyReader := r.Bodybuf, err := ioutil.ReadAll(bodyReader)if err != nil { fmt.Println(err)}fmt.Println(buf) // 二进制数据
2020-02-11 18:43:49
3425
原创 【d3.js】弦图
d3-弦图弦图主要用来展示节点之间的联系。主要包含两部分,节点部分和表示节点联系的弦部分,弦的粗细表示比重。使用场景:1.城市之间的人口流动比例。2.一群人的邮件交流比例。…画一个弦图,首先需要一个矩阵数据matrix,以二位数组表示,数组每一项都是一个节点,而matrix[i][j]表示第i个节点到第j个节点的流量。const matrix = [ [ 10, 20...
2020-01-11 19:28:38
1472
原创 钉钉小程序设置placeholder样式
照着微信小程序的方法写就ok了,尽管钉钉的文档里没写(还有一些其他的api也可以按着微信的方式写~~o _ o)1.placehoder-style2.placeholder-class对这个钉钉小程序只有一个形容词:shit...
2020-01-08 16:42:16
1622
原创 docker删除所有none镜像
删除所有none镜像docker rmi `docker images | grep "<none>" | awk '{print $3}'`$3指打印第三列的数据,也就是镜像的id。查找多个关键字(或)docker images | grep -E 'none|react-viz'查找多个关键字(与)docker images | grep 'none' | gre...
2019-12-27 11:41:12
1032
原创 d3.histogram直方图
直方图将离散的一组数据统计在多个不重叠的连续区间中,查看数据的分布情况。apihistogram(data)返回一个分箱数组,每个分箱中包含部分data中的数据,还包含三个额外的属性:length: 数据的个数 x0:分箱的最小值 x1:分箱的最大值。const histogram = d3.histogram() .domain([ 0, 100 ])const bins ...
2019-12-25 10:20:20
2122
转载 Canvas 动画的性能优化实践
作者:方勤原文:https://blog.csdn.net/weixin_39843414/article/details/103502053前言去年圣诞节有一个下雪的背景动画的需求。在实现这个动画的过程中加深了对 canvas 动画的一些了解,在这里我仅是抛砖引玉的分享一下,欢迎各位大佬批评。代码已上传至 github 【https://github.com/wanqihua/blo...
2019-12-18 09:23:46
1271
1
转载 换一种视角理解 awk 命令
原文链接:https://www.barretlee.com/blog/2019/10/29/awk/原文作者:Barret李靖awk 是使用频度非常高的一个超级有用的命令,如果你做过应用的线上运维,想必已经是十分熟悉了,但是对大多数人来说,它仍然是个陌生的东西,即便看过很多次文档,依然记不住它的模样,还是得翻文档、查 Google。下面我就带着你,换一种视角重新理解 awk。[外链图片...
2019-12-08 22:05:28
193
原创 typescript编译选项esModuleInterop的作用
esModuleInterop选项的作用是支持使用import d from 'cjs'的方式引入commonjs包。引入commonjs模块的方式无类型声明文件如果一个模块没有类型声明,可以直接使用const cjs = require('cjs')的方式引入模块,此时cjs的类型是any有类型声明文件1.使用import cjs = require('cjs')方法引入2.使用...
2019-12-07 19:04:23
15323
转载 深入理解:React hooks是如何工作的?
作者:swyx原文:Deep dive: How do React hooks really work?译者:lonelycat从根本上说,Hooks是一种更简单的方式,用于封装用户界面中的有状态行为和副作用。 React最先引入了Hooks,现在其他框架如Vue,Svelte都广泛实现了该功能,TNG-Hooks甚至可以为常规的JS函数提供Hooks。然而它们的函数式设计需要对Java...
2019-12-03 09:29:26
219
转载 [译] React Hooks: 没有魔法,只是数组
英文原文我是 React 新特性 Hooks 的粉丝。但是,在你使用 React Hooks的过程中,有一些看上去 很奇怪的限制 。在本文里,对于那些还在为了理解这些限制而苦苦挣扎的同志,我尝试通过一些列图表的方式,来解释为什么会存在这些限制。理解hooks怎么运行我听说很多同学都对hooks像魔法一般的效果感到困惑,因此我将尝试通过浅显的方式,来演示hooks是怎么运行的。hooks...
2019-12-02 15:39:09
141
转载 看在上帝的份上,不要使用 .npmignore
英文原文: medium.com.npmignore 是一个可以给Node.js项目造成严重危害的文件,你应该立即停止使用该文件(除了下面所列的一种情况)。npm中已经永久内置了一个更好的替代文件,并且更易用更安全。什么是 npmignore?比如我下载了一个名为 cli-ux 的npm包,这是一组常见的 CLI UX 工具函数。该项目的根目录下有一个名为 /test 的文件夹,里面放的...
2019-11-22 11:56:47
10497
2
原创 umi命令行工具源码解读,umi build打包
以umi build为例,查看umi命令行工具的逻辑首先查看package.json文件的bin字段,找到umi可执行文件的位置: "bin": { "umi": "./bin/umi.js" },查看umi/bin/umi.js文件,实际逻辑是在umi/src/cli.js文件中,执行umi build// umi/src/cli.jsswitch (script) ...
2019-11-19 10:41:07
14238
2
原创 Macos:neovim配置前端开发环境
安装neovimbrew install neovim设置配置文件新建配置文件:cd ~/.configmkdir nvim && cd nvimtouch init.vim写入配置:" Specify a directory for pluginscall plug#begin('~/.vim/plugged')Plug 'neoclide/coc.nv...
2019-11-15 19:43:37
4793
原创 Performance使用教程:分析运行时性能
原文链接:https://developers.google.cn/web/tools/chrome-devtools/evaluate-performanceGet started在本教程中,你在一个在线的页面打开DevTools,使用Performance面板在页面上查找性能瓶颈。1.打开隐身模式下的chrome浏览器,确保chrome运行在一个干净的状态下。如果你安装了许多的拓展插...
2019-10-25 14:58:46
6494
原创 d3.drag使用指南
创建一个可拖动的圆展示d3.drag的使用首先创建svg容器和一个circle元素:const width = window.innerWidthconst height = window.innerHeightconst svg = d3.select('body') .append('svg') .attr('width', width) .attr('h...
2019-09-16 09:45:18
5716
2
原创 d3.js力导向图使用详解
创建一个力导向图需要三个东西:仿真模拟系统节点力当然,一般我们也会创建links来连接两个节点仿真模拟系统中存在多个节点和多种类型的力,通过力控制节点的运动,每个节点都在多个力的作用下不断发生移动,直到系统趋于平衡。中间会发生多次tick事件,每次tick,仿真系统都会更新节点的位置,且系统的能量(alpha)也会逐渐降低,直到达到某个数值(alphaMin),整个图表就停止运动...
2019-09-12 23:42:22
11306
原创 locust压力测试
安装python 2.7:python -m pip install locustiopython 3:python3 -m pip install locustio查看是否安装成功:locust --help编写脚本文件from locust import HttpLocust, TaskSet, taskclass UserBehavior(TaskSet): de...
2019-09-06 09:57:28
202
转载 你了解HTTP2.0吗?
前言作为一只前端开发????,HTTP是我们知识地图里面必不可少的一部分,也是面试必问知识点。HTTP2号称可以让我们的应用更快、更简单、更稳定,它完美解决了1.1版本的诸多问题,本文和大家一起聊聊HTTP2的改进点。HTTP发展史正式讲HTTP2之前我们先讲一下HTTP的发展史。HTTP/0.9 - 单行协议HTTP于1990年问世,那时候HTTP非常简单:只支持GET方法;没有首部;只...
2019-09-05 20:35:03
945
转载 requestAnimationFrame 知多少?
requestAnimationFrame 知多少?在Web应用中,实现动画效果的方法比较多,JavaScript 中可以通过定时器setTimeout来实现,css3 可以使用 transition 和 animation 来实现,html5 中的 canvas 也可以实现。除此之外,html5 还提供一个专门用于请求动画的 API,即 requestAnimationFrame(rAF),...
2019-08-12 22:13:25
422
原创 vscode调试nodejs代码
1.打开设置搜索deubg.node2.将debug.node:Auto Attach开关打开3.node --inspect启动项目,然后在代码里添加断点即可
2019-08-07 13:19:48
2035
转载 svg滤镜
1.滤镜工作原理SVG阅读器处理一个图形对象时,会将对象呈现在位图输出设备上,它可以将对象的描述信息转化为一组对应的像素。在使用滤镜时,SVG阅读器不会直接将图形渲染为最终结果,而是先将像素保存到临时位图中,然后将滤镜指定的操作应用到该临时位图,其结果作为最终图形。在SVG中,使用filter元素指定一组操作(也叫基元),在渲染图形对象时,将该操作应用在最终图形上。filter标记之间就是我...
2019-07-27 11:49:53
1316
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人