前端Jason-CSDN博客

原创一文看懂git merge与git rebase

本文将通过一系列步骤来研究merge与rebase并分析二者区别。

2024-05-22 18:40:50 473

原创 BroadcastChannel：跨标签页通信

目前浏览器跨标签页通信的方式有很多，比如：websocket、针对LocalStorage使用window.onstorage、window.postmessage。本文将用BroadcastChannel实现同一域名下两个标签页间消息的收和发。

2024-05-10 23:55:02 267 1

原创如何取消xhr / fetch / axios请求

1.从 v0.22.0 开始，Axios 支持以 fetch API 方式—— AbortController 取消请求。2.使用 cancel token 取消一个请求，此 API 从 v0.22.0 开始已被弃用。fetch()请求发送以后，如果中途想要取消，需要使用AbortController对象。

2024-05-06 22:57:52 298

原创 Typescript中的逆变与协变

许多不是很熟悉 TS 的朋友对于逆变和协变的概念会感到莫名的恐惧，没关系。它们仅仅代表阐述表现的概念而已，放心我们并不会从概念入手而是通过实例来逐步为你揭开它的面纱。

2023-09-20 10:29:14 305

原创 IntersectionObserver API实现虚拟列表滚动

的用法，以及如何兼容。如何在React Hook中实现无限滚动。如何正确渲染多达10000个元素的列表。无限下拉加载技术使用户在大量成块的内容面前一直滚动查看。这种方法是在你向下滚动的时候不断加载新内容。当你使用滚动作为发现数据的主要方法时，它可能使你的用户在网页上停留更长时间并提升用户参与度。随着社交媒体的流行，大量的数据被用户消费。无线滚动提供了一个高效的方法让用户浏览海量信息，而不必等待页面的预加载。如何构建一个体验良好的无限滚动，是每个前端无论是项目或面试都会碰到的一个课题。

2023-05-07 18:56:45 1550 8

原创过滤树数据

给你一个树数据，如何删除（过滤）一个或多个指定的节点？

2023-04-04 23:12:55 138

原创 React无缝滚动组件

无缝滚动

2023-03-25 22:49:22 1236

原创使用react-bmapgl绘制区域并判断是否重叠

react hook项目使用百度地图如何绘制区域（电子围栏）？？？如何判断多边形与多边形、多边形与圆形、圆形与圆形是否重叠？？？

2023-01-16 15:31:08 583

原创 Mac M1使用brew安装nvm

nvm作为node版本管理器，全称，可以管理安装的node和node-sass版本。在macOS系统上的安装步骤如下：*本机使用的是M1芯片，终端配置文件默认使用.zshrc。

2022-12-10 22:01:01 1817 1

原创 Typescript中的高级类型工具

Partial、Required、Readonly、Record、Exclude、Extract、Pick、Omit

2022-11-13 11:05:40 1863

原创 react项目中如何将多个文件压缩成zip下载

假设后端给了你20个文件url，前端如果一次下载一个，下载20次，浏览器底部将非常壮观，这不是一个优秀的前端。优秀的前端很容易想到将这些文件压缩成一个zip，这样就只需要下载一次就够了，设计非常的人性。

2022-10-08 22:31:25 1195

转载 Svelte 官方入门教程（6）—— 绑定

通常，Svelte 中的数据流是自上而下，父组件可以在子组件上设置 props，而组件可以在元素上设置属性，但反之则不行。App.svelte某些情况亟需打破这种规则。以组件中的元素为例，我们可以为其添加事件处理程序，在该程序中将的值设置为，不过这样写法有点拖沓累赘，以后在表单元素的情况愈加苦不堪言。好在，我们可以使用指令：这意味着更改name的值时会更新 input 的值，反之亦然（双向绑定）。App.svelte在 DOM 中的值都是字符串。不能很好地帮助你处理数字输入（和

2022-08-07 17:19:06 622

原创使用react-pdf预览pdf

在使用构建的react项目中如何实现预览？？如果PDF中包含印章该如何使印章展示出来？？？我项目中使用的版本为5.2.0。4. 显示印章客户在浏览器中使用开源PDF.JS插件预览签署后的PDF文件时会遇到无法显示电子签章的情况，这是因为PDF.JS因无法进行校验电子签名故而默认隐藏了电子签章。如果需要显示电子签章则需要在中找到以下代码并进行注释或者某些版本的PDF.JS需要在pdf.worker.js中找到如下代码并进行注释最后看下效果图......

2022-07-09 20:45:39 4750

转载 Svelte 官方入门教程（5）—— 事件

本章我们专门探讨 Svelte 事件处理。我们来写一个简单的程序，界面上展示鼠标当前所在的坐标：我们此前已经初步了解到，要在元素上监听任意事件，我们可以使用 on: 指令：2、内联事件你也可以用内联的方式声明事件处理：属性值上的双引号其实是可选的，只是某些环境下有助于语法突出显示。DOM 事件处理程序允许使用修饰符来变更行为。例如，对某个处理程序使用修饰符后，这个处理程序只会运行一次：事件修饰符完整的列表：组件也可以发送（dispath）事件。为此，需要创建一个事件分发器（dispatcher）。

2022-06-26 22:32:49 664

转载 Svelte 官方入门教程（4）—— 模板逻辑

先来参看这些代码：App.svelte为了可以按条件渲染某些标记，我们将其放置在 if 块中：App.svelte当然，这仅仅是为了演示，实际上我们知道两个 button 唯一的区别是“out”和“in”两个单词之差，完全可以使用一个 ? 号表达式来替代上述繁琐的 if。由于和这两个条件是互斥的，因此可以使用块来简化它：App.svelte3、Else-If 块假设我们已有如下代码：App.svelte可以使用将多个条件 “连接” 在一起：App.svelte4、each 块如果你需要遍历数

2022-06-05 15:46:39 330

原创 memo、useMemo、useCallback总结

如何使用memo、useMemo、useCallback，区别是啥

2022-06-04 13:53:29 753

转载 Svelte 官方入门教程（3）—— Props

1、声明组件的 Props到目前为止，我们只处理组件内部的状态，也就是说，这些值只能在给定的组件中访问。在任何实际的应用程序中，您都需要将数据从一个组件传递到其子组件。为此，我们需要为组件声明属性，通常缩写为 ‘props’。参看下方的子组件 Nested.svelte 及父组件 App.svelteNested.svelte<script> let answer;</script><p>The answer is {answer}</p&gt

2022-05-24 23:09:19 276

转载 Svelte 官方入门教程（2）—— 反应性

所谓反应性，对应React的状态（Status）或Vue的 data（实际上也是状态）。Svelte 的组件状态，在用户看来，跟普通的变量无异：<script> let count = 0; let username = 'anders' let things = 'pens'</script><div>{username} has {count} {thins} </div>而组件状态对应于 Vue，则叫 data：<s

2022-05-21 23:02:29 256

转载 Svelte 官方入门教程（1）—— 简介

在介绍 Svelte 之前，首先解决的要务问题是：Svelte 不是 Servlet，Svelte 是一个前端 Web 框架，而 Java Servlet 与 Svelte 不是一个类型的程序，务请明鉴。如有误入，请出门右转。一、初窥门径花径不曾缘客扫，教程今始为君开。本教程循序渐进，为你倾囊相授如何使用 Svelte 轻松创建快速小巧的应用。如果你想深入精微，探求透彻，不妨随时翻阅 API 文档及示例。倘若你现在就迫不及待想在本机上开发，60秒极速入门正是为你而准备的。本教程所有.

2022-05-16 23:21:09 1720

原创树数据中根据子节点id查找父节点的id

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt

2021-11-29 17:07:44 988 2

原创 js中new关键字的实现原理

// 实现newfunction _new() { let obj = new Object(); // 1. 创建一个空对象 let Con = [].shift.call(arguments); // 2. 获得构造函数 obj.__proto__ = Con.prototype; // 3. 链接到原型 let result = Con.apply(obj, arguments); // 4. 绑定 this，执行构造函数 return typeof result === 'ob

2021-11-29 11:07:44 371

原创 ant-design Upload组件自定义上传

在使用ant-design进行表单开发(注册)的时候遇到需要包含图片数据的提交但是由于是注册，java那边是先有提交的数据后生成新用户，注册时提交的数据没法找到对应的用户因此没有开发图片的上传接口，前端的做法是保存用户注册的数据一次性提交给后端由于没有上传接口也就没有action，改为是有用customRequest自定义上传<Form.Item> <Form.Item name="certificationFiles" valuePropName="fil.

2021-11-22 10:15:10 1840

原创 CSS Grid 网格布局-项目属性

代码地址一. 项目的位置<div class="box"> <div class="item item-1">1</div> <div class="item item-2">2</div> <div class="item item-3">3</div> <div class="item item-4">4</div> <div class="item item-5">5&

2021-11-11 15:28:24 661

原创 CSS Grid 网格布局-容器属性

代码地址一. display: grid<span>foo</span><div class="box"> <div class="item"><p>1</p></div> <div class="item"><p>2</p></div> <div class="item"><p>3</p></div><

2021-11-11 15:17:37 840

原创 CSS Grid 网格布局-基本介绍

概述网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。上图这样的布局，就是 Grid 布局的拿手好戏。Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"

2021-11-11 14:10:19 477

转载垃圾回收机制

我们知道垃圾回收机制是引擎来做的，JS引擎有很多种（各个浏览器都不同），其垃圾回收机制在一些细节及优化上略有不同，本文我们以一些通用的回收算法作为切入，再由 V8 引擎发展至今对该机制的优化为例（为什么以 V8 为例？因为它市场占有率大 ????），一步一步深入来助我们了解垃圾回收机制，因为只有真正了解垃圾回收机制，后面才能理解内存泄漏的问题以及手动预防和优化JavaScript 是门魅力无限的语言，关于它的 GC（垃圾回收）方面，你了解多少呢？想来大部分人是因为面试才去看一些面试题从而了解的垃圾回收，

2021-09-06 11:28:36 270

空空如也

空空如也