在项目中碰到一个数据可视化的业务，ui画了一些不规则的缺角矩形作为背景，但是又没有提供切图，本着求人不如求己的原则，就尝试拿CSS来画这种缺角的矩形及边框吧。

在ES6中引入了很多新的语法，三个点...的语法就是其中之一。该语法有两个用处，一个是作为展开运算符，还可以作为rest参数。其作为剩余参数的方法用法比较简单，也不是本文的关注内容，所以下边说一下关于展开运算符的一些操作以及引出迭代器与生成器。

项目中遇到了一个需求是前台上传原图与对比图，后台进行对比分析，返回一个带有标注的识别结果，然后前台要实现原图与识别结果的卷帘对比效果。

我也不知道这个应该叫什么，感觉像个卷帘门一样，就姑且叫它卷帘效果了。

在学习arcgis的js api时，发现arcgis是有提供这种效果的小部件的，当然这次项目并没有使用arcgis，所以没法使用这个效果。后台问我这种效果好实现不，去找找插件试一下。回想到之前做过图片的截取效果，想着这个也可以用类似的方法实现的吧，所以就用同样的思想实现了这个效果，可能走了弯路，见谅哦。

vue3稳定版发布了很久了，很多人也已经开始将vue3应用于生产环境，后续准备开几篇博客写一下自己学习vue3的一些记录，内容比较多比较杂就不好说什么时候开始写了，这篇就简单记录一些vue3使用中发现的一些与vue2的不同吧。

作为一个卑微的切图仔，肯定要100%还原UI老师给的设计图纸，然而UI老师为了优美的界面，在各个位置恰到好处的使用的不同的字体。

这种情况在实际的开发中应该是很长见的。但是我们本地没有这个字体怎么办呢？用户本地也没有这个字体怎么办呢？

出现这个问题肯定不是用户的问题，那只能是我们解决这个问题。

最近项目有个需求，比较简单，就是顶部有tab栏，点击tab栏页面滚动到对应位置，手动的滚动页面tab栏也要随之切换。项目是基于vue2+ant design vue开发的，本来是想借用组件库来方便实现的，但是ui确实相差甚远，而且想着也是个简单功能，就放弃了使用组件库，转而用js来实现这个逻辑。

实现过程中，发现这虽然只是个简单的知识点，但确实也有一些要注意的地方。

新公司入职的第二天，接到了一个任务是封装一个cron表达式生成器的组件，一开始人都是懵的，什么是cron表达式？

项目是vue+antd开发的，所以肯定是基于此对antd的组件二次封装，做一个表达式生成器出来，好在成功在网上找到了前辈们做过的案例，也算是轻松了许多。面向百度编程无疑了。

Vue是前端从业人员绕不开的一个框架，随着学习的深入不免要通过观看Vue的源码深入学习，但是直接看Vue的源码并不是一件简单的事情，我们不如把Vue的各部分内容拆开来一点一点学习，由浅入深。

Vue的模板是一个很方便很受人喜欢的功能，mustache是一个比较老牌的模板引擎，跟Vue有很多相似之处，所以不妨先从mustache学起。

相信前端的小伙伴都或多或少的了解过EventLoop这个概念，但可能很多人并没有去深入学习过这个概念，我也一样。在这次失业找工作的过程中，面试官提出来一个问题是Promise和setTimeout的执行顺序问题，由于之前看到过相关问题所以知道是Promise先执行的，但是当面试官询问其原理时便一无所知了，所以在面试之后查阅了一些资料以及其他前辈的一些博客，对EventLoop有了一些基础的了解，纪录在此，用写给别人看的方式逼迫自己好好理解这个概念，争取做到知其然知其所以然。

在引入防抖和节流之前，给出一个需求，需要我们监视浏览器的滚动事件，返回滚动条与顶部的距离，我们很容易能写出这样的代码：

1
2
3
4
5
6

function showTop(){
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
    console.log('滚动条距离顶部的距离：' + scroolTop)
}
// 绑定事件
window.onscroll = showTop

但是这样真的可行不？答案是可行但不太合适，因为这个函数的运行频率实在是太高了，只要滚动会一直触发，把浏览器的性能浪费在这里肯定是不合适的。

由此我们引出防抖和节流这两个概念。