步

步步走

步步走前端

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

步步走

mac 环境变量与 shell

如何反编译微信小程序

mac 终端命令大全

深入学习 TypeScript 类型体操

微前端的几种架构介绍

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

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

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

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

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

推荐订阅

news view

Chawye Hsu

Oracle Blog for Java

Yuko's Blog

GoodBoyboy 's Blog｜惬意小屋-点滴记忆