一碗周.-CSDN博客

原创谁说前端不能搞红黑树，用这55张图拿JS一起手撕红黑树

红黑树是数据结构与算法中比较难理解的一个树状结构了，在前端开发中，如果仅仅是业务开发的话，几乎是用不到红黑树的；那为什么还有学习红黑树呢？红黑树可以说是现在应用的最复杂的二叉树之一，如果红黑树都能掌握还会怕其他的树状结构嘛？通过本篇文章你将会掌握下面这些内容，我大概说明了内容以及难度：...

2022-06-27 21:01:33 831 2

原创面试官：前端布局了解嘛？我一下说了接近五十种布局方案，给面试官整不会了。

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~CSS布局已经成为面试必问的话题的，这篇文章总结了常见的布局以及其多种实现方式，目录如下：文章目录水平居中1. 使用text-align属性2. 定宽块级元素水平居中(方法一)3. 定宽块级元素水平居中(方法二)4. 定宽块级元素水平居中(方法三)5. 定宽块级元素水平居中(方法四)6. Flex方案7. Grid方案垂直居中1. 行内块级元素垂直居中2. 定位方式实现(方法一)3. 定位方式实现(方法二)4.

2021-12-29 14:58:10 3175

原创从0开始搭建一个Vue3.x企业级项目骨架

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~写在前面本篇文章将从0开始搭建一个企业可用的项目骨架，这里我使用的包管理工具时Yarn，别问为什么，问就是喜欢用这个；如果你是npm的话，直接将yarn add全部替换为npm i即可（废话文学）。通过Vite安装Vue3项目安装比较简单，首先输入命令npm create vite然后会让你输入项目名称第三步让你选择一个框架，这里选择Vue最后一步我们选择vue-ts，也就是Vue+Type.

2022-03-14 23:02:59 1223 2

原创 10分钟快速上手Vue3过渡动画

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~写在前面在实际开发中，为了增加用户体验，经常会使用到过渡动画，而过渡动画在CSS中是通过transition和animation实现的。而在Vue中，Vue本身中内置了一些组件和API可以帮助我们方便的实现过渡动画效果；接下来我们就学习一下。Vue的transition组件Vue中中提供了transition组件，该组件可以在下列情况之一的情况下，为元素自动添加进入/离开的过渡效果：使用v-if条件渲.

2022-02-16 21:20:03 712

原创 10分钟快速上手Composition API（setup 语法糖写法）

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~写在前面我们在写Vue2的时候，编写组件的方式是使用Options API，这种方式的特点就是在对应的属性编写对应的功能模块，例如在data中定义数据、methods定义方法等；这种方法的弊端就是同一功能的代码逻辑被拆分到各个属性中，影响代码的阅读。Vue3中提供的Composition API可以帮助我们优雅的组织我们的代码，让相关功能的代码更加有序的组织在一起，可以参考『做了一夜动画，就为让大家更好的理.

2022-02-14 19:24:10 793

原创搞懂Vue3中的异步组件，看这篇就够了

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~异步组件写在前面当我们的项目达到一定的规模时，对于某些组件来说，我们并不希望一开始全部加载，而是需要的时候进行加载；这样的做得目的可以很好的提高用户体验。为了实现这个功能，Vue3中为我们提供了一个方法，即defineAsyncComponent，这个方法可以传递两种类型的参数，分别是函数类型和对象类型，接下来我们分别学习。传递工厂函数作为参数defineAsyncComponent方法接收一个工厂函.

2022-02-11 08:23:20 5551 1

原创总结了Vue3的七种组件通信方式，别再说不会组件通信了

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~写在前面本篇文章是全部采用的<script setup>这种组合式API写法，相对于选项式来说，组合式API这种写法更加自由，具体可以参考Vue文档对两种方式的描述。本篇文章将介绍如下七种组件通信方式：propsemitv-modelrefsprovide/injecteventBusvuex/pinia(状态管理工具)开始搞事情~举一个栗子俗话说的好，学习不写demo，.

2022-02-10 09:08:43 2289

原创从:key的角度，来看Vue3中diff算法的实现原理（多图详解）

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~写在前面在我们使用v-for指令的时候，尤大大建议我们为每一项都添加一个唯一的属性key，在Vue文档中是这么说的：为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的*key*attribute，除非遍历输出的 DOM 内容非常简单。看到这，是不是会有以下疑问：为什么要添加一个唯一的key？为什么不建议用索引作为唯一的key？为什么不能使用.

2022-01-18 16:42:27 574

原创我用Vue3+TS实现了一个新年倒计时组件，适用于各种场景

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~写在前面最近在写一个考试系统，有一个倒计时自动交卷的需求，正好也马上春节，就有了编写一个倒计时组件的想法。对于这个倒计时组件，它应该具有这样的功能：字体、颜色等样式可以由使用者自定义；结束时间也可以由使用者自定义；倒计时结束以后，倒计时组件emit一个事件，以便进行后续操作。现在我们根据这样的需求，去编写这个组件。组件属性和事件首先我们创建一个Vue3+TS+setup的基础组件，代码如下：.

2022-01-11 16:54:34 2157 3

原创过年了~我用CSS画了个灯笼，看着真喜庆

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~写在前面过年了~ 过年了~ 过年了~辞旧迎新过年啦张灯结彩春节啦~金鸡起舞送福啦新的一年福来啦~文章开头几句歌词，顿时显得喜庆了不，我们的灯笼是下面这个样子的。animation属性画灯笼我们肯定不能画一个静态的灯笼，我们先来复习一下CSS中的animation属性，该是是一个简写属性，由animation-name，animation-duration, animation-timing-f.

2022-01-10 08:47:06 297

原创给VSCode定义代码片段，让coding速度快到飞起~

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~写在前面代码片段可以理解为模板，当我们输入指定时，按下【tab】或者【enter】即可出现对应的模板。只要代码片段写的好，升职加薪少不了~代码片段的好处与坏处coder对代码片段的评价褒贬不一，下面这张图解释了代码片段的好处与坏处：何时使用代码片段关于什么时候使用代码片段，我的建议是：当你对一个东西足够熟练，例如console.log()，这个时候可以为其设置代码片段。有些东西特别繁琐，每次.

2022-01-05 12:16:15 443 1

原创【前端工程化】我写了万字，带你快速上手webpack

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~写在前面webpack是一个现代的打包模块化的JavaScript工具，在webpack中一切文件皆模块，在内部通过Loader转换文件，通过Plugin注入钩子，最后输出由多个模块组合成的文件。上图是webpack官网的截图，可以看出，对于webpack来说，JavaScript、CSS、SCSS、图片等所有文件，全部作为模块来使用，这些模块经过webpack处理后，最终会输出为浏览器可以使用的资源。.

2022-01-04 09:44:18 196

原创【不一样的CSS】实现三列布局的 5 种方式

写在前面对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏)三列布局概述三列布局主要分为两种：第一种是前两列定宽，最后一列自适应，这一种本质上与两列布局没有什么区别，可以参照两列

2022-01-04 08:13:49 1336

原创【不一样的CSS】CSS布局系列-导航帖（包含常见所有布局方案）

写在前面对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。前置技能学习 CSS 布局不是学习的一个属性，也不是一个方法，而是众多属性、特性集一身的一种开发技巧。为了掌握这一开发技巧，我们前置需要学习一些关于布局的 CSS 属性以及一些概念和特性。该系列的目录如下：【不一样的CSS】深入理解 float

2022-01-04 08:13:16 202

原创实现全屏布局的 3 种方式

写在前面对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏)全屏布局概述全屏布局主要应用在后台，主要效果如下所示：实现全屏布局的 3 种方式在开始今天的文章之前，我们先把今天的主

2022-01-03 13:29:00 1172

原创实现Sticky Footer布局的 4 种方式

写在前面对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏)Sticky Footer布局概述所谓的 Sticky Footer 布局并不是一种新的前端技术和概念，它就是一种网页布局。

2022-01-02 16:25:38 1256

原创实现等分布局的 4 种方式

写在前面对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏)等分布局概述等分布局就是将一个容器平均分成几等份，这里以 4 等分为例，主要介绍4种方法。实现等分布局的 4 种方式在开

2021-12-29 19:00:00 1522

原创实现两列布局的 6 种方式

写在前面对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏)两列布局概述所谓的两列布局就是一列定宽(也有可能由子元素决定宽度)，一列自适应的布局。最终效果如下所示：实现两列布局的

2021-12-29 14:51:57 2965

原创面试官：[‘1‘, ‘2‘, ‘3‘].map(parseInt)的结果是什么？为甚？我：[1, 2, 3]。面试官：你不用来了。

面试官：['1', '2', '3'].map(parseInt)的结果是什么？为甚？我：[1, 2, 3]。面试官：你不用来了。

2021-12-27 21:54:32 4566 4

原创实现水平垂直布局的 7 种方式

写在前面对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏)实现水平垂直布局的 7 种方式在开始今天的文章之前，我们先把今天的主要代码放到下面：公共的 CSS 样式如下：body

2021-12-27 17:36:57 1043

原创一文让你了解CSS中的各种单位

写在前面对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏)CSS 中的单位大体分为一下三种：绝对单位: 不会因为其他元素的尺寸变化而变化。相对单位: 没有一个固定的度量值，而是由

2021-12-27 17:36:30 611

原创实现垂直布局的 8 种方式

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~写在前面对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏)实现垂直布局的 8 种方式.

2021-12-24 17:43:27 1540

原创实现居中布局的 8 种方式

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~写在前面对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏)实现居中布局的 8 种方式.

2021-12-24 17:42:57 2760 1

原创【不一样的CSS】深入理解 z-index （我们一起来叠罗汉)

写在前面对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏)z-index 含义z-index 属性制定了元素及其子元素的在 Z 轴上面的顺序，而 Z 轴上面的顺序可以决定当元素发

2021-12-23 15:33:15 1598

原创【不一样的CSS】深入理解 position (掌握定位就是这么 sao 气)

写在前面对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏)position 属性概述position 属性是掌握 CSS 布局中重要得一个属性，该属性用于指定一个元素在文档中的定位方

2021-12-23 15:32:36 517

原创【不一样的CSS】深入理解 overflow (溢出要学会处理)

写在前面对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏)overflow 的基本属性概述overflow 属性用于当一个元素太大而无法适应父级容器的大小时需要做什么。该属性有四个

2021-12-21 09:28:48 2641

原创【不一样的CSS】深入理解 float (原来浮动这么简单)

写在前面对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏)float 的用法float 概述float 的诞生之初并不是为了完成某种高级的布局，而是为了完成一个简单的文字环绕。f

2021-12-21 09:28:02 851

原创掌握这34个知识点，助你快速入门TS

TypeScript现在几乎已经是所有前端程序员必备的技能了，现在的各大框架已经全部采用TS进行开发。本篇文章总结了TS中常用的知识点，希望能对你有所帮助。

2021-12-18 11:00:49 487

原创【不一样的CSS】一文掌握 Grid 布局(长篇警告)

写在前面对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏)Grid 布局(网格布局)是 CSS 最新的也是最强大的一种布局方案。文章概述由于篇幅较长(请谨慎阅读)，下图涵盖了本篇文

2021-12-17 21:35:05 341

原创【不一样的CSS】一文掌握 Flex 布局(长篇警告)

写在前面对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏)文章概述由于篇幅较长(请谨慎阅读)，下图涵盖了本篇文章的主要知识点正文开始弹性盒子模型是什么CSS3新增了弹性盒子模

2021-12-17 21:33:35 472

原创前端模块化详解（CommonJS、AMD、CMD、ES Module）

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~写在前面随着前端项目的不断复杂，代码日益膨胀，项目的维护难度随之越来越大，此时模块化也就相继的出现了，本篇文章将会介绍如下内容：模块化的概念以及演变过程模块化规范CommonJSAMDCMDES module模块化的概念以及演变过程什么是模块化模块化就是将一个复杂的程序依据一定的规则或者说是规范，将其封装成几个单独的块（这里的块指的就是文件），在使用的时候将其组合在一起。块内部的.

2021-12-16 14:28:53 2421

原创《轮子是怎么跑起来的》从0到1教你开发一款脚手架

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~写在前面现在市面上已经有这么多成熟的脚手架，我们还有必要开发一个脚手架呢？如果我们处在应用的角度，像vue-cil、create-react-app等这些脚手架已经够用了；但是我们在开发的过程中，需要对很多项目模板进行二开，但是往往这样的二开并不是一次；作为一个成熟的程序猿，如果进行大量的重复工作肯定是拒绝的，这个时候就需要自己开发一个脚手架自己用，也可以上传的Github开源给大家一起用。还有就是如果站在.

2021-12-16 08:22:42 131

原创【稳妥的TypeScript】命名空间

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~写在前面命名空间namespace在TypeScript1.5版本之前是叫做内部模块，那是因为ES6中的模块还没有称为正式标准，在ES6提出该规范时，TypeScript1.5 正事更名为命名空间，用namespace来定义。定义和使用定义命名空间的定义就相当于定义了一个对象，该对象中可以定义变量、接口、类、方法等等，但是如果不使用export关键字指定此内容为外部可见的话，外部是没有办法访问到的。.

2021-12-16 08:20:35 178

原创【稳妥的TypeScript】装饰器

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~写在前面装饰器Decorator 在ECMAScript中已经提案，但是目前还没有定案；在TypeScript中已经将其实现，但是这仍是一项正在试验中的特性，如果想要使用装饰器，需要在tsconfig.json中将experimentalDecorators属性，将其设置为true。概念定义装饰器是一种新的声明，它可以作用于类声明、方法、访问器、属性以及参数上。装饰器的使用采用@符号加一个函数.

2021-12-16 08:19:47 104

原创【稳妥的TypeScript】泛型

theme: fancyhighlight: atom-one-dark这是我参与11月更文挑战的第28天，活动详情查看：2021最后一次更文挑战大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~写在前面在JavaScript中，封装一个API可以具有多种用途，因为其实弱类型语言，但是就因为是弱类型可以最终得到的结果并不是我们想要的。TypeScript的出现正好中解决了这个问题，但是考虑到API的复用时，TypeScript又显得不是这么的灵活。.

2021-12-16 08:18:35 89

原创【稳妥的TypeScript】联合类型、交叉类型和类型保护

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~联合类型所谓的联合类型就是定义一些类型，定义的变量只需要满足任意一种类型即可，联合类型使用|定义，示例代码如下：// 通过 | 符号定义联合类型let value: number | boolean | string = '一碗周'value = 18在上面的代码中我们定义了一个value变量，该变量可以是number、boolean或者string类型。交叉类型介绍了联合类型，然后介绍一下与.

2021-12-16 08:16:49 137

原创【稳妥的TypeScript】类

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~概述类这个概念基本是所有面向对象编程语言都具有一个概念，例如Java、Python等；在JavaScript中ES6 之前是没有类这个概念的，对于熟悉面向对象来程序猿来说有些棘手，因为他们用的都是基于类的继承，对象也是通过类创建出来的。在ES6中添加了类这个概念，虽然只是一个语法糖，但是这就可以让程序员基于类去进行操作了。在TS中也是支持类这个概念的。定义一个简单的类在TS中也是使用class关键字来定义.

2021-12-16 08:15:55 60

空空如也

空空如也