bulandent
bulandent
在说这个插件之前，可以先去 [https://bubuzou.com/](https://bubuzou.com/2020/09/21/vue-operate/) 这个网站体验下这个插件的效果，好有个大概的印象。 通过阅读这篇文章，你可以收获什么？ 1. 用 `JS` 直接操作 `DOM` 2. 浏览器 `BOM` 相关知识 3. 性能优化思考 4. 插件设计思考 ## 背景 平时我们在用 `Markdown` 写的文章，如果放到自己的博客或者投稿到掘金等平台，其内容会被浏览器解析成 `HTML`。而 `Markdown` 里面的一级（#）、二级（##）、三级标题（###）分别对应于页面的文章标题、一级目录、二级目录。基于此，就可以很好的利用该生成的页面实现一个目录，便于更直观方便的的浏览文章内容，而这就是最初我想为博客里的文章页实现一个目录功能的理由。 > 这个插件是基于 `Hexo` 生成的网页来实现的，且目前只支持一级和二级目录，因为作为一篇文章来说有两个层级已经可以很好的将一块内容划分细说得很清楚了。 ##...
 最近遇到了一个老项目，比较有意思的是这个项目集前后端的代码于一起，而后端也会去修改前端代码，所以就出现了后端用 IntelliJ IDEA 来开发前端项目，而前端用 VSCode 来开发前端项目的情况。 于是乎，出现了代码规范的问题，所以就有了这篇文章，整理了一下前端代码校验以及在 Vue 项目中的实践。 阅读完这篇文章，你可以收获： - 能够自己亲手写出一套 ESLint 配置； - 会知道业界都有哪些著名的 JS 代码规范，熟读它们可以让你写出更规范的代码； - vue-cli 在初始化一个包含代码校验的项目时都做了什么； - Prettier 是什么？为什么要使用它？如何与 ESLint 配合使用？ - EditorConfig 又是什么？如何使用？...
**为什么要写这类文章** 作为一个程序员，代码能力毋庸置疑是非常非常重要的，就像现在为什么大厂面试基本都问什么 API 怎么实现可见其重要性。我想说的是居然手写这么重要，那我们就必须掌握它，所以文章标题用了死磕，一点也不过分，也希望不被认为是标题党。 作为一个普通前端，我是真的写不出 Promise A+ 规范，但是没关系，我们可以站在巨人的肩膀上，要相信我们现在要走的路，前人都走过，所以可以找找现在社区已经存在的那些优秀的文章，比如工业聚大佬写的 [100 行代码实现 Promises/A+ 规范](https://mp.weixin.qq.com/s/qdJ0Xd8zTgtetFdlJL3P1g)，找到这些文章后不是收藏夹吃灰，得找个时间踏踏实实的学，一行一行的磨，直到搞懂为止。我现在就是这么干的。 **能收获什么** 这篇文章总体上分为 2 类手写题，前半部分可以归纳为是常见需求，后半部分则是对现有技术的实现； - 对常用的需求进行手写实现，比如数据类型判断函数、深拷贝等可以直接用于往后的项目中，提高了项目开发效率； - 对现有关键字和 API 的实现，可能需要用到别的知识或 API，比如在写 forEach 的时候用到了无符号位右移的操作，平时都不怎么能够接触到这玩意，现在遇到了就可以顺手把它掌握了。所以手写这些实现能够潜移默化的扩展并巩固自己的 JS 基础； - 通过写各种测试用例，你会知道各种 API...
写本篇文章目的是为了夯实基础，基于阮一峰老师的著作 [ECMAScript 6 入门](https://es6.ruanyifeng.com/) 以及 [tc39-finished-proposals](https://github.com/tc39/proposals/blob/master/finished-proposals.md) 这两个知识线路总结提炼出来的重点和要点，涉及到从 `ES2015` 到 `ES2021` 的几乎所有知识，基本上都是按照一个知识点配上一段代码的形式来展示，所以篇幅较长，也正是因为篇幅过长，所以就没把 `Stage 2` 和 `Stage 3` 阶段的提案写到这里，后续 `ES2021` 更新了我再同步更新。 > 有 5 个提案已经列入 Expected Publication Year in 2021 所以本篇中暂且把他们归为 ES2021。...
最近有个小程序项目需要迭代，但是迭代任务不多，时间比较充裕。而这个小程序最早是在18年的时候开发的，用的开发框架是 `WePY` 的 `1.7.2` 版本，去年也就是 `19` 年的时候 `WePY` 框架进行了升级，到了 `2.0` 版本。升级之后的 `WePY`，用 [`WePY`](https://wepyjs.github.io/wepy-docs/2.x/#/) 官方文档的话来说：通过优化细节，引入 `Promise`、`Async Functions` 等让开发小程序项目变得更加简单，高效。基于这些背景，我和小伙伴一拍即合，决定对我们的项目进行框架升级，体验下到底 `WePY2` 能给我们带来什么。 本文将以项目改动为出发点，基于当前这个项目的结构和编码方式来考虑到底升级 `WePY2` 后，哪里需要改，怎么改以及有哪些需要注意的地方，通过对比 `2` 个版本的写法差异这个思路来写，不会去太较真 `WePY2` 相对于 `WePY1` 实现或原理上的区别。下面我将一条一条的列出来需要改动的点。 > 本篇文章记录的是我和小伙伴这次升级框架遇到的需要改动的地方和坑，所使用的是...
本篇文章围绕了 CSS 的核心知识点和项目中常见的需求来展开。虽然行文偏长，但偏基础，适合初级中级前端阅读，阅读的时候请适当跳过已经掌握的部分。 这篇文章断断续续写了比较久，也参考了许多优秀的文章，但或许文章里还是存在不好或不对的地方，请多多指教，可以评论里直接提出来哈。 小tip：后续内容更精彩哦。  ## 核心概念和知识点 ### 语法 CSS 的核心功能是将 CSS 属性设定为特定的值。一个属性与值的键值对被称为**声明**（declaration）。 ```css color: red; ``` 而如果将一个或者多个声明用 `{}` 包裹起来后，那就组成了一个**声明块**（declaration block）。 ```css { color: red; text-align: center; } ```...
## HTTP/0.9 HTTP/0.9 是于 1991 年提出的，主要用于学术交流，需求很简单——用来在网络之间传递 HTML 超文本的内容，所以被称为超文本传输协议。整体来看，它的实现也很简单，采用了基于请求响应的模式，从客户端发出请求，服务器返回数据。 ### 完整请求流程 - 因为 HTTP 都是基于 TCP 协议的，所以客户端先要根据 IP 地址、端口和服务器建立 TCP 连接，而建立连接的过程就是 TCP 协议三次握手的过程。 - 建立好连接之后，会发送一个 GET 请求行的信息，如GET /index.html 用来获取 index.html。 -...
一直以来，我们所熟知的或者运用到 Web 应用中的图片格式无非就是 PNG、JPG、GIF、SVG 或者 WebP，关于这些格式我总结了 2 篇文章，感兴趣的可以看看： - [jpg、gif、png和svg用于web上，我们该如何选择最合适的图像格式](https://juejin.cn/post/6912217043009798157) - [为你的网站加上 WebP 格式的图片吧](https://juejin.cn/post/6921111220581826567) 在介绍 WebP 的时候，我们已经知道了相比 JPG 和 PNG 来说，WebP 已经兼顾了高呈现质量以及更小的文件体积，可以说已经非常优秀了，然后还是有一群人不满足于此，他们开发出了 AVIF 这种号称下一代图像压缩格式的玩意。 这篇文章将围绕 AVIF 是什么？对比其他图像格式有哪些优势？怎么运用？这 3 个问题展开。 ##...
# 为你的网站加上 WebP 格式的图片吧 之前写了一篇文章：[jpg、gif、png和svg用于web上，我们该如何选择最合适的图像格式](https://github.com/Bulandent/blog/issues/17)，介绍了这几种图片格式的特点，以及如何为网站选择合适的图片，然后评论区有位大佬让我补充下 WebP 格式，于是乎它来了。  ## 什么是 WebP 格式 WebP 是一种现代图像格式，可为 Web 上的图像提供出色的无损和有损压缩。 使用 WebP，网站管理员和 Web 开发人员可以创建更小，更丰富的图像，从而使 Web 更快。 与 PNG 相比，WebP 无损图像的尺寸要小 26％。 在同等的 SSIM 质量指数下，WebP...
我相信你一定或多或少的接触或使用过 `JS` 中的扩展操作符（Spread Operator），在基本形式中，扩展操作符看起来像三个点，比如如下这样： ```js [...arr] ``` 而实际上，它也就是这么用的，但是如果事情有这么简单，就不用我在这里写了。扩展操作符给我最大的印象就是，这玩意还挺方便的，然而最近写代码的时候经常性的遇到需要使用扩展操作符的场景，所以我干脆在网上找了些资料，把平时常见的应用场景给罗列了下，发现这个操作符是真的强大，有多强大？来看看下面这些用法吧。 ## 1. 字符串转数组 字符串转数组最普遍的做法是这样： ```js let str = 'hello' let arr = str.split('') console.log(arr) // ['h', 'e', 'l', 'l', 'o'] ``` 而使用了扩展操作符后可以这样：...