- 博客(112)
- 收藏
- 关注
RSS订阅转载 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
507
转载 谈谈 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
862
原创 Cookie详解
cookiecookie是浏览器端的一种数据存储，常和localStorage、session一起比较，常被用来记录用户的身份信息状态，为无状态的http请求添加了访问用户的身份标志。只要满足了发送条件，就会自动添加到http请求头中。满足条件是根据cookie的几个可选属性决定的，首先cookie是以键值对的方式存储（name = value），每个键值对还有不同的可选属性，都可以在设置cookie时一并添加：path：可以访问cookie的页面路径，该路径及它的子路径都可以访问domain：可以
2020-12-19 21:31:14
623
2
转载 如何编写一个 HTTP 反向代理服务器
如何编写一个 HTTP 反向代理服务器如果你经常使用 Node.js 编写 Web 服务端程序，一定对使用 Nginx 作为 反向代理 服务并不陌生。在生产环境中，我们往往需要将程序部署到内网多台服务器上，在一台多核服务器上，为了充分利用所有 CPU 资源，也需要启动多个服务进程，它们分别监听不同的端口。然后使用 Nginx 作为反向代理服务器，接收来自用户浏览器的请求并转发到后端的多台 Web 服务器上。大概工作流程如下图：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-
2020-11-10 09:17:21
609
转载 使用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
762
原创 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
4371
转载 Node.js + Consul 实现服务注册、健康检查、配置中心
作者：五月君原文：Nodejs技术栈本篇主要介绍了 Node.js 如何与 Consul 进行集成，Consul 只是服务注册的一种实现，还有其它的例如 Zookeeper、Etcd 等，服务注册发现在微服务架构中扮演这一个重要的角色，伴随着服务的大量出现，服务与服务之间的配置管理、运维管理也变的难以维护，通过 Consul 可以解决这些问题，实现服务治理、服务监控。关于 Consul 的更多知识点不在这里赘述，但是在学习本节之前还是希望您能先了解下，请移步我之前写的微服务服务注册发现之 Cons.
2020-08-16 19:06:11
1876
原创 vscode设置选择补全快捷键为tab
使用了vim后，实在忍受不了通过方向键选择代码补全~~将下面的配置添加到keybindings.json中，可替换为tab和shift tab{ "key": "tab", "command": "selectNextSuggestion", "when": "editorTextFocus && suggestWidgetMultipleSuggestions && suggestWidgetVisible"},{
2020-06-15 01:08:48
5079
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
1843
原创 如何自定义babel插件
babel是如何工作的babel主要处理步骤分为三个：解析、转换、生成解析解析步骤接受代码输出AST，该步骤分为两个阶段：词法分析、语法分析。词法分析主要是对源代码进行分词，产生一个叫做token的数组，分割的单位是运算符、括号、数字、字符串、标点符号等可以处理的最小单元。然后语法分析再将所有的tokens组合成一个整体，分析它们的语法和关系，最后输出AST（源代码的抽象语法树）。分成两个阶段后，更容易的对解析步骤作优化，因为解析步骤大部分的时间都在词法分析过程中，同时也能提高可移植性。转换
2020-05-26 23:26:59
1564
原创 计算机系统的硬件组成
1.总线：贯穿整个系统的管道，用于在各个组件中传递定长的字节块（字）。字长在不同系统中各不相同，要么是4个字节（32位），要么是8个字节（64位）。2.I/O设备是系统与外界的连接通道，例如：鼠标、键盘、显示器、磁盘等等。每个I/O设备连接I/O总线都需要一个控制器或者适配器，用于在I/O设备和I/O总线间传递信息。(控制器和适配器的区别在于他们的封装方式)3.主存：主存是一个临时的存储设备，用于存储CPU执行程序时的程序和处理的数据。物理上来讲，它是一组动态随机存取存储器芯片，逻辑上讲，存储器是一个.
2020-05-18 18:48:48
270
转载 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
555
转载 深入浅出 useSWR 原理
原文链接：https://zhuanlan.zhihu.com/p/93824106 作者：飞冰-chenbin92本文主要是基于 SWR 源码对其原理进行分析，但并不会直接从源码开始，而是从实际需求场景一步一步推导进而实现 SWR 的功能，如果不了解 SWR 是什么，可以先看上一篇《SWR：最具潜力的 React Hooks 请求库》或者直接看 SWR 的官方介绍文档。本文完整示例代码...
2020-03-02 10:16:42
2653
转载 SWR 与前端数据依赖请求
原文链接：https://zhuanlan.zhihu.com/p/90660704 作者：shud.in数据依赖关系其实是一个 DAG（有向无环图）。有些数据依赖于其他，有的则无依赖性：DAG:对数据的请求则是对这个有向无环图的遍历。最高效的请求方式一定是在拓扑序上尽可能地并行（每当一个数据的依赖都就绪时，立即发起请求）。仔细想想，大部分时候（请求并不复杂时），我们都用 Promi...
2020-03-01 21:32:52
1057
转载 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
1890
原创 【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
14784
转载 GO语言基础进阶教程：bufio包
原文链接：https://zhuanlan.zhihu.com/p/73690883 作者：茹姐生命不止，继续Go go go。。Go语言在io操作中，还提供了一个bufio的包，使用这个包可以大幅提高文件读写的效率。一、bufio包原理bufio 是通过缓冲来提高效率。io操作本身的效率并不低，低的是频繁的访问本地磁盘的文件。所以bufio就提供了缓冲区(分配一块内存)，读和写都先...
2020-02-24 09:21:04
589
转载 【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
31708
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
3454
原创 【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
3366
原创 【d3.js】弦图
d3-弦图弦图主要用来展示节点之间的联系。主要包含两部分，节点部分和表示节点联系的弦部分，弦的粗细表示比重。使用场景：1.城市之间的人口流动比例。2.一群人的邮件交流比例。…画一个弦图，首先需要一个矩阵数据matrix，以二位数组表示，数组每一项都是一个节点，而matrix[i][j]表示第i个节点到第j个节点的流量。const matrix = [ [ 10, 20...
2020-01-11 19:28:38
1366
原创 钉钉小程序设置placeholder样式
照着微信小程序的方法写就ok了，尽管钉钉的文档里没写(还有一些其他的api也可以按着微信的方式写~~o _ o)1.placehoder-style2.placeholder-class对这个钉钉小程序只有一个形容词：shit...
2020-01-08 16:42:16
1577
原创 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
1022
原创 d3.histogram直方图
直方图将离散的一组数据统计在多个不重叠的连续区间中，查看数据的分布情况。apihistogram(data)返回一个分箱数组，每个分箱中包含部分data中的数据，还包含三个额外的属性：length: 数据的个数 x0：分箱的最小值 x1：分箱的最大值。const histogram = d3.histogram() .domain([ 0, 100 ])const bins ...
2019-12-25 10:20:20
2086
转载 Canvas 动画的性能优化实践
作者：方勤原文：https://blog.csdn.net/weixin_39843414/article/details/103502053前言去年圣诞节有一个下雪的背景动画的需求。在实现这个动画的过程中加深了对 canvas 动画的一些了解，在这里我仅是抛砖引玉的分享一下，欢迎各位大佬批评。代码已上传至 github 【https://github.com/wanqihua/blo...
2019-12-18 09:23:46
1228
1
转载 换一种视角理解 awk 命令
原文链接：https://www.barretlee.com/blog/2019/10/29/awk/原文作者：Barret李靖awk 是使用频度非常高的一个超级有用的命令，如果你做过应用的线上运维，想必已经是十分熟悉了，但是对大多数人来说，它仍然是个陌生的东西，即便看过很多次文档，依然记不住它的模样，还是得翻文档、查 Google。下面我就带着你，换一种视角重新理解 awk。[外链图片...
2019-12-08 22:05:28
182
原创 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
14863
转载 深入理解：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
202
转载 [译] React Hooks: 没有魔法，只是数组
英文原文我是 React 新特性 Hooks 的粉丝。但是，在你使用 React Hooks的过程中，有一些看上去 很奇怪的限制 。在本文里，对于那些还在为了理解这些限制而苦苦挣扎的同志，我尝试通过一些列图表的方式，来解释为什么会存在这些限制。理解hooks怎么运行我听说很多同学都对hooks像魔法一般的效果感到困惑，因此我将尝试通过浅显的方式，来演示hooks是怎么运行的。hooks...
2019-12-02 15:39:09
130
转载 看在上帝的份上，不要使用 .npmignore
英文原文： medium.com.npmignore 是一个可以给Node.js项目造成严重危害的文件，你应该立即停止使用该文件（除了下面所列的一种情况）。npm中已经永久内置了一个更好的替代文件，并且更易用更安全。什么是 npmignore？比如我下载了一个名为 cli-ux 的npm包，这是一组常见的 CLI UX 工具函数。该项目的根目录下有一个名为 /test 的文件夹，里面放的...
2019-11-22 11:56:47
10244
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
13950
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
4701
原创 Performance使用教程：分析运行时性能
原文链接：https://developers.google.cn/web/tools/chrome-devtools/evaluate-performanceGet started在本教程中，你在一个在线的页面打开DevTools，使用Performance面板在页面上查找性能瓶颈。1.打开隐身模式下的chrome浏览器，确保chrome运行在一个干净的状态下。如果你安装了许多的拓展插...
2019-10-25 14:58:46
6162
原创 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
5623
2
原创 d3.js力导向图使用详解
创建一个力导向图需要三个东西：仿真模拟系统节点力当然，一般我们也会创建links来连接两个节点仿真模拟系统中存在多个节点和多种类型的力，通过力控制节点的运动，每个节点都在多个力的作用下不断发生移动，直到系统趋于平衡。中间会发生多次tick事件，每次tick，仿真系统都会更新节点的位置，且系统的能量(alpha)也会逐渐降低，直到达到某个数值(alphaMin)，整个图表就停止运动...
2019-09-12 23:42:22
10863
原创 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
184
转载 你了解HTTP2.0吗？
前言作为一只前端开发????，HTTP是我们知识地图里面必不可少的一部分，也是面试必问知识点。HTTP2号称可以让我们的应用更快、更简单、更稳定，它完美解决了1.1版本的诸多问题，本文和大家一起聊聊HTTP2的改进点。HTTP发展史正式讲HTTP2之前我们先讲一下HTTP的发展史。HTTP/0.9 - 单行协议HTTP于1990年问世，那时候HTTP非常简单：只支持GET方法；没有首部；只...
2019-09-05 20:35:03
888
转载 requestAnimationFrame 知多少？
requestAnimationFrame 知多少？在Web应用中，实现动画效果的方法比较多，JavaScript 中可以通过定时器setTimeout来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的 API，即 requestAnimationFrame（rAF），...
2019-08-12 22:13:25
405
原创 vscode调试nodejs代码
1.打开设置搜索deubg.node2.将debug.node:Auto Attach开关打开3.node --inspect启动项目，然后在代码里添加断点即可
2019-08-07 13:19:48
2014
转载 svg滤镜
1.滤镜工作原理SVG阅读器处理一个图形对象时，会将对象呈现在位图输出设备上，它可以将对象的描述信息转化为一组对应的像素。在使用滤镜时，SVG阅读器不会直接将图形渲染为最终结果，而是先将像素保存到临时位图中，然后将滤镜指定的操作应用到该临时位图，其结果作为最终图形。在SVG中，使用filter元素指定一组操作(也叫基元),在渲染图形对象时，将该操作应用在最终图形上。filter标记之间就是我...
2019-07-27 11:49:53
1260
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人