《前端进阶》
文章平均质量分 97
这里包含的文章学习内容需要我们拥有 1-2 年前端开发经验后,选择让自己升级到高级前端工程师的学习内容(这里学习的内容是对应阿里 P6 级别的内容)。
三钻
—— 起步于PHP,一入前端深似海,最后爱上了前端。Vue、React使用者。专于Web、移动端开发。特别关注产品和UI设计。专心、专注、专研,与同学们一起终身学习。关注我的微信公众号《技术银河》有更多最新知识文章与同学们分享。
展开
-
用 JavaScript 实现手势库 — 手势动画应用【前端组件化】
前端《组件化系列》目录「一」用 JSX 建立组件 Parser(解析器)「二」使用 JSX 建立 Markup 组件风格「三」用 JSX 实现 Carousel 轮播组件「四」用 JavaScript 实现时间轴与动画「五」用 JavaScript 实现三次贝塞尔动画库 - 前端组件化「六」用 JavaScript 实现手势库 - 实现监听逻辑「七」用 JavaScript 实现手势库 — 手势逻辑「八」用 JavaScript 实现手势库 — 支持多键触发「九」用 JavaScrip.原创 2021-10-24 12:16:46 · 2359 阅读 · 2 评论 -
用 JavaScript 实现手势库 — 封装手势库【前端组件化】
经历了多次的迭代,我们的手势库功能都已经实现了。但是到了这里我们的代码确实需要重新整理和封装了。如果同学们还记得的,我们之间一开始获取的元素 `element` 是写死的。但是作为一个手势库,我们绑定的元素必然是由这个库的使用者而决定的。原创 2021-06-21 12:15:00 · 2674 阅读 · 19 评论 -
用 JavaScript 实现手势库 — 事件派发与 Flick 事件【前端组件化】
我们上一期已经实现了所有的 gesture(手势),接下来我们需要实现的就是事件派发的功能。原创 2021-05-21 17:47:55 · 3929 阅读 · 22 评论 -
用 JavaScript 实现手势库 — 支持多键触发【前端组件化】
上一期《实现手势库 — 手势逻辑》我们完成了手势库的所有手势逻辑,这一期我们继续来完善我们的手势库。我们来想想这个代码中的问题,我们的 handler、startX、startY、isPan、isPress、isTap 都放入全局作用域之中了,那么这些变量是放在全局当中是否是正确的呢?原创 2021-05-11 09:11:24 · 4104 阅读 · 37 评论 -
用 JavaScript 实现手势库 — 手势逻辑【前端组件化】
实现手势逻辑接下来我们就开始实现 gesture 的逻辑,首先我们回顾一下我们之前讲到的时间。首先我们会触发一个 start 事件,也就是当我们手指触摸到屏幕时第一个触发的事件。然后就会有三种情况:手指松开这个时候就会触发 end 事件,这样就构成一个 tap 点击的行为通过监听 end 事件来实现即可手指拖动超过 10 px这种就是 pan start 拖动的行为我们可以在 move 事件判断当前与上一个触点的距离手指停留在当前位置超过 0.5s这种就是 press.原创 2021-05-04 22:21:57 · 7978 阅读 · 44 评论 -
用 JavaScript 实现手势库 - 实现监听逻辑【前端组件化】
在之前的文章中我们一起实现了一个轮播图的基本效果,我们可以用鼠标去把它来回拖拽。效果上它已经是一个可以做到无尽轮播的轮播图功能了。但是我们会发现,我们鼠标在图片上任何的动作都会触发到拖拽,并且对图片进行位移的效果。这个其实并不是一个我们最佳实现效果。在使用鼠标场景下,因为我们鼠标是放在桌面上的,而且鼠标本身也是有一定的重量,所以当我们点击的时候,一般是不会出现任何鼠标的移动信号的。但是如果是在手机的触屏上,就算我们手再稳,都会出现一定的移位的,这个就是跟我们的手指和屏幕的接触面积、手指是柔软程度等导.原创 2021-04-25 20:39:41 · 5416 阅读 · 41 评论 -
用 JavaScript 实现三次贝塞尔动画库 - 前端组件化
这期我们来完善上一期的动画库。在 Animation 类中的 constructor 的参数,我们发现其他的参数都用上了。但是 timingFunction 我们是还没有使用上的。这里我们就来一起处理这个问题。原创 2021-04-12 13:48:15 · 4791 阅读 · 11 评论 -
用 JavaScript 实现时间轴与动画 - 前端组件化
我们一起来先实现一个动画库,一起来看一看我们应该如何去抽象这些开发组件所需要的底层能力。原创 2021-04-05 11:55:26 · 8002 阅读 · 13 评论 -
用 JSX 实现 Carousel 轮播组件 - 前端组件化
在我们用 JSX 建立组件系统之前,我们先来用一个例子学习一下组件的实现原理和逻辑。这里我们就用一个轮播图的组件作为例子进行学习。轮播图的英文叫做 Carousel,它有一个旋转木马的意思。原创 2021-02-05 16:31:40 · 1191 阅读 · 3 评论 -
使用 JSX 建立 Markup 组件风格 - 前端组件化
这里我们一起从 0 开始搭建一个组件系统。首先通过上一篇《前端组件化基础知识》中知道,一个组件可以通过 Markup 和 JavaScript 访问的一个环境。原创 2021-01-16 14:21:54 · 943 阅读 · 0 评论 -
用 JSX 建立组件 Parser(解析器)- 前端组件化
这里我们一起从 0 开始搭建一个组件系统。首先通过上一篇《前端组件化基础知识》中知道,一个组件可以通过 Markup 和 JavaScript 访问的一个环境。原创 2021-01-08 17:16:56 · 14047 阅读 · 17 评论 -
前端组件化基础知识
这里我们一起来学习前端组件化的知识,而组件化在前端架构里面是最重要的一个部分。原创 2020-12-31 22:45:17 · 8124 阅读 · 5 评论 -
用 Range 实现 CSSOM 精准操作
这一部分的编程练习,我们来使用 `Range` 和 `CSSOM` 做一个综合练习。原创 2020-12-17 17:04:24 · 610 阅读 · 1 评论 -
用 Proxy 简单实现 Vue 3 的 Reactive
这里要给同学们分享的是 Proxy 与双向绑定,我们对大部分的 JavaScript 的这种基础库其实已经在其他文章中做过一些讲解了,或者是在我们编程的时候有所接触了。唯有这个 Proxy 我们之前是非常的回避的,因为在业务中也不太推荐大量的使用 Proxy。原创 2020-12-09 16:51:48 · 7564 阅读 · 13 评论 -
KMP —— 字符串分析算法
`快速`的从一个`主串`中找出一个你想要的`子串` —— 这里面的`主串`就是 `source 串`,而要寻找的 `子串` 就是 `pattern 串` 也叫 `模式串`。原创 2020-11-30 07:34:01 · 8258 阅读 · 25 评论 -
字典树 —— 字符串分析算法
这篇文章我们就来一起学习,剩下的几个字符串中比较细节的算法。原创 2020-11-19 08:10:23 · 3349 阅读 · 7 评论 -
使用LL算法构建AST —— 编程训练
我们这里就来一起学一些边缘里面的稍微高级一点的字符串处理,就是使用 `LL 算法构建 AST`。原创 2020-11-12 17:48:57 · 1809 阅读 · 1 评论 -
用 JavaScript 实现寻路算法 —— 编程训练
在我们的这个练习里面我们会制造一张 100 x 100 个格子的地图,并且在上面绘制我们的从起点到终点的路径。原创 2020-11-04 17:27:54 · 4430 阅读 · 14 评论 -
用 JavaScript 实现一个 TicTacToe 游戏 —— 编程训练
这里我们给大家讲讲一个好玩的编程练习,很多同学想到编程练习就会觉得与算法有关。但是往往在编程的过程中,我们要实现某种逻辑或者是功能的时候,确实是需要用到算法。原创 2020-10-30 08:28:45 · 15605 阅读 · 44 评论 -
一篇文章搞懂前端学习方法与构建知识体系
给大家讲讲怎么样才是一个优秀的前端工程师,怎么做自己的职业规划,如何学习和构建知识体系。原创 2020-08-07 14:55:14 · 3627 阅读 · 6 评论 -
实战中学习浏览器工作原理 — 之 HTTP 请求与解析
浏览器工作原理是一块非常重要的内容,我们经常看到的 `重绘` 、`重排` 或者一些讲解CSS属性的时候,都会用到一些浏览器工作原理的知识来讲解。理论化学习浏览器工作原理,效果不是很大,而且很枯燥,所以这里我们从零开始用 `JavaScript` 来实现一个浏览器。通过自己实现一遍简单的浏览器,我们会对浏览器的基本原理有更为深刻的理解。原创 2020-08-15 18:49:36 · 8327 阅读 · 14 评论 -
实战中学习浏览器工作原理 — HTML 解析与 CSS 计算
如何做 HTML 解析 和 CSS 计算这两个部分原创 2020-08-23 08:48:06 · 1378 阅读 · 1 评论 -
实战中学习浏览器工作原理 — 排版与渲染
上一周我们完成了 CSS 的规则计算,其实就是计算了每个元素匹配中了那些 CSS 规则,并且把这些规则挂载到元素的 ComputedStyle 上面。 这一周我们就要继续我们的浏览器开发之旅,然后我们的下一个目标就是根据浏览器的属性来进行排版(英文是 `Layout`,有时候也翻译成布局)。原创 2020-08-28 15:44:32 · 3433 阅读 · 6 评论 -
CSS语法与规则 — 重学CSS
进入重学 CSS 的第一步,首先需要找到一些线索。我们在前面的课程中讲学习方法的部分也讲过,要想建立知识体系骨架,我们需要一个完备性更权威,更全的线索。但是 CSS 现在标准的状态非常复杂,所以我们没有办法找到一份像 JavaScript 或者 HTML 中比较完备的现形标准,能把 CSS 的一切都浓缩在内。原创 2020-09-05 10:34:38 · 3568 阅读 · 1 评论 -
CSS 选择器 — 重学CSS
在之前的 《实战中学习浏览器工作原理》中我们已经对选择器有了一些全新视角的认知。这里我们站在 CSS 的角度一起学习选择器。原创 2020-09-18 11:07:57 · 1982 阅读 · 2 评论 -
CSS 排版与正常流 —— 重学CSS
这一周我们重新回到《重学 CSS》系列,之前的文章中我们重新学习了《 CSS 选择器》和《 CSS 语法与规则》。接下来我们就一起来讲讲 CSS 里面的排版与正常流。在讲解 CSS 当中的排版正常流的时候,我们会按照属性的一些逻辑关系来分成几个部分来讲解与学习。原创 2020-10-14 14:17:28 · 6811 阅读 · 17 评论 -
CSS flex 排版与动画 — 重学 CSS「1024 彩蛋」
上一部分我们讲到了`盒`、`盒模型`和整个`正常流`中的所有重要知识点和问题。这一部分我们来了解一下 Flex 排版的详细知识。原创 2020-10-24 11:12:15 · 4910 阅读 · 19 评论 -
JavaScript 语言通识 — 重学 JavaScript
在这个重学系列的课程中,都会假设大家对 JavaScript、CSS、HTML 有了一定的了解。而这个重学的过程其实是帮助我们在这些过去的知识里面建立一个新的秩序,也就是建立知识体系的过程。在重学 JavaScript 的过程将会带着大家以 JavaScript 的语法为线索,从细到粗的跟大家完整学习一遍 JavaScript 的语言知识。原创 2020-09-27 13:59:40 · 4421 阅读 · 15 评论 -
JavaScript 类型 — 重学 JavaScript
JavaScript 中最小的结构,同学们已知的有什么呢?我想同学们都应该会想到一些东西,比如一些关键字,数字 123,或者 String 字符等等。这里我们从最小的单位,字面值和运行时类型开始讲起。原创 2020-10-04 11:48:21 · 2904 阅读 · 3 评论 -
JavaScript 对象 — 重学 JavaScript
这里我们继续学习两个比较重要的类型,就是 `Object` 和 `Symbol`。我们主要讲的是 Object,相对 Object 来说 Symbol 只是一个配角。原创 2020-10-09 09:15:48 · 6223 阅读 · 23 评论