步

步步走

步步走前端

mac 环境变量与 shell

<h2 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h2>最近在 mac 上安装了 nginx 用来跑本地 web 服务。 但是启动的时候需要切换到 nginx 的安装目录下，然后执行命令才能启动。比如： <figure class="highlight shell"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 </pre></td><td class="code"><pre># 进入 nginx 目录 cd /usr/local/nginx # 启动 nginx 服务 sudo sbin/nginx # 退出 nginx sudo sbin/nginx -s quit # 强制停止 nginx sudo sbin/nginx -s stop # 重启 nginx sudo sbin/nginx -s reload </pre></td></tr></table></figure> 可以看到每次操作 nginx 都需要切到对应目录才能执行命令，挺不方便的。 有没有更便捷的方法呢？当然是有的，那就是使用环境变量。

2024/6/14

如何反编译微信小程序

<h2 id="什么是反编译"><a href="#什么是反编译" class="headerlink" title="什么是反编译"></a>什么是反编译</h2>微信小程序可以运行在手机微信或者 pc 版微信环境下，它是以一个应用包的形式存在的，这个应用包的后缀通常是 .wxapkg。如果想知道某个微信小程序的功能模块是如何实现的，就需要把这个包给解开，这个过程就叫反编译。 <h2 id="获取小程序包"><a href="#获取小程序包" class="headerlink" title="获取小程序包"></a>获取小程序包</h2>要反编译微信小程序，那首先就需要获取微信小程序的应用包。 可以在 pc 版本微信上获取包，那么就需要在 pc 版微信上先运行某个小程序；运行完成后，就会在电脑某个目录下生成这个小程序的包，我们需要找到这个目录，那么就找到了这个包了。 windows 和 mac 环境不同，包的位置也会不一样。 windows 系统 打开微信设置-文件管理-就能看到微信的目录了，继续往下找到 /applet 这个目录，就能看到小程序的包了。示例：D:\软件\WeChat Files\WeChat Files\Applet\小程序 AppID__APP__.wxapkg mac 系统 包通常是被放在：/System/Volumes/Data/Users/你的用户名/Library/Containers/com.tencent.xinWeChat/Data/.wxapplet/packages/小程序 AppID/随机数/APP.wxapkg

2024/6/12

mac 终端命令大全

“终端” App 可让高级用户和开发者通过命令行界面 (CLI) 与 Mac 操作系统进行通信。你可以输入命令和脚本（称为 shell 脚本）在 Mac 上执行任务。 <a href="https://support.apple.com/zh-cn/guide/terminal/trmlshtcts/2.14/mac/14.0">Mac 终端键盘快键键</a> <h2 id="目录操作"><a href="#目录操作" class="headerlink" title="目录操作"></a>目录操作</h2><table> <thead> <tr> <th align="left">命令</th> <th align="left">功能描述</th> <th align="left">举例</th> </tr> </thead> <tbody><tr> <td align="left">mkdir</td> <td align="left">创建一个目录</td> <td align="left">mkdir dirname</td> </tr> <tr> <td align="left">rmdir</td> <td align="left">删除一个目录</td> <td align="left">rmdir dirname</td> </tr> <tr> <td align="left">mvdir</td> <td align="left">移动或重命名一个目录</td> <td align="left">mvdir dir1 dir2</td> </tr> <tr> <td align="left">cd</td> <td align="left">改变当前目录</td> <td align="left">cd dirname</td> </tr> <tr> <td align="left">pwd</td> <td align="left">显示当前目录的路径名</td> <td align="left">pwd</td> </tr> <tr> <td align="left">ls</td> <td align="left">显示当前目录的内容</td> <td align="left">ls -la</td> </tr> <tr> <td align="left">dircmp</td> <td align="left">比较两个目录的内容</td> <td align="left">dircmp dir1 dir2</td> </tr> </tbody></table>

2024/6/6

深入学习 TypeScript 类型体操

<h2 id="模式匹配做提取"><a href="#模式匹配做提取" class="headerlink" title="模式匹配做提取"></a>模式匹配做提取</h2><h3 id="数组类型"><a href="#数组类型" class="headerlink" title="数组类型"></a>数组类型</h3>提取数组第一个元素的类型 <figure class="highlight ts"><table><tr><td class="gutter"><pre>1 2 3 </pre></td><td class="code"><pre>type GetFirst<Arr extends unknown[]> = Arr extends [infer First, ...unknown[]] ? First : never; </pre></td></tr></table></figure> 提取数组最后一个元素的类型 <figure class="highlight ts"><table><tr><td class="gutter"><pre>1 2 3 </pre></td><td class="code"><pre>type GetLast<Arr extends unknown[]> = Arr extends [...unknown[], infer Last] ? Last : never; </pre></td></tr></table></figure> 取去掉最后一个元素的数组 <figure class="highlight ts"><table><tr><td class="gutter"><pre>1 2 3 4 5 </pre></td><td class="code"><pre>type PopArr<Arr extends unknown[]> = Arr extends [] ? [] : Arr extends [...infer Rest, unknown] ? Rest : never; </pre></td></tr></table></figure>

2024/2/18

微前端的几种架构介绍

<h2 id="什么是微前端"><a href="#什么是微前端" class="headerlink" title="什么是微前端"></a>什么是微前端</h2>而提到微前端就离不开微服务，大家对微服务都比较熟悉了，微服务允许后端体系结构通过松散耦合的代码库进行扩展，每个代码库负责自己的业务逻辑，并公开一个 API，每个 API 均可独立部署，并且各自由不同的团队拥有和维护。 <img src="https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/202207/16568565844214.jpg" alt="-w610"> 前端架构经历了从单体，到前后端分离，再到微服务，最终发展到现在的微前端的过程如下图所示： <img src="https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/202207/16568581684949.jpg" alt="-w697"> 微前端的思路是把微服务的架构引入到前端，其核心都是要能够以业务为单元构建端到端的垂直架构，使得单个的团队能够独立自主的进行相关的开发，同时又具备相当的灵活性，按需求来组成交付应用。 “微前端”一词最早于 2016 年底在 ThoughtWorks 技术雷达中提出的。它将微服务的概念扩展到了前端世界。微前端的核心思路其实是远程应用程序，包含组件／模块／包的运行时加载。

2024/2/2

git clone 的时候如何通过 SSH 链接来下载远程项目

当我们需要从 github 下载项目的时候，它提供了 2 种下载链接： <figure class="highlight shell"><table><tr><td class="gutter"><pre>1 2 </pre></td><td class="code"><pre>https://github.com/ant-design/ant-design.git git@github.com:ant-design/ant-design.git </pre></td></tr></table></figure> 上面 2 种下载链接分别使用了 HTTPS 和 SSH 协议。那么这两种协议有什么区别呢？ <ul> <li>访问控制：SSH 协议使用公钥和私钥来进行身份验证，因此你需要在远程主机上安装你的公钥。只有拥有私钥的用户才能进行身份验证和访问。相反，HTTPS 协议使用用户名和密码进行身份验证。git clone 或 git fetch 的时候，如果使用 HTTPS 链接则不需要进行身份验证，而 SSH 链接需要。</li> <li>传输速度：SSH 协议在传输数据时进行压缩，因此它可以在传输大量数据时比 HTTPS 更快。此外，SSH 协议通常可以在传输数据时使用更少的带宽，这对于连接速度较慢的网络非常有用。</li> <li>防火墙限制：某些公司或组织可能会在防火墙中阻止对 SSH 端口的访问，这可能会使 SSH 协议无法使用。另一方面，HTTPS 协议通常可以通过防火墙，因为它使用标准的 Web 端口 80 和 443。</li> </ul> 想要通过 SSH 链接来下载项目，需要在客户端和服务器之间配置 SSH key，那么如何做呢？下面以 github 为例来说明具体步骤。 <h2 id="1-在本地生成-SSH-key"><a href="#1-在本地生成-SSH-key" class="headerlink" title="1. 在本地生成 SSH key"></a>1. 在本地生成 SSH key</h2><figure class="highlight shell"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre>ssh-keygen -t ed25519 -C "user@example.com" </pre></td></tr></table></figure>

2023/10/11

从 ESLint 开始，说透我如何在团队项目中基于 Vue 做代码校验

<img src="https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/202106/eslint.png"> 最近遇到了一个老项目，比较有意思的是这个项目集前后端的代码于一起，而后端也会去修改前端代码，所以就出现了后端用 IntelliJ IDEA 来开发前端项目，而前端用 VSCode 来开发前端项目的情况。 于是乎，出现了代码规范的问题，所以就有了这篇文章，整理了一下前端代码校验以及在 Vue 项目中的实践。 阅读完这篇文章，你可以收获： <ul> <li>能够自己亲手写出一套 ESLint 配置；</li> <li>会知道业界都有哪些著名的 JS 代码规范，熟读它们可以让你写出更规范的代码；</li> <li>vue-cli 在初始化一个包含代码校验的项目时都做了什么；</li> <li>Prettier 是什么？为什么要使用它？如何与 ESLint 配合使用？</li> <li>EditorConfig 又是什么？如何使用？</li> <li>如何在 VSCode 中通过插件来协助代码校验工作；</li> <li>如何保证 push 到远程仓库的代码是符合规范的；</li> </ul>

2021/6/16

死磕 36 个 JS 手写题（搞懂后，提升真的大）

为什么要写这类文章 作为一个程序员，代码能力毋庸置疑是非常非常重要的，就像现在为什么大厂面试基本都问什么 API 怎么实现可见其重要性。我想说的是居然手写这么重要，那我们就必须掌握它，所以文章标题用了死磕，一点也不过分，也希望不被认为是标题党。 作为一个普通前端，我是真的写不出 Promise A+ 规范，但是没关系，我们可以站在巨人的肩膀上，要相信我们现在要走的路，前人都走过，所以可以找找现在社区已经存在的那些优秀的文章，比如工业聚大佬写的 <a href="https://mp.weixin.qq.com/s/qdJ0Xd8zTgtetFdlJL3P1g">100 行代码实现 Promises/A+ 规范</a>，找到这些文章后不是收藏夹吃灰，得找个时间踏踏实实的学，一行一行的磨，直到搞懂为止。我现在就是这么干的。 能收获什么 这篇文章总体上分为 2 类手写题，前半部分可以归纳为是常见需求，后半部分则是对现有技术的实现； <ul> <li>对常用的需求进行手写实现，比如数据类型判断函数、深拷贝等可以直接用于往后的项目中，提高了项目开发效率；</li> <li>对现有关键字和 API 的实现，可能需要用到别的知识或 API，比如在写 forEach 的时候用到了无符号位右移的操作，平时都不怎么能够接触到这玩意，现在遇到了就可以顺手把它掌握了。所以手写这些实现能够潜移默化的扩展并巩固自己的 JS 基础；</li> <li>通过写各种测试用例，你会知道各种 API 的边界情况，比如 Promise.all，你得考虑到传入参数的各种情况，从而加深了对它们的理解及使用；</li> </ul> 阅读的时候需要做什么 阅读的时候，你需要把每行代码都看懂，知道它在干什么，为什么要这么写，能写得更好嘛？比如在写图片懒加载的时候，一般我们都是根据当前元素的位置和视口进行判断是否要加载这张图片，普通程序员写到这就差不多完成了。而大佬程序员则是会多考虑一些细节的东西，比如性能如何更优？代码如何更精简？比如 yeyan1996 写的图片懒加载就多考虑了 2 点：比如图片全部加载完成的时候得把事件监听给移除；比如加载完一张图片的时候，得把当前 img 从 imgList 里移除，起到优化内存的作用。 除了读通代码之外，还可以打开 Chrome 的 Script snippet 去写测试用例跑跑代码，做到更好的理解以及使用。 在看了几篇以及写了很多测试用例的前提下，尝试自己手写实现，看看自己到底掌握了多少。条条大路通罗马，你还能有别的方式实现嘛？或者你能写得比别人更好嘛？ 好了，还楞着干啥，开始干活。

2021/4/2

1.5 万字 CSS 基础拾遗（核心知识、常用需求）

本篇文章围绕了 CSS 的核心知识点和项目中常见的需求来展开。虽然行文偏长，但偏基础，适合初级中级前端阅读，阅读的时候请适当跳过已经掌握的部分。 这篇文章断断续续写了比较久，也参考了许多优秀的文章，但或许文章里还是存在不好或不对的地方，请多多指教，可以评论里直接提出来哈。 小 tip：后续内容更精彩哦。 <img src="https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/202103/cssxm.png">

2021/3/22

为你的网站加上 WebP 格式的图片吧

之前写了一篇文章：<a href="https://github.com/Bulandent/blog/issues/17">jpg、gif、png 和 svg 用于 web 上，我们该如何选择最合适的图像格式</a>，介绍了这几种图片格式的特点，以及如何为网站选择合适的图片，然后评论区有位大佬让我补充下 WebP 格式，于是乎它来了。 <img src="https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/202101/webp006.png"> <h2 id="什么是-WebP-格式"><a href="#什么是-WebP-格式" class="headerlink" title="什么是 WebP 格式"></a>什么是 WebP 格式</h2>WebP 是一种现代图像格式，可为 Web 上的图像提供出色的无损和有损压缩。使用 WebP，网站管理员和 Web 开发人员可以创建更小，更丰富的图像，从而使 Web 更快。 与 PNG 相比，WebP 无损图像的尺寸要小 26％。在同等的 SSIM 质量指数下，WebP 有损图像比同类 JPEG 图像小 25-34％。 无损 WebP 支持透明性（也称为 Alpha 通道），而仅增加了 22％的字节数。对于可以接受有损 RGB 压缩的情况，有损 WebP 还支持透明性，与 PNG 相比，文件大小通常小 3 倍。 <blockquote> 上面这 3 段话来源于 <a href="https://developers.google.com/speed/webp">https://developers.google.com/speed/webp</a> </blockquote>

2021/1/23

让人爱不释手的 JS 扩展操作符 13 用

我相信你一定或多或少的接触或使用过 <code>JS</code> 中的扩展操作符（Spread Operator），在基本形式中，扩展操作符看起来像三个点，比如如下这样： <figure class="highlight js"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre>[...arr] </pre></td></tr></table></figure> 而实际上，它也就是这么用的，但是如果事情有这么简单，就不用我在这里写了。扩展操作符给我最大的印象就是，这玩意还挺方便的，然而最近写代码的时候经常性的遇到需要使用扩展操作符的场景，所以我干脆在网上找了些资料，把平时常见的应用场景给罗列了下，发现这个操作符是真的强大，有多强大？来看看下面这些用法吧。 <h2 id="1-字符串转数组"><a href="#1-字符串转数组" class="headerlink" title="1. 字符串转数组"></a>1. 字符串转数组</h2>字符串转数组最普遍的做法是这样： <figure class="highlight js"><table><tr><td class="gutter"><pre>1 2 3 </pre></td><td class="code"><pre>let str = 'hello' let arr = str.split('') console.log(arr) // ['h', 'e', 'l', 'l', 'o'] </pre></td></tr></table></figure> 而使用了扩展操作符后可以这样： <figure class="highlight js"><table><tr><td class="gutter"><pre>1 2 3 </pre></td><td class="code"><pre>let str = 'hello' let arr = [...str] console.log(arr) // ['h', 'e', 'l', 'l', 'o'] </pre></td></tr></table></figure>

2021/1/13

6 分钟了解 HTTP 发展史

<h2 id="HTTP-0-9"><a href="#HTTP-0-9" class="headerlink" title="HTTP/0.9"></a>HTTP/0.9</h2>HTTP/0.9 是于 1991 年提出的，主要用于学术交流，需求很简单——用来在网络之间传递 HTML 超文本的内容，所以被称为超文本传输协议。整体来看，它的实现也很简单，采用了基于请求响应的模式，从客户端发出请求，服务器返回数据。 <h3 id="完整请求流程"><a href="#完整请求流程" class="headerlink" title="完整请求流程"></a>完整请求流程</h3><ul> <li>因为 HTTP 都是基于 TCP 协议的，所以客户端先要根据 IP 地址、端口和服务器建立 TCP 连接，而建立连接的过程就是 TCP 协议三次握手的过程。</li> <li>建立好连接之后，会发送一个 GET 请求行的信息，如 GET /index.html 用来获取 index.html。</li> <li>服务器接收请求信息之后，读取对应的 HTML 文件，并将数据以 ASCII 字符流返回给客户端。</li> <li>HTML 文档传输完成后，断开连接。</li> </ul> <img src="https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/202011/browser_031.png" alt="HTTP/0.9 请求过程">

2021/1/5

Resourse Hints 知多少

在上篇文章 <a href="https://juejin.cn/post/6914479519394955271">探究网页资源究竟是如何阻塞浏览器加载的</a> 中介绍到 JS 会阻塞 DOM 的加载，样式会阻塞页面的渲染，外链样式里的自定义字体还会对文字造成闪动给用户带来不好的体验，诸如此类问题还有挺多，那到底该如何解决它们呢？ 今天我们就来学习通过在 <code>link</code> 标签里加上特定的属性，比如 <code>preload</code>、<code>prefetch</code> 等来解决此类问题，那么你对这些属性又了解多少呢？把它们用在了你们的项目优化中了嘛？

2020/12/28

探究网页资源究竟是如何阻塞浏览器加载的

一个页面允许加载的外部资源有很多，常见的有脚本、样式、字体、图片和视频等，对于这些外部资源究竟是如何影响整个页面的加载和渲染的呢？今天我们来一探究竟。 阅读完这篇文章你将解开如下谜团： <ul> <li>如何用 Chrome 定制网络加载速度？</li> <li>图片/视频/字体会阻塞页面加载嘛？</li> <li>CSS 是如何阻塞页面加载的？</li> <li>JS 又是如何阻塞页面加载的？</li> <li>JS 一定会阻塞 DOM 加载嘛？</li> <li>defer 和 async 是什么？又有何特点？</li> <li>动态脚本会造成阻塞嘛？</li> <li>阻塞是怎么和 DOMContentLoaded 与 onload 扯上关系的？</li> </ul>

2020/12/26

很多人知道 Web Storage，但是你清楚 Cookie 嘛

可以在浏览器的 <code>Application</code> 面板下看到浏览器的本地存储包含了：<code>Cookie</code>、<code>sessionStorage</code>、<code>localStorage</code> 和 <code>IndexedDB</code>。 <img src="https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/202011/browser_008.png"> <h2 id="Cookie"><a href="#Cookie" class="headerlink" title="Cookie"></a>Cookie</h2><h3 id="Cookie-是什么"><a href="#Cookie-是什么" class="headerlink" title="Cookie 是什么"></a>Cookie 是什么</h3><code>Cookie</code> 又叫 <code>HTTP Cookie</code> 或者叫浏览器 <code>Cookie</code>。<code>Cookie</code> 的作用是维护服务端和客户端的会话状态，简而言之就是告诉服务器当前客户端用户的一些信息，比如是否登录啥的。

2020/12/24

浏览器专题之缓存篇

浏览器缓存一直是个老生常谈的话题，也是面试官常常用来鉴别面试者的利器，作为前端来讲这块知识是属于必须掌握的，再者利用好缓存也是做性能优化的有效方法。本文将从缓存原因、缓存读写顺序，缓存位置以及缓存策略这几个角度介绍浏览器缓存，并且最后给出实践的应用举例。 <img src="https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/202011/browser_015.png"> <h2 id="为什么要缓存"><a href="#为什么要缓存" class="headerlink" title="为什么要缓存"></a>为什么要缓存</h2>很多同学知道缓存的位置和字段，知道怎么用，但是你有没有想过为什么我们的页面需要浏览器缓存呢？ <ul> <li>缓存可以减少用户等待时间，提升用户体验，直接从内存或磁盘中取缓存数据肯定是比从服务器请求更快的；</li> <li>减少网络带宽消耗：对于网站运营者和用户，带宽都代表着成本，过多的带宽消耗，都需要支付额外的费用。试想一下如果可以使用缓存，只会产生极小的网络流量，这将有效的降低运营成本。</li> <li>降低服务器压力：给网络资源设定有效期之后，用户可以重复使用本地的缓存，减少对源服务器的请求，降低服务器的压力。</li> </ul>

2020/12/20

从输入 URL 到页面显示发生了什么

读了李兵老师的 <a href="https://time.geekbang.org/column/article/117637">浏览器的工作原理与实践</a>，让我对浏览器的工作原理有了更加深刻的理解，尤其是从用户输入 URL 到页面显示这一过程发生的事情，以往看的文章都是点到为止，而他却说得面面俱到非常详细，遂我把内容总结了一下分享给大家，值得你花个 5 分钟阅读一下。 <img src="https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/202011/browser_002.png">

2020/12/16

浏览器专题之事件机制

<h2 id="事件流"><a href="#事件流" class="headerlink" title="事件流"></a>事件流</h2>在早期 <code>IE</code> 和 <code>Netscape</code> 团队在开发第四代浏览器的时候，遇到一个问题：当点击一个按钮的时候，是应该先处理父级的事件呢？还是应该先处理按钮的事件呢？<code>IE</code> 和 <code>Netscape</code> 给出了 2 种完全相反的答案，<code>IE</code> 提出事件冒泡的概念，而 <code>Netscape</code> 则支持事件捕获。 <h3 id="事件冒泡"><a href="#事件冒泡" class="headerlink" title="事件冒泡"></a>事件冒泡</h3>事件冒泡认为事件应该由最具体的元素开始触发，然后层层往父级传播： <img src="https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/202011/eventFlow1.png">

2020/12/11

浏览器专题之安全篇

<img src="https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/202011/browser_safe.png"> <h2 id="同源策略（Same-Origin-Policy）"><a href="#同源策略（Same-Origin-Policy）" class="headerlink" title="同源策略（Same Origin Policy）"></a>同源策略（Same Origin Policy）</h2>如果两个 <code>URL</code> 的协议、域名和端口都相同，我们就称这两个 <code>URL</code> 同源。 比如，这个 <code>http://store.company.com/dir/page.html</code> 和下面这些 <code>URL</code> 相比源的结果如下： <figure class="highlight plain"><table><tr><td class="gutter"><pre>1 2 3 4 5 </pre></td><td class="code"><pre>http://store.company.com/dir2/other.html // 同源，只有路径不同 http://store.company.com/dir/inner/another.html // 同源，只有路径不同 https://store.company.com/secure.html // 失败，协议不同 http://news.company.com/dir/other.html // 失败，域名不同 http://store.company.com:81/dir/etc.html // 失败，端口不同 ( http:// 默认端口是80) </pre></td></tr></table></figure>

2020/12/4

「建议收藏」送你一份精心总结的3万字ES6实用指南（全）

写本篇文章目的是为了夯实基础，基于阮一峰老师的著作 <a href="https://es6.ruanyifeng.com/">ECMAScript 6 入门</a> 以及 <a href="https://github.com/tc39/proposals/blob/master/finished-proposals.md">tc39-finished-proposals</a> 这两个知识线路总结提炼出来的重点和要点，涉及到从 <code>ES2015</code> 到 <code>ES2021</code> 的几乎所有知识，基本上都是按照一个知识点配上一段代码的形式来展示，所以篇幅较长，也正是因为篇幅过长，所以就没把 <code>Stage 2</code> 和 <code>Stage 3</code> 阶段的提案写到这里，后续 <code>ES2021</code> 更新了我再同步更新。 <blockquote> 有 5 个提案已经列入 Expected Publication Year in 2021 所以本篇中暂且把他们归为 ES2021。 </blockquote> <img src="https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/202011/es6.png">

2020/11/17