大家平时都在写组件，当你写组件库里的组件，或者项目里的一些公共组件的时候，是需要提供文档的。 这时候我们一般都会用Storybook。 Storybook是非常流行的用来构建组件文档的工具。 现在有80k的star了： 那Storybook都提供了啥功能呢？ 我们试一下就知道了： npxcreate-react-app--templatetypescriptsb-test 用cra创建个react项目。 然后进入项目，执行storybook的初始化： npxstorybook@latestinit 打印的日志告诉你storybookinit是在你的项目里添加storybook的最...

提到推送数据，大家可能会首先想到WebSocket。 确实，WebSocket能双向通信，自然也能做服务器到浏览器的消息推送。 但如果只是单向推送消息的话，HTTP就有这种功能，它就是ServerSendEvent。 WebSocket的通信过程是这样的： 首先通过http切换协议，服务端返回101的状态码后，就代表协议切换成功。 之后就是WebSocket格式数据的通信了，一方可以随时向另一方推送消息。 而HTTP的ServerSendEvent是这样的： 服务端返回的Content-Type是text/event-stream，这是一个流，可以多次返回内容。 SeverSendEven...

大家都用过组件库，react流行的组件库有阿里的ant-design、字节的semi-design、arco-design等。 那这些组件库都是怎么打包的呢？ 我们自己写个组件库的话，怎么写打包逻辑呢？ 这篇文章我们就来探究下。 新建一个项目： mkdircomponent-lib-test cdcomponent-lib-test npminit-y 分别安装ant-design、arco-design、semi-design pnpminstallantd pnpminstall@douyinfe/semi-ui pnpminstall@arco-design/web-re...

后端系统大多都是微服务的架构，而且还可能同时有多种语言实现的微服务，比如java、go、python、c、node等。 那么问题来了，多种语言实现的微服务之间如何通信呢？ 有的同学会说http不就行？ 但http是文本传输，通信效率低。更重要的是这些微服务并不会提供http接口，因为它们又不是直接面向客户端的。 跨语言调用服务一般会用gRPC，它是google出的一种跨语言的远程方法调用的方案。 其中，RPC是RemoteProcedureCall，远程过程调用。 比如java微服务有个方法aaa，node微服务想调用它，就可以通过gRPC来实现。 今天我们就来用一下gRPC。 当然，我们...

想必大家都打过车，打车软件可以根据你的当前位置搜索附近的车辆： 这两天国庆节，大家出去玩可能会借用共享充电宝。它也是基于你的位置来搜索附近充电宝： 再就是大家搜索附近的酒店、餐厅等，也是基于位置的搜索。 那么问题来了：这种附近的人、附近的酒店、附近的充电宝的功能是怎么实现的呢？ 答案是用Redis实现的。 很多人对Redis的认识停留在它能做缓存，也就是从数据库中查询出来的数据，放到redis里，下次直接拿redis的数据返回： 确实，缓存是redis的常见应用。 但它并不只是可以做缓存，很多临时的数据，比如验证码、token等，都可以放到redis里。 redis是key-value的...

这几个月，想必大家都听到过一个新闻： Svelte弃用TypeScript，改用JSDoc了。 TypeScript我们知道，是用来给JS加上类型的，可以实现类型提示和编译时的类型检查。 那JSDoc能够完成一样的功能么？Svelte是出于什么原因弃用TS的呢？ 先不着急回答这个问题。 我们总得先了解下JSDoc： 可能大家认为的JSDoc是这个东西： 在代码的注释上加上类型的标识，然后通过jsdoc命令行工具，就可以直接生成文档。 比如这样的文档： 确实，这个是JSDoc最初的含义。 但我们说的JSDoc并不是这个，而是TS基于JSDoc语法实现的，在注释里给代码添加类型的语法。 文档...

想必大家都用过弹窗组件，比如antd的Modal组件： 打开devtools可以看到，它是直接挂在body下的： 实现这种效果是用的createPortal： 渲染结果如下： 弹窗组件都是基于这个api来实现的。 那React源码里是如何实现这种功能的呢？ 首先，我们过一遍React的渲染流程： 我们组件里写的这些是jsx代码： 它们编译后会变成类似React.createElement这种代码，叫做renderfunction。 renderfunction执行的结果是ReactElement。 类似这样： React组件render的结果就是产生ReactElement。 我们...

Node里怎么打印日志呢？ 有同学说，不也是用console.log么。 不，服务端打印日志一般不会用console.log。 因为console.log打印完就没了，而服务端的日志经常要用来排查问题，需要搜索、分析日志内容，所以需要写入文件或者数据库里。 而且打印的日志需要分级别，比如有的是错误的日志，有的只是普通日志，需要能够过滤不同级别的日志。 此外，打印的日志需要带上时间戳，所在的代码位置等信息。 这些都是console.log没有的功能。 所以我们一般都会用专门的日志框架来做，比如winston。 它是Node最流行的日志框架，npm官网上可以看到每周千万级的下载量： 那winst...

拖拽是常见的需求，在react里我们会用react-dnd来做。 不管是简单的拖拽，比如拖拽排序，或者复杂的拖拽，比如低代码编辑器，react-dnd都可以搞定。 这篇文章我们就来用react-dnd来实现一下这些功能吧。 我们这篇文章会实现3个案例： 入门案例： 拖拽排序： 低代码编辑器： 我们先入个门： npxcreate-react-app--template=typescriptreact-dnd-test 新建个react项目 安装react-dnd相关的包： npminstallreact-dndreact-dnd-html5-backend 然后改一下App.ts...

提到打包工具，可能你会首先想到webpack。 那没有webpack之前，都是怎么打包的呢？ webpack都有哪些功能？为什么这么设计呢？ 这篇文章我们就来一起探究一下。 其实之前都不打包的，就是js、css分别用对应的工具编译下，然后在html里引入。 比如js用babel编译，再用terser压缩、css用sass或者less编译，再用postcss做添加兼容性前缀等处理： 当然，现在也有很多场景是不打包的，比如node环境，就只需要编译： 这是一个nest应用： 执行build之后的产物是这样的： 对每个ts文件用tsc做了编译，然后产生了dts和sourcemap。 它并没有包...

用户登录之后，会返回一个用户的标识，之后带上这个标识请求别的接口，就能识别出该用户。 标识登录状态的方案有两种：session和jwt。 session是通过cookie返回一个id，关联服务端内存里保存的session对象，请求时服务端取出cookie里id对应的session对象，就可以拿到用户信息。 jwt不在服务端存储，会直接把用户信息放到token里返回，每次请求带上这个token，服务端就能从中取出用户信息。 这个token一般是放在一个叫authorization的header里。 这两种方案一个服务端存储，通过cookie携带标识，一个在客户端存储，通过header携带标识...

Puppeteer是一个网页的自动化测试工具，它支持写一些JS脚本来控制浏览器执行一些行为，可以用来跑测试用例，或者用来做爬虫。 它的脚本类似这样： constpuppeteer=require('puppeteer');constfs=require('fs/promises');(async()=>{constbrowser=awaitpuppeteer.launch({headless:false});constpage=awaitbrowser.newPage();awaitpage.goto('https://baidu.com');const$input=awaitpa...

​​上一集​​我们实现了Chromium的自动下载，这集把Chromium跑起来，实现远程控制。 你是否好奇过Puppeteer的远程控制是怎么实现的呢？ 其实是基于ChromeDevToolsProtocol，它是chromedevtools和chromium通信的协议，chromedevtools用它来获取chromium的一些信息，并且还可以控制chromium来做一些事情。 你可以在chromedevtools里打开ProtocolMonitor： 然后就可以看到chromedevtools和chromium通信的所有CDP协议数据了： chromedevtools里展示的数据...