因为不会手写nextTick又被面试官diss了
最近在面试的时候被面试官问到,如何在vue中获取到最新的DOM元素，瞬间内心狂喜，自信地对面试官说 。 嗯，没错，那你手写一个nextTick吧。 痛苦面具，瞬间小脑萎缩了。 在 Vue 的生命周期中，有一段时间是异步的，有时候会遇到数据还未挂载到DOM节点上就试图获取该数据那么此时我们获取到的数据并不是最新的，而 nextTick 就是让我们在这段异步时间结束后执行自己的代码的工具。它确保在DOM更新后执行回调 （起到了等待DOM渲染...
图片懒加载的实现方法
图片作为前端开发中不可或缺的元素，其加载速度对用户体验有着重要影响。然而，大量的图片加载不仅会消耗用户流量，还会导致页面加载缓慢，影响用户体验。为了解决这个问题，图片懒加载技术应运而生 图片懒加载（Lazy Loading）是一种优化网页性能的技术，它通过延迟加载图片，即在图片即将进入可视区域时才开始加载，从而减少页面初始加载时间，提高页面响应速度。 图片懒加载的实现原理主要基于以下几个关键点： 滚动事件监听： 图片懒加载的核心是通过监...
探索 Electron 应用的本地存储：SQLite3 与 Knex.js 的协同工作
electron 简介 是一个使用 , 和 构建跨平台桌面应用程序的框架。 它允许开发者使用 技术来创建桌面软件，而不需要学习特定于平台的编程语言。 应用程序实际上是一个包含 内容的 浏览器实例，并且可以访问丰富的 来执行系统级任务。 这使得 成为开发桌面应用程序的强大工具，因为它结合了 技术的灵活性和 的功能。 sqlit3 简介 是一个 语言编写的轻量级数据库，它具有以下特点: 1、 轻量级 ： 的数据库是一个单一的文件，不需要一个...
面试官：手写Promise，我瞅瞅
手写 promise 1.Promise 构造函数 参数 构造函数接受一个函数作为参数，该函数有两个参数也是函数 resolve 函数用于将 Promise 对象的状态从 pending 变为 fulfilled reject 函数用于将 Promise 对象的状态从 pending 变为 rejected 状态 三个：pending、fulfilled 和 rejected，状态不可逆 构造函数： executor 函数中，所以 pr...
CSS 锚点定位终于来了！
盼了好久，最近 终于迎来了 锚点定位的正式支持。这是一个和 滚动驱动动画一样，足以颠覆整个 开发领域的新特性。有了这个特性，很多以前强依赖 的方式，都可以纯 解决，并且实现起来更加简单、更加灵活，一起看看吧 一、快速了解 CSS 锚点定位 在过去，要实现一个元素定位，通常需要一个相对定位。比如这样一个 tooltip 如果不借助 ，让这个气泡位于按钮的正上方，就只能约束 结构，让这个气泡位于按钮内部 并且设置按钮为相对定位，才能通过绝对...
同源策略、跨域相关以及script等标签带来的问题和处理方式
一、同源策略定义 同源策略（Same origin policy）是一种在web应用中重要的安全策略，用于限制一个源（origin）的文档或者它加载的脚本如何与来自另一个源的资源进行交互。这里的“源”由协议、域名和端口组成，只要这三者不完全相同，就算是不同源。 二、同源策略作用 1、防止信息泄露： 同源策略阻止恶意网站通过跨域请求获取用户在其他站点上的敏感信息。例如，禁止一个网页中的脚本访问另一个不同域的网页中的数据，包括读取、修改或删...
实现一只碎片化效果的鸟
老板：别人有的，我们也要有！ 效果如下，每一只动物都是一块一块碎片组成的，并且每一次切换的时候，碎片都有一种 重组动画效果 ，如下： 实现起来不难，分享给大家 一探究竟 进到这个网站中看，可以看到每一只动物都是由无数个碎片DOM节点叠加而成的，而这些碎片是怎么画的呢，可以看出用了两个样式： clip path ：碎片形状的绘制 background color ：碎片背景颜色 如果对 这个样式感兴趣的，可以去 MDN 文档上看 碎片数据...
CommonJS 和 ES Module 终于要兼容了？
最近网上看到一个挺有意思的消息，让我不禁想跟大家聊聊。那就是 和 的互操作性问题终于有望解决了！是不是很惊喜，这可是困扰咱们开发者多年的老大难问题啊。说到这儿，你是不是又想起了 ？ CJS 和 ESM 的前世今生 在 的世界里，模块化是构建大型应用程序的基础。模块化可以帮助开发者在不影响全局命名空间的前提下管理代码，便于功能分离、代码复用和依赖管理。 和 就是这两大模块化方案的代表。 CommonJS（CJS） 是 原生支持的模块系统，...
React新旧DOM和key的关系
我们都知道， 是通过 对比，进行更新渲染的。这样一方面可以积累多次更新到一次渲染中，减少渲染次数；另一方面通过 的对比，尽可能复用之前的 ，提示性能。这里我主要说一下 的对比以及与 的关联性。 1. 新的虚拟 是基于组件的最新 和 的值计算得出的，然后再和旧 进行比较。 这里我想强调的是新的 不是基于旧的 生成的 。 2. 会给每一个 元素，优先使用开发自定义的 ，没有的话会提供默认的 ，这个 是基于该组件在父组件中的索引，比如第一个就...