三钻 - 之前端到全栈之路_三钻_CSDN博客-《前端进阶》,《数据结构与算法》,《经验之谈》领域博主

私信关注

三钻

码龄1年

—— 起步于PHP，一入前端深似海，最后爱上了前端。Vue、React使用者。专于Web、移动端开发。特别关注产品和UI设计。专心、专注、专研，与同学们一起终身学习。关注我的微信公众号《技术银河》有更多最新知识文章与同学们分享。

于 2020-03-07 加入CSDN

获得成就

前端领域优质创作者
博客专家认证
获得3,202次点赞
内容获得784次评论
获得14,915次收藏
GitHub 获得715Stars

荣誉勋章

兴趣领域

#前端

#CSS#WebPack#前端框架#ECMAScript 6#Node.js#Vue.js#JavaScript#React.js#面试#TypeScript

TA的专栏

关于他 ☝ 的一切～

我是三钻，专心、专注、专研，与行业中的同学们一起终生学习

起步于PHP，一入前端深似海，最后爱上了前端。Vue、React使用者。专于Web、移动端开发。特别关注产品和UI设计。

" 学习是为了成长，
成长是为了不退步。
坚持才能成功，
失败只是因为没有坚持。 "

GitHub｜个人博客｜微博

◎ 博客专家 -《郑晖》

欢迎过来《直播间》一起学习。

发布Blink于 2 月前

用 JavaScript 实现三次贝塞尔动画库 - 前端组件化

这期我们来完善上一期的动画库。在 Animation 类中的 constructor 的参数，我们发现其他的参数都用上了。但是 timingFunction 我们是还没有使用上的。这里我们就来一起处理这个问题。

用 JavaScript 实现时间轴与动画 - 前端组件化

我们一起来先实现一个动画库，一起来看一看我们应该如何去抽象这些开发组件所需要的底层能力。

Hexo 主题 Aurora 版本 1.0.0 今天发布了 🎉 Github: https://github.com/auroral-ui/hexo-theme-aurora 使用文档：https://aurora.tridiamond.tech/zh/ 第一版本含有以下功能，希望你们会喜欢！～ ⭐️ 博客功能 - 推荐区域 - 可以在文章的 meta 中添加 `feature` 属性，让头 3 篇文章指定到首页推荐位置。 - 实时多语言支持 - 可以实时切换博客内主要文字的语言。 - 数据统计 - 统计文字数、文章数、分类数和标签数。 - 文章阅读时长 - 每个文章都会显示文章的预估阅读时长。 - Mathjax 支持 - 支持在 markdown 中写 Maxjax 语法的数学公式。 - 单页面应用 - 页面与页面之间的跳转没有延迟或者等待，数据都是动态加载的。 - 评论插件 - 支持使用 Gitalk 或者 Valine 评论插件 - 文章搜索 - 可以搜索全站的所有文章 - 文章导航 - 可以在文章详情底部跳转到上一篇或者下一篇文章。 - 最新评论 - 给首页添加一个最新评论模块，支持使用 `gitalk` 或者 `valine`。 🎨 主题 - 深浅主题 - 深色与浅色主题支持. - 杂志布局 - 现代杂志 grid 布局。 - 渐变色彩 - 现代渐变色彩风格，为主题添加更多丰富的色彩。 🛠 配置 - 备案设置 - 这个功能专门给放在中国服务上的博客用户，可以在博客底部添加备案信息。 - 自定义菜单 - 可以自定义添加外部链接、内部链接、自定义页面。 - 自定义页 - 结合自定义菜单使用，可以加入自定义页面到导航之中。 - 页面子导航 - 可以给 `自定义页` 加入导航。

发布Blink于 3 月前

2020 年前端技术发展盘点

2020 年已经结束，这一年里面因为疫情，生活和工作中大家都有受到一定的影响。但是在 2020 年里面前端技术的发展依然没有停止脚步。而我们作为前端开发者，必定需要对技术的更新换代有所了解。虽然我们不需要去学习所有新出来的技术。但是时刻保持 “了解” 和 “理解” 这些技术是有必要的。了解这些新的技术和趋势，有效让我们成为更好的开发者，同时在我们日常工作中，这些知识有效帮助我们去解决工作中的技术问题，或者在一个问题中看到更多的解决办法和可能性。

发布Blink于 3 月前

使用 JSX 建立 Markup 组件风格 - 前端组件化

这里我们一起从 0 开始搭建一个组件系统。首先通过上一篇《前端组件化基础知识》中知道，一个组件可以通过 Markup 和 JavaScript 访问的一个环境。

用 JSX 实现 Carousel 轮播组件 - 前端组件化

在我们用 JSX 建立组件系统之前，我们先来用一个例子学习一下组件的实现原理和逻辑。这里我们就用一个轮播图的组件作为例子进行学习。轮播图的英文叫做 Carousel，它有一个旋转木马的意思。

用 JSX 建立组件 Parser（解析器）- 前端组件化

这里我们一起从 0 开始搭建一个组件系统。首先通过上一篇《前端组件化基础知识》中知道，一个组件可以通过 Markup 和 JavaScript 访问的一个环境。

前端组件化基础知识

这里我们一起来学习前端组件化的知识，而组件化在前端架构里面是最重要的一个部分。

2020 所思、所遇、所学、所悟

一个一线战场中的开发者，回归到学习的学堂中。一开始这个过程确实遇到了挺多困扰的。一开始无法静心下来学习，因为学习底层的知识确实需要静下心来学。但是坚持了一段时间后，又会发现自己会爱上学习，爱上深挖这些知识。

用 Range 实现 CSSOM 精准操作

这一部分的编程练习，我们来使用 `Range` 和 `CSSOM` 做一个综合练习。

用 Proxy 简单实现 Vue 3 的 Reactive

这里要给同学们分享的是 Proxy 与双向绑定，我们对大部分的 JavaScript 的这种基础库其实已经在其他文章中做过一些讲解了，或者是在我们编程的时候有所接触了。唯有这个 Proxy 我们之前是非常的回避的，因为在业务中也不太推荐大量的使用 Proxy。

KMP —— 字符串分析算法

`快速`的从一个`主串`中找出一个你想要的`子串` —— 这里面的`主串`就是 `source 串`，而要寻找的 `子串` 就是 `pattern 串` 也叫 `模式串`。

字典树 —— 字符串分析算法

这篇文章我们就来一起学习，剩下的几个字符串中比较细节的算法。

使用LL算法构建AST —— 编程训练

我们这里就来一起学一些边缘里面的稍微高级一点的字符串处理，就是使用 `LL 算法构建 AST`。

用 JavaScript 实现寻路算法 —— 编程训练

在我们的这个练习里面我们会制造一张 100 x 100 个格子的地图，并且在上面绘制我们的从起点到终点的路径。

用 JavaScript 实现一个 TicTacToe 游戏 —— 编程训练

这里我们给大家讲讲一个好玩的编程练习，很多同学想到编程练习就会觉得与算法有关。但是往往在编程的过程中，我们要实现某种逻辑或者是功能的时候，确实是需要用到算法。

《CSS flex 排版与动画 — 重学 CSS》—— 上一部分我们讲到了盒、盒模型和整个正常流中的所有重要知识点和问题。这一部分我们来了解一下 Flex 排版的详细知识。「今天这个特别的日子，我给这篇文章加入了 1024 节日彩蛋。认真阅读，认真学习你们会找到你们自己的一片彩虹哦！」https://tridiamond.blog.csdn.net/article/details/109256321

发布Blink于 7 月前

CSS flex 排版与动画 — 重学 CSS「1024 彩蛋」

上一部分我们讲到了`盒`、`盒模型`和整个`正常流`中的所有重要知识点和问题。这一部分我们来了解一下 Flex 排版的详细知识。

《CSS 排版与正常流 —— 重学CSS》——这一周我们重新回到《重学 CSS》系列，之前的文章中我们重新学习了《 CSS 选择器》和《 CSS 语法与规则》。接下来我们就一起来讲讲 CSS 里面的排版与正常流。在讲解 CSS 当中的排版正常流的时候，我们会按照属性的一些逻辑关系来分成几个部分来讲解与学习。https://tridiamond.blog.csdn.net/article/details/109020380

发布Blink于 8 月前

CSS 排版与正常流 —— 重学CSS

这一周我们重新回到《重学 CSS》系列，之前的文章中我们重新学习了《 CSS 选择器》和《 CSS 语法与规则》。接下来我们就一起来讲讲 CSS 里面的排版与正常流。在讲解 CSS 当中的排版正常流的时候，我们会按照属性的一些逻辑关系来分成几个部分来讲解与学习。

《JavaScript 对象 — 重学 JavaScript》— 这里我们继续学习两个比较重要的类型，就是 Object 和 Symbol。我们主要讲的是 Object，相对 Object 来说 Symbol 只是一个配角。https://tridiamond.blog.csdn.net/article/details/108967527

发布Blink于 8 月前

JavaScript 对象 — 重学 JavaScript

这里我们继续学习两个比较重要的类型，就是 `Object` 和 `Symbol`。我们主要讲的是 Object，相对 Object 来说 Symbol 只是一个配角。

《JavaScript 类型 — 重学 JavaScript》— JavaScript 中最小的结构，同学们已知的有什么呢？我想同学们都应该会想到一些东西，比如一些关键字，数字 123，或者 String 字符等等。这里我们从最小的单位，字面值和运行时类型开始讲起。https://tridiamond.blog.csdn.net/article/details/108917233

发布Blink于 8 月前

JavaScript 类型 — 重学 JavaScript

JavaScript 中最小的结构，同学们已知的有什么呢？我想同学们都应该会想到一些东西，比如一些关键字，数字 123，或者 String 字符等等。这里我们从最小的单位，字面值和运行时类型开始讲起。

JavaScript 语言通识 — 重学 JavaScript

在这个重学系列的课程中，都会假设大家对 JavaScript、CSS、HTML 有了一定的了解。而这个重学的过程其实是帮助我们在这些过去的知识里面建立一个新的秩序，也就是建立知识体系的过程。在重学 JavaScript 的过程将会带着大家以 JavaScript 的语法为线索，从细到粗的跟大家完整学习一遍 JavaScript 的语言知识。

CSS 选择器 — 重学CSS

在之前的《实战中学习浏览器工作原理》中我们已经对选择器有了一些全新视角的认知。这里我们站在 CSS 的角度一起学习选择器。

CSS语法与规则 — 重学CSS

进入重学 CSS 的第一步，首先需要找到一些线索。我们在前面的课程中讲学习方法的部分也讲过，要想建立知识体系骨架，我们需要一个完备性更权威，更全的线索。但是 CSS 现在标准的状态非常复杂，所以我们没有办法找到一份像 JavaScript 或者 HTML 中比较完备的现形标准，能把 CSS 的一切都浓缩在内。

实战中学习浏览器工作原理 — 排版与渲染

上一周我们完成了 CSS 的规则计算，其实就是计算了每个元素匹配中了那些 CSS 规则，并且把这些规则挂载到元素的 ComputedStyle 上面。这一周我们就要继续我们的浏览器开发之旅，然后我们的下一个目标就是根据浏览器的属性来进行排版（英文是 `Layout`，有时候也翻译成布局）。

《实战中学习浏览器工作原理 — HTML 解析与 CSS 计算》—— 上一篇文我们完成了从 HTTP 发送 Request，到接收到 Response，并且把 Response 中的文本都解析出来。这一篇文我们主要讲解如何做 HTML 解析和 CSS 计算这两个部分。https://tridiamond.blog.csdn.net/article/details/108179118

发布Blink于 9 月前

实战中学习浏览器工作原理 — HTML 解析与 CSS 计算

如何做 HTML 解析和 CSS 计算这两个部分

《实战中学习浏览器工作原理「一」》—— 浏览器工作原理是一块非常重要的内容，我们经常看到的重绘、重排或者一些讲解CSS属性的时候，都会用到一些浏览器工作原理的知识来讲解。理论化学习浏览器工作原理，效果不是很大，而且很枯燥，所以这里我们从零开始用 JavaScript 来实现一个浏览器。通过自己实现一遍简单的浏览器，我们会对浏览器的基本原理有更为深刻的理解。https://blog.csdn.net/TriDiamond6/article/details/108023150

发布Blink于 9 月前

实战中学习浏览器工作原理 — 之 HTTP 请求与解析

浏览器工作原理是一块非常重要的内容，我们经常看到的 `重绘` 、`重排` 或者一些讲解CSS属性的时候，都会用到一些浏览器工作原理的知识来讲解。理论化学习浏览器工作原理，效果不是很大，而且很枯燥，所以这里我们从零开始用 `JavaScript` 来实现一个浏览器。通过自己实现一遍简单的浏览器，我们会对浏览器的基本原理有更为深刻的理解。

太难了，我放弃抽王者级别称号了知足常乐。哈哈哈

发布Blink于 9 月前

一篇文章搞懂前端学习方法与构建知识体系

给大家讲讲怎么样才是一个优秀的前端工程师，怎么做自己的职业规划，如何学习和构建知识体系。

【FCC前端教程】44关学习CSS与CSS3基础「二」

我有一段时间没有更新FCC前端教程了，这一周就继续写完CSS与CSS3基础的教程。最近工作和生活都比较繁忙所以文章更新也受到了一定的影响。不过技术文章写作再忙也不会放弃的。我会继续努力坚持着一周一篇文章的进度，继续为大家带来我学习到的知识。让我们一起继续终身学习吧！

【数据结构与算法】力扣实战之移动零、盛最多的水、爬楼梯

练题法则5-10分钟读题与思考不要纠结没有思路就直接看题解；不要死磕觉得自己很失败，怎么我们就想不出来；基本上这些算法题，让我们自己想出来是不可能的；拿跳表的来说，如果我们能从0-1把它想出来，那我们就可以拿到图灵奖了；所以记住！无思路就直接看题解，无思路就直接看题解，无思路就直接看题解！我们只需要知道并且能运用即可！有思路自己开始写代码，没有，就马上看题解！默写背题，熟练做完题目后，我们需要记住这种题的思路和有N种解决办法；重复再**重复的默写，**直到自己有深刻.

【数据结构与算法】用动图解说数组、链表、跳表原理与实现

本期讲说最常见的数据结构类型分别有数组、链表、跳表。这一期我们一起来了解它们的原理与实现。

阿里、力扣、政采云的15位专家分享前端面试与招聘视角

发布Blink于 1 年前

阿里、力扣、政采云的15位专家分享前端面试与招聘视角

本次大会一共有15位来源于各大厂公司的高级前端工程师和技术专家，每个讲师都给我带来了精彩绝伦的知识与干货。这次大会的内容不只给我的技术生涯中带来了冲劲，让我认知到自己还有很多的不足与未知。同时也让我认知到了优秀的技术人才与团队的能力模型，讲师们有说到他们的经历和三观，引发了我对自己“保安式”的灵魂拷问。

学习任何一门知识的时候，我们需要分析清楚这门知识的核心是什么，从而在这个核心中我们可以得到什么。如果我们是盲目的吸收知识，其实很多知识我们都是在目前场景、工作、生活中无法使用的。也是因为学习之后无法运用，所以我们很快就会遗忘，或者是在学习的过程中很容易就会放弃。这篇笔记记录了算法的核心时间和空间复杂度，《数据结构与算法》都是围绕着这个核心开展的。它的存在也是为了解决我们在编程的过程中性能问题，同时也让我们有更高级的思维和思路，写出更优质的程序。 https://blog.csdn.net/TriDiamond6/article/details/106424061

发布Blink于 1 年前

【数据结构与算法】分析时间复杂度与空间复杂度

算法的核心`时间和空间复杂度`，《数据结构与算法》都是围绕着这个核心开展的。它的存在也是为了解决我们在编程的过程中性能问题，同时也让我们有更高级的思维和思路，写出更优质的程序。

【数据结构与算法】如何高效学习数据结构与算法

如果想成为一个高级开发工程师或者进入大厂，不论岗位是前端、后端还是AI，算法都是重中之重。也无论我们需要进入的公司的岗位是否最后是做算法工程师，前提面试就需要考算法。所以`小时不学算法，长大掉头发`。

【FCC前端教程】44关学习CSS与CSS3基础「一」

这周我们一起闯过了22关，下一期我们会一起把剩余的22关完成。学习是一种像爬山一样的过程，要经历过漫长的上坡路，一步一个脚印。“路漫漫其修远兮，吾将上下而求索。”，在追寻知识的道路上，前方的道路还很漫长，但我们将百折不挠，不遗余力地，上天下地的去追求和探索。让我们继续坚持学习，终身学习成长。在大前端的时代爬到技术的巅峰，做一个有深度的技术人员。

【FCC前端教程】28关学会HTML与HTML5基础

大家一起闯关进攻前端全方位知识点。没有闯过这些关卡的童鞋，无论前端能力如何，这个可以锻炼我们自己，也可以深入知道我们自己的前端水平和差距。想学习前端的童鞋可以从零开始学习，一起排除困难共同打开前端大门！

VSCode配置同步｜VSCode高级玩家宝典之第三篇

有了武功秘籍（快捷键）和高深的内功心法（插件），那VSCode是不是应该是无敌了呢？天灾难逃，人祸难免，我们电脑可能会坏或者电脑还可能要退休，甚至是我们有多台电脑的可能。那这个时候我们精心配置的VSCode不是要从头再来？所以这篇文章我来给大家介绍一个VSCode的插件专门来解决这个问题。读完这篇文章我们将学会如果一键同步所有VSCode中精心配置的插件，快捷键和配置。

“要想成功，就做自己能力圈内的事，投资那些你真正了解和理解的好事情，且把它们做到最好，同时要了解自己能力圈的明确边界。”

发布Blink于 1 年前

我也想表达一下对这个徽章的改动的一些意见，希望官方能看到，或多或少引发一点的深思。徽章的意义本来就一种荣誉，如果随便都可以拿到，就会失去了存在的意义，等同于本来一个软件是一定要100RMB才能买到的，最后在淘宝上随便1块钱就能买到一个CDKEY了。自然这个软件的价值就大幅度下降。珍惜这个软件的人也越来越少了。最后呢？用心做这个软件的人慢慢就放弃了，这个软件就停止更新了。徽章如果变得轻而易举就能得到，最后就没有人在乎这个徽章了，而徽章原本的作用也丧失了。包括我自己在内，每一篇文章都是用尽心思去写的。得到一个徽章也是我努力的成果之一。让我感到万般欣慰。所以还是希望官方对每一个极小的功能改变都深思熟虑，因为每一个小改变，都可能有千丝万缕的联动效应。就好像“福蝶效应”一样。当然最后我也理解有很多的同学都尽了全力写作，然后希望自己也能得到这些徽章。不过一个竞争的市场，必定有胜者与败者。只要规则和体系是公平竞争的。我输了没有关系，重要的是赢我的人是强者。所以我佩服，甚至激发了我的动力让我成长。