Valito React响应式状态库
本篇文章同时收录在公众号《泡芙玩编程》，持续更新内容中，欢迎关注 1.Valtio 是啥玩意 Valtio makes proxy state simple for React and Vanilla 就是让数据管理在 React 和原生 JS (Vanilla) 中变得更加简单的一个库，它类似于 Vue 的数据驱动视图的理念，使用外部状态代理去驱动 React 视图来更新。总的来说，Valtio（用粤语来念就是“我丢”） 是一个很轻量...
valtio使用方式
前言 跳过前言： ，您可以选择直接从第二节开始阅读。 提到 React 状态管理，我最初是接触的 Context，就是用 useContext 和 useReducer 去做状态管理，写多了发现还是挺麻烦的，还会出现 “Provider 嵌套地狱” 的问题，对于不同的 state 也不好组合计算。后面了解到 Redux，固有的模式使得用户需要编写很多重复和复杂的代码，甚至开发者也说了 “Try MobX”。对于 MobX，和前者的的函数...
iNtersectionobserver监听滚动条滚动位置实现图片懒加载
大家下午好。听说在实现一些需要监听滚动条滚动到某个元素需要执行某段神秘代码的需求时，大伙总是不太乐意，现给大家介绍一个不用监听滚动事件就能完成需求的api，希望能给一点点启发。 废话少说，先上效果 懒加载 瀑布流 视频暂停 上代码 HTML JS 完事，下次再见 啊？客官还要解释？那好吧 接下来就是隆重推出今天的主角 IntersectionObserver API，这是一套用来监听 html 元素是否与指定元素有 交叉关系 的API。...
JS进阶 | 详解ES6中的Class
「这是我参与2022首次更文挑战的第12天，活动详情查看： 」 JS进阶系列文章 👇 阅读本文你将学习到 👇 类中的构造函数 类的实例、静态、私有属性 类的实例、静态、私有方法 类的继承 关于 一些扩展知识点 在 （ ）之前， 语法中是不支持类的，导致面向对象编程方法无法直接使用，但我们可以通过function来实现模拟出类，而随着 的更新，在 出现了中出现 关键字，可以用于定义类。接下来让我们看看它的如何使用的。 class 下面...
this指向-箭头函数this指向详解
一、思考： 1.为什么不能使用箭头函数来定义methods？ 答：因为箭头函数没有自己的作用域，绑定的是父级作用域的上下文， 如果使用箭头函数，那么在获取data里面的数据的时候，this指向window导致访问失败 原因：这跟this的绑定规则有关，在箭头函数中不绑定this，但是如果箭头函数使用了this，会往上层作用域去找，注意：methods对象并不是作用域(所有的对象都没有作用域) 2.不使用箭头函数的情况下，this到底指向...
JS长任务（耗时操作）导致页面卡顿，优化方案
前端是直接和客户交互的界面，前端的流畅性对于客户的体验和留存率至关重要，可以说，前端界面的流畅性是一款产品能不能成功的关键因素之一。要解决界面卡顿，首先我们先要知道造成页面卡顿的原因： 什么是长任务？ 长任务是指JS代码执行耗时超过50ms，能让用户感知到页面卡顿的代码执行流。 长任务为什么会造成页面卡顿？ UI界面的渲染由UI线程控制，UI线程和JS线程是互斥的，所以在执行JS代码时，UI线程无法工作，就表现出页面卡死状态。 我们现在...
js 如何判断对象自身为空
前言 如何判断一个对象为空是我们在开发中经常会遇到的问题，今天我们来聊聊几种经常使用的方法，以及在不同的场景下我们如何去使用。 1\. JSON.stringify 方法可以使对象序列化，转为相应的 JSON 格式。 缺点：如果存在 、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成 （出现在数组中时）。 如下示例： 2\. for in 配合 hasOwnProperty 使用 对当...
能说说你对宏任务 和 微任务 的理解吗
一、背景 js 是一种单线程语言，只有一条通道，那么在任务多的情况下，就会出现堵塞，这种情况下就产生了 多线程，那么就产生了同步任务和异步任务。 同步任务： 在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。是 由 js 执行栈/回调栈执行 的 异步任务： 不进入主线程、而进入任务队列的任务，当主线程中的任务运行完成了，才会从任务队列中取出异步任务，放入主线程中执行 二.宏任务和微任务 微任务和宏任务都是异步任务，它...
请自信的大声告诉面试官forEach跳不出循环
如果面试官，或者有人问你foreach怎么跳出循环，请你大声的告诉ta，跳不出！！！！！！！！！！ 为什么呢？ 先看看foreach大体实现。 两个输出的结果是一样的没啥问题，这就是foreach的大体实现，既然都知道了它的实现，那么对它为什么跳不出循环♻️应该都知道了，再不清楚的话，再看一下下面的例子。 在demo2函数里面调用demo函数，demo函数的return能阻止demo2函数下面的执行吗？很明显不行啊，demo函数里的re...