从Snabbdom了解Diff算法

一、前言

闲着没事逛B站,发现了尚硅谷推出的关于Diff的课程,正好面试种也常问到,就学习了一下。这个课程主要围绕Snabbdom这个库,贴一下视频地址【Vue源码解析之虚拟DOM和diff算法】

这篇文章我会根据视频结合自己的理解对Diff过程进行讲解

关于代码还是建议看Snabbdomtypescript版本的源码,地址

首先要明确,Diff过程就是对新旧两个虚拟节点(VNode)进行比较,从而最小代价对DOM进行修补(patch)和更新

阅读全文

vue+render实现el-table多表头

一、前言

又好久没更新文章了。。补一篇,主要分享封装多表头表格render函数实现多表头表格

在公司维护低代码平台,有个需求需要通过拖拽配置一个多表头的表格(element的el-table),但是发现网上好像没什么资料,特别是平台是通过render函数实现的,对这个还不是很熟悉,摸索着写出来了,分享一下

阅读全文

VUE组件间通信方式总结

一、面试题

不用多说,参加过前端面试的小伙伴应该都遇到过,很经典的面试题。下面这些组件间的通信方式不但要会代码实现,还要知道每种方式的优缺点以及适用场景,学会灵活运用。

听别人说过一句话,原文忘记了,只记得大概是说:架构师在技术选型时不是选择最好最前沿的技术,而是选择项目最适合的方案。可能vuereact很好,但是有些项目可能更适合jsp,这是业务场景决定的。因此我们需要熟悉各个技术的特点,灵活的选用最合适的。

关于每一种通信方式的优缺点总结,是自己平时开发和工作中总结出来的,并没有参考其余博客,可能不是特别全面,大家做个参考,可以结合自己的经验进行思考,也欢迎大家提出自己的意见

阅读全文

优雅的使用svg图标

一、前言

很久没更新文章了,正好前两天有人问到svg图标的问题,于是便有了此文

为了节省大家的时间,不卖关子,本文主要讲述项目中如何更优雅的使用svg图标,经过配置后支持自动化导入图标,自动化压缩、剔除无关信息

使用方法:

  • 下载svg图标(iconfont或者来自UI的svg图标)
  • 复制到项目路径下
  • 通过svg名称调用

这篇文章主要参考

阅读全文

box-sizing详解

一、前言

实现一个很常规的功能, 鼠标停留出现3个像素的上边框,然而鼠标停留后出现了抖动,审查元素后发现是三个像素撑起了这个元素, 将其余元素向下挤, 才出现了这个抖动,一个比较常用的解决办法是先给元素一个3像素transparent背景的上边框,鼠标停留在将背景色改为其他颜色。这样就不会撑大元素

后来又想起来有个box-sizing, 好像也可以做到,于是尝试了一下确实可以,看了一下mdn文档中对于box-sizing的描述, 做一个记录1

阅读全文

聊聊圣杯布局和双飞翼布局

一、前言

圣杯布局和双飞翼布局这道面试题我看过很多次了,每一次都以为自己看明白了, 结果一段时间不看还是忘记了,可能是我经历的面试层次太低,没有考到吧。。再就是平时开发中一般没有这种优化要求,用的比较少,今天就再次好好看看并总结如下:

阅读全文

Canvas实现前端验证码

一、前言

canvas技术允许我们通过javascript脚本来绘制html页面,通过canvas我们可以绘制简单图形甚至开发简单游戏。本文主要讲述如何通过canvas技术实现前端验证码功能

源码在本文最后,需要的自取

思路:

通过观察验证码,发现验证码主要包括三部分,背景画布、验证码、干扰线和干扰点,只需要实现这三部分就可以完成这个功能

遇到比较棘手的问题,应该学会如何去拆解问题,将大问题变成一堆小问题,再将小问题拆解成更细小的问题,你就会发现问题迎刃而解

阅读全文

聊聊跨域这件事

一、引言

跨域这件事可能是个老生常谈的问题,不光是面试中会高频问道,实际开发中也会经常遇到。今天就来好好探讨一下这个 “万恶” 的跨域吧。

为什么我的万恶要加上引号呢,因为并不是完全是坏处,正所谓存在即合理,它的存在必然有它的用处。

阅读全文

VUE导出多页PDF截断问题

一、前言

使用的第三方:html2canvasjspdf

为了一劳永逸(更好的偷懒),做了一个简历修改的页面,将简历信息保存到数据库同时使用html2canvasjspdf导出PDF,但是在导出PDF时却发现文本内容在分页部分被直接截断,经过查阅资料没找到匹配的结果,于是就自己想办法解决吧。

阅读全文

正则表达式语法详解

一、前言

正则表达式很有魅力,熟练使用正则表达式会让开发更高效,更优雅,同时一些开发工具在搜索和替换时也支持正则表达式,如idea, vscode等等。

在你学会正则之前,你只能看着那些正则大师们,写了一串外星文似的字符串,替代了你用一大篇幅的if else代码来做一些数据校验

这篇文章主要参考知乎文章: 你是如何学会正则表达式的?b站:后盾人正则表达式系列课程,本文可以作为一种文档来查阅,里面基本每个知识点都有例子支撑,所以内容可能有点多

推荐两个网站,正则可视化Github很火的一个正则学习网站

阅读全文