前端杂谈共30篇
不容错过的JavaScript高级语法(Iterator, Generator) - 君霖驿站

不容错过的JavaScript高级语法(Iterator, Generator)

Iterator 什么是迭代器 迭代器是帮助我们对某个数据结构进行遍历的对象。 在JavaScript中,迭代器也是一个具体的对象,这个对象需要符合迭代器协议(iterator protocol)。 迭代器...
CSS实现渐变色边框(Gradient borders)的几种方法 - 君霖驿站

CSS实现渐变色边框(Gradient borders)的几种方法

1. 使用 border-image CSS 提供了 border-image 属性用于给 border 绘制复杂图样,与 background-image 类似,我们可以在 border 中展示image和linear-gradient。 ...
聊聊Vue3.2的setup语法糖和Hook函数 - 君霖驿站

聊聊Vue3.2的setup语法糖和Hook函数

在2021 年 8 月 5 日,Vue发布了3.2版本的新写法,其中最主要的亮点就在于setup的语法糖,学过Vue3.0的小伙伴都清楚,当我们在使用Vue3的语法就构建组件的时候,总是需要把外面定义的方法变量必...
原来这就是设计模式 - 君霖驿站

原来这就是设计模式

为什么要学习设计模式 很多人都说“我工作3年了,没学过设计模式一点也不影响我敲代码”,又或者“我看了几遍设计模式理论,在工作中根本就用不到”。对于设计模式,从来都说仁者见仁智者见...
回流和重绘 - 君霖驿站

回流和重绘

浏览器解析HTML的简易过程 从上面这个图上,我们可以看到,浏览器渲染过程如下: 解析HTML,生成DOM树,解析CSS,生成CSSOM树将DOM树和CSSOM树结合,生成渲染树(Render Tree)有了渲染树...
jurieo的头像 - 君霖驿站jurieo7月前
0110
nextTick的作用和实现原理 - 君霖驿站

nextTick的作用和实现原理

作用(官方定义) Vue.nextTick([callback,context])在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新之后的DOM。 // 修改数据 vm.msg = 'Hello' // ...
毛玻璃效果(Glassmorphism)的简单实现 - 君霖驿站

毛玻璃效果(Glassmorphism)的简单实现

什么是毛玻璃效果? 毛玻璃效果(Glassmorphism)是目前非常流行的设计新趋势,它的主要特征就是半透明的背景,以及阴影和边框。 在实际开发工作中,我们经常遇到如下页面布局。原谅我粗...
巧用渐变实现高级感拉满的背景光动画 - 君霖驿站

巧用渐变实现高级感拉满的背景光动画

先看效果图: 实现 这个效果想利用 CSS 完全复制是比较困难的。CSS 模拟出来的光效阴影相对会 Low 一点,只能说是尽量还原。 其实每组光都基本是一样的,所以我们只需要实现其中一...
30个工作中常用到的前端小知识 - 君霖驿站

30个工作中常用到的前端小知识

1. JS为什么单线程 一个简单的原因就是,js在设计之初只是进行一些简单的表单校验,这完全不需要多线程,单线程完全可以胜任这项工作。即便后来前端发展迅速,承载的能力越来越多,也没有发...
有了for循环 为什么还要forEach? - 君霖驿站

有了for循环 为什么还要forEach?

js中那么多循环,for for...in for...of forEach,有些循环感觉上是大同小异今天我们讨论下for循环和forEach的差异。我们从几个维度展开讨论: for循环和forEach的本质区别。for循环和forEac...