Lv.3
街角小林
更多个人资料
193
成长值
0
关注
3
粉丝
+ 关注
私信
个人介绍
一个普通的前端开发。
感兴趣或擅长的领域
编程语言
个人勋章
TA还没获得勋章~
成长雷达
170
3
0
0
20
个人资料
个人介绍
一个普通的前端开发。
感兴趣或擅长的领域
编程语言
达成规则
以上满足
项可达成此勋章
博客
关注
粉丝
论坛
全部时间
全部时间
最近三天
最近一周
最近一月
全部
暂无专栏分类
我让虚拟DOM的diff算法过程动起来了
去年写了一篇文章手写一个虚拟DOM库,彻底让你理解diff算法介绍虚拟DOM的patch过程和diff算法过程,当时使用的是双端diff算法,今年看到了Vue3使用的已经是快速diff算法,所以也想写一篇来记录一下,但是肯定已经有人写过了,所以就在想能不能有点不一样的,上次的文章主要是通过画图来一步步展示diff算法的每一种情况和过程,所以就在想能不能改成动画的形式,于是就有了这篇文章。当然...
JavaScript
Vue
前端
街角小林
2022-10-30 20:19:05
556
0
0
2022-10-30 20:19:05
556
0
0
快速搭建一个代码在线编辑预览工具(下)
支持预处理器除了基本的html、js和css,作为一个强大的工具,我们有必要支持一下常用的预处理器,比如html的pug,js的TypeScript及css的less等,实现思路相当简单,加载对应预处理器的转换器,然后转换一下即可。 动态切换编辑器语言Monaco Editor想要动态修改语言的话我们需要换一种方式来设置文档,上文我们是创建编辑器的同时直接把语言通过language选项传递...
JavaScript
Vue
前端
街角小林
2022-10-28 21:46:08
549
0
0
2022-10-28 21:46:08
549
0
0
快速搭建一个代码在线编辑预览工具(上)
简介大家好,我是一个闲着没事热衷于重复造轮子的不知名前端,今天给大家带来的是一个代码在线编辑预览工具的实现介绍,目前这类工具使用很广泛,常见于各种文档网站及代码分享场景,相关工具也比较多,如codepen、jsrun、codesandbox、jsbin、plnkr、jsfiddle等,这些工具大体分两类,一类可以自由添加多个文件,比较像我们平常使用的编辑器,另一类固定只能单独编辑html、...
JavaScript
Vue
前端
街角小林
2022-10-28 21:45:35
814
0
0
2022-10-28 21:45:35
814
0
0
用console画条龙?
相识console一定是各位前端er最熟悉的小伙伴了,无论是console控制台,还是console对象,做前端做久了,打开一个网页总是莫名自然的顺手打开控制台,有些调皮的网站还会故意在控制台输出一些有意思的东西,比如招聘信息,像百度的:其他的不说,真的每年都更新,看着还挺让人热血沸腾。另外输出一些花里胡哨的字符图形也是很常见的,比如天猫的:也有一些网站可能不喜欢被人调试,只要打开控制台就...
JavaScript
前端
街角小林
2022-10-28 21:43:51
891
0
0
2022-10-28 21:43:51
891
0
0
前端下载图片的N种方法
前几天一个简单的下载图片的需求折腾了我后端大佬好几天,最终还是需要前端来搞,开始说不行的笔者最后又行了,所以趁着这个机会来总结一下下载图片到底有多少种方法。 先起个服务使用expressjs起个简单的后端服务,先安装:mkdir democd demonpm initnpm install express --save// v4.17.1然后创建一个app.js文件,输入:const exp...
JavaScript
前端
街角小林
2022-10-28 21:42:59
782
0
0
2022-10-28 21:42:59
782
0
0
flex大法:一网打尽所有常见布局
flex全称Flexible Box模型,顾名思义就是灵活的盒子,不过一般都叫弹性盒子,所有PC端及手机端现代浏览器都支持,所以不用担心它的兼容性,有了这玩意,妈妈再也不用担心我们的布局。先简单介绍一下,要使用flex布局,需要先给一个容器元素设置display:flex让它变成flex容器,然后其所有的直接子元素就变成flex子元素了,在flex里存在两根轴,叫主轴和交叉轴,互相垂直,主轴...
CSS
街角小林
2022-10-28 21:42:20
3052
0
0
2022-10-28 21:42:20
999+
0
0
手写一个虚拟DOM库,彻底让你理解diff算法
所谓虚拟DOM就是用js对象来描述真实DOM,它相对于原生DOM更加轻量,因为真正的DOM对象附带有非常多的属性,另外配合虚拟DOM的diff算法,能以最少的操作来更新DOM,除此之外,也能让Vue和React之类的框架支持除浏览器之外的其他平台,本文会参考知名的snabbdom库来手写一个简易版的,配合图片示例一步步完成代码,一定让你彻底理解虚拟DOM的patch及diff算法。 创建虚拟...
JavaScript
Vue
前端
街角小林
2022-10-28 21:41:53
1386
0
0
2022-10-28 21:41:53
999+
0
0
Web思维导图实现的技术点分析(下)
命令前面的代码已经涉及到几个命令了,我们把会修改节点状态的操作通过命令来调用,每调用一个命令就会保存一份当前的节点数据副本,用来回退和前进。命令类似于发布订阅者,先注册命令,然后再触发命令的执行:class Command { constructor() { // 保存命令 this.commands = {} // 保存历史副本 this.history = [...
Canvas
JavaScript
SVG
前端
街角小林
2022-10-28 21:41:09
1606
0
0
2022-10-28 21:41:09
999+
0
0
Web思维导图实现的技术点分析(上)
简介思维导图是一种常见的表达发散性思维的有效工具,市面上有非常多的工具可以用来画思维导图,有免费的也有收费的,此外也有一些可以用来帮助快速实现的JavaScript类库,如:jsMind、KityMinder。本文会完整的介绍如何从头实现一个简易的思维导图,最终成果预览:https://wanglin2.github.io/mind-map/。 技术选型这种图形类的绘制一般有两种选择:sv...
JavaScript
前端
街角小林
2022-10-28 21:40:36
709
0
0
2022-10-28 21:40:36
709
0
0
js烧脑面试题大赏
本文精选了20多道具有一定迷惑性的js题,主要考察的是类型判断、作用域、this指向、原型、事件循环等知识点,每道题都配有笔者详细傻瓜式的解析,偏向于初学者,大佬请随意。 第1题let a = 1function b(a) { a = 2 console.log(a)}b(a)console.log(a) <summary>点击查看答案</summary> 2、1 <summary...
JavaScript
前端
街角小林
2022-10-28 21:38:54
814
0
0
2022-10-28 21:38:54
814
0
0
总条数:76
10
10
20
50
100
1
2
3
4
5
6
7
8
上滑加载中
https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=0&rsv_idx=1&tn=baidu&wd=sed%20%E6%9B%BF%E6%8D%A2%E5%AD%97%E7%AC%A6%E4%B8%B2&rsv_pq=c7db61a600035dc5&rsv_t=5e19yEsbV9N5fIvdlGRU
+ 关注
私信