NotionNext BLOG https://huanglvming.cn/ 这是一个由NotionNext生成的站点 Thu, 24 Aug 2023 15:37:28 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed zh-CN All rights reserved 2023, SuperLvming <![CDATA[你可能不知道的VSCode]]> https://huanglvming.cn/article/vscode https://huanglvming.cn/article/vscode Thu, 24 Aug 2023 00:00:00 GMT
😀
古人云：“工欲善其事，必先利其器”，我们每天开发都离不开VSCode，更好的掌握VSCode，意味着更高的效率。
 

📝 10个你可能不知道的VSCode使用技巧

1.打开setting.json

这是最简单的，也是最重要的。
不知道小伙伴们是否也曾遇到像我一样的困惑，如何才能打开setting.json？听起来很可笑，但是不管我们是通过点击VSCode的setting，还是通过快捷键command+, 打开的都是设置面板，像这样
notion image
然而有时候我们希望打开的是setting.json ，这样可以更快捷的编辑多项配置(粘贴网上刚复制好的json)，这时候我们就可以点击编辑器右上角的这个按钮进行打开
notion image
我们还可以通过快捷键command+p 呼出输入框，然后输入setting.json 进行打开
notion image

2.关键的.vscode

在项目中配置.vscode ，可以在保留团队各开发者的自定义配置时，又可以确保项目配置的大一统
不知道小伙伴们是否也遇到过像我一样的困惑，打开某个项目时，prettier格式化检验报错，提示当前项目使用的prettier配置是.prettierrc.js ，而我的VSCode Setting 设置的是.prettierrc ，于是我赶紧更新VSCode Setting 的相关配置项为.prettierrc.js ；打开另外一个项目时，prettier 又报错了，因为当前项目使用的prettier配置是.prettierrc ，而我在上一个项目中把VSCode Setting 的配置项设为.prettierrc.js 🙃️
 
这种情况下，.vscode 就变得非常重要了。VSCode 的配置分为两类，一是全局用户配置，二是当前工作区配置。VSCode 每打开一个项目，项目文件夹的根目录就是一个工作区。可以在项目根目录下创建.vscode 文件夹，从而设置该项目的工作区配置。
.vscode 可以接收4中配置文件和若干个代码片段：
  • extensions.json ：当前项目使用的插件
  • settings.json ：当前项目使用的VSCode 配置
  • launch.json ：当前项目的调试配置文件
  • task.json ：当前项目的任务配置
  • xxx.code-snippets ：当前项目的共享代码片段
 
针对以上场景，如果当前项目使用的.prettierrc.js 配置，那么我们可以修改.vscode 中的settings.json
设置好后，不管开发者的VSCode Setting 是什么配置，永远都不会与本项目冲突，完美解决了个性与标准并存的问题。
 
除了settings.json ，xxx.code-snippets 也是非常值得推荐的配置，这可以配置当前项目比较高频的代码片段，比如
设置好后，我们只需在项目文件中输出init 并回车，就能自动生成代码
 
其他配置不一一举例，留给小伙伴自己去探索吧。

🤗 总结归纳

总结文章的内容
 
💡
]]> <![CDATA[谈谈 API 加速]]> https://huanglvming.cn/article/speed-up https://huanglvming.cn/article/speed-up Thu, 17 Aug 2023 00:00:00 GMT
😀
最近在做一个网页聊天的项目，前后端通过`stream`保持长链接，但感觉`stream`更新比较慢，反映在网页上的表现是聊天输出卡顿。
 
针对`stream`更新慢的问题，后端开发第一时间想到的是API加速，说的是“可以通过CDN来提高API响应速度”。我当时并没有想太多，心想由后端开发和SRE搞好加速就行，前端无非是换一个API链接。
 
后来SRE跟我说已经搞好了，我换了加速后的API连接进行测试，果然快了很多，响应速度几乎提升了一倍。中午吃饭的时候便和同事聊到： “那个项目的接口使用CDN加速后，果然快了很多。”
“API使用CDN加速？你确定吗？”
“额。。。总之是API加速了，我也不确定是不是使用了CDN。”
“CDN不是用于缓存作用吗？API是动态结果，为什么要用CDN？即便用了，真的能加速？”
“额。。。”
 
虽然我相信即便API是动态结果，即便我们不需要依赖缓存，使用CDN后肯定也能达到加速的效果。但一时间也说不出个所以然，所以吃完饭赶紧向SRE请教。
 
诚然，CDN提速的一个重要原因是因为缓存，多个CDN节点组成的网络像一层膜一样横穿在请求端和响应端之间，当一个请求到达CDN层的时候，CDN如果检查到缓存中有该请求需要的结果，则直接响应请求结果，本次请求甚至无法穿过CDN这层“膜”；只在当CDN层匹配不到本次请求的结果时，才允许请求穿透这层“膜”，达到响应服务器，我们称之为源站，而穿透“膜”的这种行为，我们称之为击穿CDN。
 
难道真的像同事说的那样，“API是动态结果，无法缓存，必然每次都击穿CDN，所以API无法使用CDN加速”？这么想的话，还是太低估了CDN在背后帮我们做的事情。所谓缓存，其实就是静态资源缓存，对应的是静态内容加速；与静态内容加速相对应的，是动态内容加速，指的是用户在请求一些动态内容时，不直接请求源站，而是由基于地理位置的DNS调度，请求最靠近用户的云服务节点，再由云服务节点通过优化过的传输网络（公网，但比普通BGP更优化的链路），转发请求到源站，达到优化和加速的目的。
 
所以即便没有缓存，使用CDN也能帮助我们更快的达到源站。
 
但是和SRE聊完后才知道，原来本次API加速，使用的并不是CDN（这是由于牵扯到一些业务原因，并非说CDN加速不好），而是使用了一种叫做Anycast的技术。
 
Anycast又叫任播，是指一个发送方同最近的一组接收方之间的通信。当一个单播地址被分配到多于一个的接口上时，发到该接口的报文被网络路由到由路由协议度量的最近的目标接口上。原理为，普通的IP是单播寻址，全程走公网，如果用Anycast的话，该公网IP用任播形式寻址，在腾讯云的多个节点都发路由，这样客户端的包只需要走公网到达最近的腾讯云节点即可，剩下来的路程是走更有保障的腾讯云内网。
 
以上是摘抄了网络上的一些解释，按照我的理解，有点像是“直达专车”的概念，乘客只需找到最近的“直达专车”，一旦上车之后，它就会走直达通道，这比各种“中转”“并道”等来得更快。希望我的理解没问题。
 
后来还了解到，除了以上的CDN加速和Anycast，能到达到加速目的的还有很多，虽然不懂，但还是记录一下吧：
  • 静态CDN服务
  • 动态内容加速
  • 全站加速（动态+静态加速）
  • Anycast 公网加速 AIA
  • CLB跨地域部署
  • 全球应用加速GAAP
 
 
]]> <![CDATA[实现文本拷贝时保留段落样式]]> https://huanglvming.cn/article/copy-plain-text https://huanglvming.cn/article/copy-plain-text Thu, 17 Aug 2023 00:00:00 GMT
今天收到也无妨反馈，直接点击站点上的文本拷贝按钮时，拷贝结果出现以下问题：
  • 拷贝后，在富文本编辑内粘贴，文字携带背景色
  • 拷贝后，文本内容包含HTML元素标签
  • 拷贝后，无法保持页面上的展示的段落样式
 
查看项目源码之后，发现原本使用的是react-copy-to-clipboard,代码如下：
 
再审查页面元素时，看到结构大概如下：
 
很明显，拷贝的元素对象内，包含<br>标签，而<br>在HTML中渲染会换行，从而显示段落效果。
 
先看第一个问题「拷贝后，在富文本编辑内粘贴，文字携带背景色」。在查看了react-copy-to-clipboard 的文档后，发现可以配置`option.format`参数，参数值是`MIME type`，可以通过设置`option.format = “text/plain”`来解决问题。
String. Optional. Set the MIME type of what you want to copy as. Use text/html to copy as HTML, text/plain to avoid inherited styles showing when pasted into rich text edito
 
再看第二个问题「拷贝后，文本内容包含HTML元素标签」。如上述分析，因为元素内包含了HTML标签元素，不管是通过`innerHTML`还是`innerText`，必然都会携带文本内的标签元素（因为此时标签被当作普通字符来获取）。
很简单，我们写一个正则匹配来将标签过滤就好了。
 
第二个问题虽然解决了，但同时我们也丢失了文本段落样式，查看了react-copy-to-clipboard 之后，确定没有相关配置可以解决，所以只能放弃该组件。
自己写了一个方法：
也可以这样：
通过以上方法，就可以完全解决问题。
 
💡
document.execCommand 和 navigator.clipboard.writeText 可能存在兼容性问题
]]> <![CDATA[读书笔记之 WeakMap]]> https://huanglvming.cn/article/weakmap https://huanglvming.cn/article/weakmap Wed, 16 Aug 2023 00:00:00 GMT
之前了解的`Map`和`WeakMap`，只知道`WeakMap`只允许使用对象作为键，而不能是原始值，但却忽略了它还有一个很重要的特性，即它不会阻止垃圾回收机制对作为键的对象(key object)的回收。
 
为了更好的解释这句话的意思，先看以下代码：
 
如上，虽说`foo`最后被赋值为`null`，但是并不会被垃圾回收机制回收，原因是`foo`所引用的对象被存储在`array`中，我们仍然可以通过`array[0]`来获取`foo`所引用的对象的值。
 
同理，如果我们将`foo`作为常规`Map`的键，只要`Map`对象存在，那么`foo`就无法被回收。
 
这时候`WeakMap`的特性就体现出来了，以上方法如果使用`WeakMap`来做，当设置`foo=null`时，`foo`的引用地址将会被覆盖，同时`WeakMap`对应的键值也会被删除，从而彻底释放`foo`的引用地址，即彻底被回收。
 
💡
为什么说“weakmap将会是个空值集合”？因为我们无法从技术角度准确知道垃圾回收机制何时将引用地址回收。笔者曾经在`chrome`控制台复现过这样的场景：
 
可见我们是无法准确知道垃圾回收机制何时回收某个引用地址。如有纰漏，欢迎指正。
 
 
 
 
]]>