前端进阶

前端进阶

前端进阶

以实战为线索，深入浅出前端多维度的知识点。内含有多方面的前端知识文章，带领各位前端的同学更系统化的学习前端。

等 7 人订阅共29篇文章创建于2021-05-10

1年前

用 JavaScript 实现手势库 — 封装手势库【前端组件化】

经历了多次的迭代，我们的手势库功能都已经实现了。但是到了这里我们的代码确实需要重新整理和封装了。如果同学们还记得的，我们之间一开始获取的元素 `element` 是写死的。

1127
16
2

用 JavaScript 实现手势库 — 封装手势库【前端组件化】

2年前

用 JavaScript 实现手势库 — 事件派发与 Flick 事件【前端组件化】

我们上一期已经实现了所有的 gesture（手势），接下来我们需要实现的就是事件派发的功能。在 DOM 里面事件的派发是使用 new Event ，然后在上面加一些属性，最后把这个事件给派发出去的。

1650
23
1

用 JavaScript 实现手势库 — 事件派发与 Flick 事件【前端组件化】

2年前

用 JavaScript 实现手势库 — 支持多键触发【前端组件化】

上一期《实现手势库 — 手势逻辑》我们完成了手势库的所有手势逻辑，这一期我们继续来完善我们的手势库。

1818
15
2

用 JavaScript 实现手势库 — 支持多键触发【前端组件化】

2年前

用 JavaScript 实现手势库 — 手势逻辑【前端组件化】

上一期《实现监听逻辑》中我们一起实现了基础的手势监听逻辑。有了这些手势的监听后，我们就可以开始实现每一个手势的逻辑。最终我们可以把这些手势应用到我们的《轮播图组件》当中。

1796
11
3

用 JavaScript 实现手势库 — 手势逻辑【前端组件化】

2年前

用 JavaScript 实现手势库之第一篇 — 前端组件化

在之前的文章中我们一起实现了一个轮播图的基本效果，我们可以用鼠标去把它来回拖拽。效果上它已经是一个可以做到无尽轮播的轮播图功能了。但是我们会发现，我们鼠标在图片上任何的动作都会触发到拖拽，并且对图片

1353
12
评论

用 JavaScript 实现手势库之第一篇 — 前端组件化

2年前

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

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

502
4
评论

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

2年前

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

上一篇文章《用 JSX 实现 Carousel 轮播组件》中，我们实现了一个 “基础” 的轮播组件。为什么我们叫它 “基础” 呢？因为其实它看起来已经可以满足我们轮播组件的功能，但是其实它还有很多缺陷我们是没有去完善的。虽然我们已经在里面实现了两个功能，一是可以自动轮播，二是…

6438
99
10

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

2年前

用 JSX 实现 Carousel 轮播组件

在我们用 JSX 建立组件系统之前，我们先来用一个例子学习一下组件的实现原理和逻辑。这里我们就用一个轮播图的组件作为例子进行学习。轮播图的英文叫做 Carousel，它有一个旋转木马的意思。上一篇文章《使用 JSX 建立 Markup 组件风格》中我们实现的代码，其实还不能称…

1174
18
2

用 JSX 实现 Carousel 轮播组件

2年前

使用 JSX 建立 Markup 组件风格

这里我们一起从 0 开始搭建一个组件系统。首先通过上一篇《前端组件化基础知识》和《用 JSX 建立组件 Parser（解析器）》中知道，一个组件可以通过 Markup 和 JavaScript 访问的一个环境。所以我们的第一步就是建立一个可以使用 markup 的环境。这里我…

1048
16
2

使用 JSX 建立 Markup 组件风格

2年前

用 JSX 建立组件 Parser（解析器）

这里我们一起从 0 开始搭建一个组件系统。首先通过上一篇《前端组件化基础知识》中知道，一个组件可以通过 Markup 和 JavaScript 访问的一个环境。所以我们的第一步就是建立一个可以使用 markup 的环境。这里我们会学习使用两种建立 markup 的风格。第一…

616
15
1

用 JSX 建立组件 Parser（解析器）

2年前

前端组件化基础知识

同学们好，我是来自《技术银河》的三钻。这里我们一起来学习前端组件化的知识，而组件化在前端架构里面是最重要的一个部分。讲到前端架构，其实前端架构中最热门的就有两个话题，一个就是组件化，另一个就是架构模式。组件化的概念是从开始研究如何扩展 HTML 标签开始的，最后延伸出来…

1393
31
3

2年前

用 Range 实现 CSSOM 精准操作

同学们好，我是三钻。这一部分的编程练习，我们来使用 Range 和 CSSOM 做一个综合练习。这里我们一起来尝试实现一个简单的拖拽功能。我们一般的拖拽就是把一个在浏览器上的盒子捡起来，然后用鼠标可以拖动这个盒子到任意的位置。那么我们今天要做的拖拽跟这个稍微有一点不一样。…

1635
35
4

用 Range 实现 CSSOM 精准操作

2年前

用 Proxy 简单实现 Vue 3 的 Reactive

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

846
22
5

用 Proxy 简单实现 Vue 3 的 Reactive

2年前

KMP —— 字符串分析算法

同学们好，我是来自《技术银河》的 💎 三钻。大家可能觉得 KMP 这个算法的名字很特别、很怪，因为 KMP 它并不是三个英文单词的开头，而是三个计算机科学家的名字。发明这个算法的三位计算机科学家分别为：Knuth、Morris、Pratt。第一个是大家都非常熟悉的 Do…

510
13
1

2年前

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

这里我们继续来编程训练，在《前端进阶》这个系列里面我们已经讲过一些字符串的算法了。然后这篇文章我们就来一起学习，剩下的几个字符串中比较细节的算法。在开始之前我们先来看看字符串算法的一个整体目录。这里我们从简单到难的算法来排列，大概就分成这样一个顺序：它跟字典树最大的区别就是…

497
11
评论

2年前

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

同学们好，我是来自《技术银河》的 💎 三钻。在之前的《前端进阶》系列的学习笔记中已经讲到过不少跟字符串处理相关的内容。但是我们的主要学习的都是如何进行对字符串做一些初步的分析。我们这里就来一起学一些边缘里面的稍微高级一点的字符串处理，就是使用 LL 算法构建 AST。…

407
6
评论

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

2年前

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

同学们好，我是来自《技术银河》的 💎 三钻。在我们的这个练习里面我们会制造一张 100 x 100 个格子的地图，并且在上面绘制我们的从起点到终点的路径。在这么大规模的寻路问题当中，我们首选需要做一个地图编辑器。它的功能如下：首先我们需要绘制我们地图的底盘，在绘制之…

2117
19
6

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

2年前

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

同学们好，我是来自《技术银河》的 💎 三钻。这里我们给大家讲讲一个好玩的编程练习，很多同学想到编程练习就会觉得与算法有关。但是往往在编程的过程中，我们要实现某种逻辑或者是功能的时候，确实是需要用到算法。但是我觉得 Winter 老师说的也挺对的。 TicTacToe 是…

2337
25
18

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

2年前

CSS flex 排版与动画 — 重学 CSS

同学们好，我是来自《技术银河》的 💎 三钻。上一部分我们讲到了盒、盒模型和整个正常流中的所有重要知识点和问题。这一部分我们来了解一下 Flex 排版的详细知识。在之前的《实现中学习浏览器原理》篇章中，其实已经有了比较详细的接触到 Flex 排版的知识。这里我们基本上是…

2272
28
3

CSS flex 排版与动画 — 重学 CSS

2年前

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

同学们好，我是来自《技术银河》的 💎 三钻。这一周我们重新回到《重学 CSS》系列，之前的文章中我们重新学习了《 CSS 选择器》和《 CSS 语法与规则》。接下来我们就一起来讲讲 CSS 里面的排版与正常流。在讲解 CSS 当中的排版正常流的时候，我们会按照属性…

677
11
评论

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