- 博客(52)
- 收藏
- 关注
RSS订阅
原创 2020 年前端技术发展盘点
2020 年已经结束，这一年里面因为疫情，生活和工作中大家都有受到一定的影响。但是在 2020 年里面前端技术的发展依然没有停止脚步。而我们作为前端开发者，必定需要对技术的更新换代有所了解。虽然我们不需要去学习所有新出来的技术。但是时刻保持 “了解” 和 “理解” 这些技术是有必要的。了解这些新的技术和趋势，有效让我们成为更好的开发者，同时在我们日常工作中，这些知识有效帮助我们去解决工作中的技术问题，或者在一个问题中看到更多的解决办法和可能性。
2021-03-30 09:13:30
13540
13
原创 2020 所思、所遇、所学、所悟
一个一线战场中的开发者，回归到学习的学堂中。一开始这个过程确实遇到了挺多困扰的。一开始无法静心下来学习，因为学习底层的知识确实需要静下心来学。但是坚持了一段时间后，又会发现自己会爱上学习，爱上深挖这些知识。
2020-12-24 14:18:05
3548
19
原创 用 JavaScript 实现手势库 — 手势动画应用【前端组件化】
前端《组件化系列》目录「一」用 JSX 建立组件 Parser（解析器）「二」使用 JSX 建立 Markup 组件风格「三」用 JSX 实现 Carousel 轮播组件「四」用 JavaScript 实现时间轴与动画「五」用 JavaScript 实现三次贝塞尔动画库 - 前端组件化「六」用 JavaScript 实现手势库 - 实现监听逻辑「七」用 JavaScript 实现手势库 — 手势逻辑「八」用 JavaScript 实现手势库 — 支持多键触发「九」用 JavaScrip.
2021-10-24 12:16:46
2231
2
原创 用 JavaScript 实现手势库 — 封装手势库【前端组件化】
经历了多次的迭代，我们的手势库功能都已经实现了。但是到了这里我们的代码确实需要重新整理和封装了。如果同学们还记得的，我们之间一开始获取的元素 `element` 是写死的。但是作为一个手势库，我们绑定的元素必然是由这个库的使用者而决定的。
2021-06-21 12:15:00
2598
19
原创 用 JavaScript 实现手势库 — 事件派发与 Flick 事件【前端组件化】
我们上一期已经实现了所有的 gesture（手势），接下来我们需要实现的就是事件派发的功能。
2021-05-21 17:47:55
3853
22
原创 用 JavaScript 实现手势库 — 支持多键触发【前端组件化】
上一期《实现手势库 — 手势逻辑》我们完成了手势库的所有手势逻辑，这一期我们继续来完善我们的手势库。我们来想想这个代码中的问题，我们的 handler、startX、startY、isPan、isPress、isTap 都放入全局作用域之中了，那么这些变量是放在全局当中是否是正确的呢？
2021-05-11 09:11:24
4038
37
原创 用 JavaScript 实现手势库 — 手势逻辑【前端组件化】
实现手势逻辑接下来我们就开始实现 gesture 的逻辑，首先我们回顾一下我们之前讲到的时间。首先我们会触发一个 start 事件，也就是当我们手指触摸到屏幕时第一个触发的事件。然后就会有三种情况：手指松开这个时候就会触发 end 事件，这样就构成一个 tap 点击的行为通过监听 end 事件来实现即可手指拖动超过 10 px这种就是 pan start 拖动的行为我们可以在 move 事件判断当前与上一个触点的距离手指停留在当前位置超过 0.5s这种就是 press.
2021-05-04 22:21:57
7866
44
原创 用 JavaScript 实现手势库 - 实现监听逻辑【前端组件化】
在之前的文章中我们一起实现了一个轮播图的基本效果，我们可以用鼠标去把它来回拖拽。效果上它已经是一个可以做到无尽轮播的轮播图功能了。但是我们会发现，我们鼠标在图片上任何的动作都会触发到拖拽，并且对图片进行位移的效果。这个其实并不是一个我们最佳实现效果。在使用鼠标场景下，因为我们鼠标是放在桌面上的，而且鼠标本身也是有一定的重量，所以当我们点击的时候，一般是不会出现任何鼠标的移动信号的。但是如果是在手机的触屏上，就算我们手再稳，都会出现一定的移位的，这个就是跟我们的手指和屏幕的接触面积、手指是柔软程度等导.
2021-04-25 20:39:41
5332
41
原创 用 JavaScript 实现三次贝塞尔动画库 - 前端组件化
这期我们来完善上一期的动画库。在 Animation 类中的 constructor 的参数，我们发现其他的参数都用上了。但是 timingFunction 我们是还没有使用上的。这里我们就来一起处理这个问题。
2021-04-12 13:48:15
4620
11
原创 用 JavaScript 实现时间轴与动画 - 前端组件化
我们一起来先实现一个动画库，一起来看一看我们应该如何去抽象这些开发组件所需要的底层能力。
2021-04-05 11:55:26
7709
13
原创 用 JSX 实现 Carousel 轮播组件 - 前端组件化
在我们用 JSX 建立组件系统之前，我们先来用一个例子学习一下组件的实现原理和逻辑。这里我们就用一个轮播图的组件作为例子进行学习。轮播图的英文叫做 Carousel，它有一个旋转木马的意思。
2021-02-05 16:31:40
1093
3
原创 使用 JSX 建立 Markup 组件风格 - 前端组件化
这里我们一起从 0 开始搭建一个组件系统。首先通过上一篇《前端组件化基础知识》中知道，一个组件可以通过 Markup 和 JavaScript 访问的一个环境。
2021-01-16 14:21:54
888
原创 用 JSX 建立组件 Parser（解析器）- 前端组件化
这里我们一起从 0 开始搭建一个组件系统。首先通过上一篇《前端组件化基础知识》中知道，一个组件可以通过 Markup 和 JavaScript 访问的一个环境。
2021-01-08 17:16:56
13968
17
原创 用 Proxy 简单实现 Vue 3 的 Reactive
这里要给同学们分享的是 Proxy 与双向绑定，我们对大部分的 JavaScript 的这种基础库其实已经在其他文章中做过一些讲解了，或者是在我们编程的时候有所接触了。唯有这个 Proxy 我们之前是非常的回避的，因为在业务中也不太推荐大量的使用 Proxy。
2020-12-09 16:51:48
7437
13
原创 KMP —— 字符串分析算法
`快速`的从一个`主串`中找出一个你想要的`子串` —— 这里面的`主串`就是 `source 串`，而要寻找的 `子串` 就是 `pattern 串` 也叫 `模式串`。
2020-11-30 07:34:01
8065
25
原创 用 JavaScript 实现寻路算法 —— 编程训练
在我们的这个练习里面我们会制造一张 100 x 100 个格子的地图，并且在上面绘制我们的从起点到终点的路径。
2020-11-04 17:27:54
4283
14
原创 用 JavaScript 实现一个 TicTacToe 游戏 —— 编程训练
这里我们给大家讲讲一个好玩的编程练习，很多同学想到编程练习就会觉得与算法有关。但是往往在编程的过程中，我们要实现某种逻辑或者是功能的时候，确实是需要用到算法。
2020-10-30 08:28:45
15508
44
原创 CSS flex 排版与动画 — 重学 CSS「1024 彩蛋」
上一部分我们讲到了`盒`、`盒模型`和整个`正常流`中的所有重要知识点和问题。这一部分我们来了解一下 Flex 排版的详细知识。
2020-10-24 11:12:15
4825
19
原创 CSS 排版与正常流 —— 重学CSS
这一周我们重新回到《重学 CSS》系列，之前的文章中我们重新学习了《 CSS 选择器》和《 CSS 语法与规则》。接下来我们就一起来讲讲 CSS 里面的排版与正常流。在讲解 CSS 当中的排版正常流的时候，我们会按照属性的一些逻辑关系来分成几个部分来讲解与学习。
2020-10-14 14:17:28
6750
17
原创 JavaScript 对象 — 重学 JavaScript
这里我们继续学习两个比较重要的类型，就是 `Object` 和 `Symbol`。我们主要讲的是 Object，相对 Object 来说 Symbol 只是一个配角。
2020-10-09 09:15:48
6190
23
原创 JavaScript 类型 — 重学 JavaScript
JavaScript 中最小的结构，同学们已知的有什么呢？我想同学们都应该会想到一些东西，比如一些关键字，数字 123，或者 String 字符等等。这里我们从最小的单位，字面值和运行时类型开始讲起。
2020-10-04 11:48:21
2862
3
原创 JavaScript 语言通识 — 重学 JavaScript
在这个重学系列的课程中，都会假设大家对 JavaScript、CSS、HTML 有了一定的了解。而这个重学的过程其实是帮助我们在这些过去的知识里面建立一个新的秩序，也就是建立知识体系的过程。在重学 JavaScript 的过程将会带着大家以 JavaScript 的语法为线索，从细到粗的跟大家完整学习一遍 JavaScript 的语言知识。
2020-09-27 13:59:40
4376
15
原创 CSS 选择器 — 重学CSS
在之前的 《实战中学习浏览器工作原理》中我们已经对选择器有了一些全新视角的认知。这里我们站在 CSS 的角度一起学习选择器。
2020-09-18 11:07:57
1910
2
原创 CSS语法与规则 — 重学CSS
进入重学 CSS 的第一步，首先需要找到一些线索。我们在前面的课程中讲学习方法的部分也讲过，要想建立知识体系骨架，我们需要一个完备性更权威，更全的线索。但是 CSS 现在标准的状态非常复杂，所以我们没有办法找到一份像 JavaScript 或者 HTML 中比较完备的现形标准，能把 CSS 的一切都浓缩在内。
2020-09-05 10:34:38
3526
1
原创 实战中学习浏览器工作原理 — 排版与渲染
上一周我们完成了 CSS 的规则计算，其实就是计算了每个元素匹配中了那些 CSS 规则，并且把这些规则挂载到元素的 ComputedStyle 上面。 这一周我们就要继续我们的浏览器开发之旅，然后我们的下一个目标就是根据浏览器的属性来进行排版（英文是 `Layout`，有时候也翻译成布局）。
2020-08-28 15:44:32
3384
6
原创 实战中学习浏览器工作原理 — 之 HTTP 请求与解析
浏览器工作原理是一块非常重要的内容，我们经常看到的 `重绘` 、`重排` 或者一些讲解CSS属性的时候，都会用到一些浏览器工作原理的知识来讲解。理论化学习浏览器工作原理，效果不是很大，而且很枯燥，所以这里我们从零开始用 `JavaScript` 来实现一个浏览器。通过自己实现一遍简单的浏览器，我们会对浏览器的基本原理有更为深刻的理解。
2020-08-15 18:49:36
8266
14
原创 【FCC前端教程】44关学习CSS与CSS3基础「二」
我有一段时间没有更新FCC前端教程了，这一周就继续写完CSS与CSS3基础的教程。最近工作和生活都比较繁忙所以文章更新也受到了一定的影响。不过技术文章写作再忙也不会放弃的。我会继续努力坚持着一周一篇文章的进度，继续为大家带来我学习到的知识。让我们一起继续终身学习吧！
2020-07-11 16:19:24
1549
3
原创 【数据结构与算法】力扣实战之移动零、盛最多的水、爬楼梯
练题法则5-10分钟读题与思考不要纠结没有思路就直接看题解；不要死磕觉得自己很失败，怎么我们就想不出来；基本上这些算法题，让我们自己想出来是不可能的；拿跳表的来说，如果我们能从0-1把它想出来，那我们就可以拿到图灵奖了；所以记住！无思路就直接看题解，无思路就直接看题解，无思路就直接看题解！我们只需要知道并且能运用即可！有思路自己开始写代码，没有，就马上看题解！默写背题，熟练做完题目后，我们需要记住这种题的思路和有N种解决办法；重复再**重复的默写，**直到自己有深刻.
2020-06-24 22:03:17
1822
4
原创 【数据结构与算法】用动图解说数组、链表、跳表原理与实现
本期讲说最常见的数据结构类型分别有数组、链表、跳表。这一期我们一起来了解它们的原理与实现。
2020-06-14 09:50:24
2335
12
原创 阿里、力扣、政采云的15位专家分享前端面试与招聘视角
本次大会一共有15位来源于各大厂公司的高级前端工程师和技术专家，每个讲师都给我带来了精彩绝伦的知识与干货。这次大会的内容不只给我的技术生涯中带来了冲劲，让我认知到自己还有很多的不足与未知。同时也让我认知到了优秀的技术人才与团队的能力模型，讲师们有说到他们的经历和三观，引发了我对自己“保安式”的灵魂拷问。
2020-06-04 07:48:56
4995
5
原创 【数据结构与算法】分析时间复杂度与空间复杂度
算法的核心`时间和空间复杂度`，《数据结构与算法》都是围绕着这个核心开展的。它的存在也是为了解决我们在编程的过程中性能问题，同时也让我们有更高级的思维和思路，写出更优质的程序。
2020-05-30 00:40:07
2055
2
原创 【数据结构与算法】如何高效学习数据结构与算法
如果想成为一个高级开发工程师或者进入大厂，不论岗位是前端、后端还是AI，算法都是重中之重。也无论我们需要进入的公司的岗位是否最后是做算法工程师，前提面试就需要考算法。所以`小时不学算法，长大掉头发`。
2020-05-23 23:30:44
11091
28
原创 【FCC前端教程】44关学习CSS与CSS3基础「一」
这周我们一起闯过了22关，下一期我们会一起把剩余的22关完成。学习是一种像爬山一样的过程，要经历过漫长的上坡路，一步一个脚印。“路漫漫其修远兮，吾将上下而求索。”， 在追寻知识的道路上，前方的道路还很漫长，但我们将百折不挠，不遗余力地，上天下地的去追求和探索。让我们继续坚持学习，终身学习成长。在大前端的时代爬到技术的巅峰，做一个有深度的技术人员。
2020-05-17 15:02:46
2672
1
原创 【FCC前端教程】28关学会HTML与HTML5基础
大家一起闯关进攻前端全方位知识点。没有闯过这些关卡的童鞋，无论前端能力如何，这个可以锻炼我们自己，也可以深入知道我们自己的前端水平和差距。想学习前端的童鞋可以从零开始学习，一起排除困难共同打开前端大门！
2020-05-09 17:21:19
17927
60
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人