首页
首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
前端进阶
三钻
创建于2021-05-10
订阅专栏
以实战为线索,深入浅出前端多维度的知识点。内含有多方面的前端知识文章,带领各位前端的同学更系统化的学习前端。
等 9 人订阅
共29篇文章
创建于2021-05-10
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
用 JavaScript 实现手势库 — 封装手势库【前端组件化】
经历了多次的迭代,我们的手势库功能都已经实现了。但是到了这里我们的代码确实需要重新整理和封装了。如果同学们还记得的,我们之间一开始获取的元素 `element` 是写死的。
用 JavaScript 实现手势库 — 事件派发与 Flick 事件【前端组件化】
我们上一期已经实现了所有的 gesture(手势),接下来我们需要实现的就是事件派发的功能。在 DOM 里面事件的派发是使用 new Event , 然后在上面加一些属性,最后把这个事件给派发出去的。
用 JavaScript 实现手势库 — 支持多键触发【前端组件化】
上一期《实现手势库 — 手势逻辑》我们完成了手势库的所有手势逻辑,这一期我们继续来完善我们的手势库。
用 JavaScript 实现手势库 — 手势逻辑【前端组件化】
上一期《实现监听逻辑》中我们一起实现了基础的手势监听逻辑。有了这些手势的监听后,我们就可以开始实现每一个手势的逻辑。最终我们可以把这些手势应用到我们的《轮播图组件》当中。
用 JavaScript 实现手势库之第一篇 — 前端组件化
在之前的文章中我们一起实现了一个轮播图的基本效果,我们可以用鼠标去把它来回拖拽。效果上它已经是一个可以做到无尽轮播的轮播图功能了。 但是我们会发现,我们鼠标在图片上任何的动作都会触发到拖拽,并且对图片
用 JavaScript 实现三次贝塞尔动画库 - 前端组件化
这期我们来完善上一期的动画库。在 Animation 类中的 constructor 的参数,我们发现其他的参数都用上了。但是 timingFunction 我们是还没有使用上的。
用 JavaScript 实现时间轴与动画 - 前端组件化
上一篇文章《用 JSX 实现 Carousel 轮播组件》中,我们实现了一个 “基础” 的轮播组件。为什么我们叫它 “基础” 呢?因为其实它看起来已经可以满足我们轮播组件的功能,但是其实它还有很多缺陷我们是没有去完善的。 虽然我们已经在里面实现了两个功能,一是可以自动轮播,二是…
用 JSX 实现 Carousel 轮播组件
在我们用 JSX 建立组件系统之前,我们先来用一个例子学习一下组件的实现原理和逻辑。这里我们就用一个轮播图的组件作为例子进行学习。轮播图的英文叫做 Carousel,它有一个旋转木马的意思。 上一篇文章《使用 JSX 建立 Markup 组件风格》中我们实现的代码,其实还不能称…
使用 JSX 建立 Markup 组件风格
这里我们一起从 0 开始搭建一个组件系统。首先通过上一篇《前端组件化基础知识》和《用 JSX 建立组件 Parser(解析器)》中知道,一个组件可以通过 Markup 和 JavaScript 访问的一个环境。 所以我们的第一步就是建立一个可以使用 markup 的环境。这里我…
用 JSX 建立组件 Parser(解析器)
这里我们一起从 0 开始搭建一个组件系统。首先通过上一篇《前端组件化基础知识》中知道,一个组件可以通过 Markup 和 JavaScript 访问的一个环境。 所以我们的第一步就是建立一个可以使用 markup 的环境。这里我们会学习使用两种建立 markup 的风格。 第一…
前端组件化基础知识
同学们好,我是来自《技术银河》 的 三钻。 这里我们一起来学习前端组件化的知识,而组件化在前端架构里面是最重要的一个部分。 讲到前端架构,其实前端架构中最热门的就有两个话题,一个就是组件化,另一个就是架构模式。组件化的概念是从开始研究如何扩展 HTML 标签开始的,最后延伸出来…
用 Range 实现 CSSOM 精准操作
同学们好,我是三钻。 这一部分的编程练习,我们来使用 Range 和 CSSOM 做一个综合练习。 这里我们一起来尝试实现一个简单的拖拽功能。我们一般的拖拽就是把一个在浏览器上的盒子捡起来,然后用鼠标可以拖动这个盒子到任意的位置。 那么我们今天要做的拖拽跟这个稍微有一点不一样。…
用 Proxy 简单实现 Vue 3 的 Reactive
这里要给同学们分享的是 Proxy 与双向绑定,我们对大部分的 JavaScript 的这种基础库其实已经在其他文章中做过一些讲解了,或者是在我们编程的时候有所接触了。唯有这个 Proxy 我们之前是非常的回避的,因为在业务中也不太推荐大量的使用 Proxy。 Proxy 的设…
KMP —— 字符串分析算法
同学们好,我是来自 《技术银河》的 💎 三钻 。 大家可能觉得 KMP 这个算法的名字很特别、很怪,因为 KMP 它并不是三个英文单词的开头,而是三个计算机科学家的名字。发明这个算法的三位计算机科学家分别为:Knuth、Morris、Pratt。第一个是大家都非常熟悉的 Do…
字典树 —— 字符串分析算法
这里我们继续来编程训练,在《前端进阶》这个系列里面我们已经讲过一些字符串的算法了。然后这篇文章我们就来一起学习,剩下的几个字符串中比较细节的算法。 在开始之前我们先来看看字符串算法的一个整体目录。这里我们从简单到难的算法来排列,大概就分成这样一个顺序: 它跟字典树最大的区别就是…
使用LL算法构建AST —— 编程训练
同学们好,我是来自 《技术银河》的 💎 三钻 。 在之前的 《前端进阶》系列的学习笔记中已经讲到过不少跟字符串处理相关的内容。但是我们的主要学习的都是如何进行对字符串做一些初步的分析。我们这里就来一起学一些边缘里面的稍微高级一点的字符串处理,就是使用 LL 算法构建 AST。…
用 JavaScript 实现寻路算法 —— 编程训练
同学们好,我是来自 《技术银河》的 💎 三钻 。 在我们的这个练习里面我们会制造一张 100 x 100 个格子的地图,并且在上面绘制我们的从起点到终点的路径。 在这么大规模的寻路问题当中,我们首选需要做一个地图编辑器。它的功能如下: 首先我们需要绘制我们地图的底盘,在绘制之…
用 JavaScript 实现一个 TicTacToe 游戏 —— 编程训练
同学们好,我是来自 《技术银河》的 💎 三钻 。 这里我们给大家讲讲一个好玩的编程练习,很多同学想到编程练习就会觉得与算法有关。但是往往在编程的过程中,我们要实现某种逻辑或者是功能的时候,确实是需要用到算法。但是我觉得 Winter 老师说的也挺对的。 TicTacToe 是…
CSS flex 排版与动画 — 重学 CSS
同学们好,我是来自 《技术银河》的 💎 三钻 。 上一部分我们讲到了盒、盒模型和整个正常流中的所有重要知识点和问题。这一部分我们来了解一下 Flex 排版的详细知识。 在之前的《实现中学习浏览器原理》篇章中,其实已经有了比较详细的接触到 Flex 排版的知识。这里我们基本上是…
CSS 排版与正常流 —— 重学CSS
同学们好,我是来自 《技术银河》的 💎 三钻 。 这一周我们重新回到《重学 CSS》系列,之前的文章中我们重新学习了《 CSS 选择器 》和《 CSS 语法与规则 》。接下来我们就一起来讲讲 CSS 里面的排版与正常流。 在讲解 CSS 当中的排版正常流的时候,我们会按照属性…
下一页