前端八股大全
参考链接：TS 中 interface 和 type 究竟有什么区别？用途不同：接口： 主要用于描述对象的形状（Shape），即对象应该包含哪些属性和方法，以及它们的类型。接口通常用于面向对象编程，描述对象的结构和行为。类型： 主要用于定义复杂的类型，可以包括基本类型、联合类型、交叉类型等。类型别名通常用于提高可读性、简化复杂类型或重复类型的定义。可读性和语义：接口： 接口提供了更直观的语法，更符合人类的思维模式。使用接口可以更清晰地描述对象的结构和行为。类型： 类型别名通常用于创建自定义的复杂类型，可以提高代码的可读性和简洁性。
枚举的使用TypeScript 中的枚举类型允许开发人员定义一组命名的常数集合，使得代码更具可读性和可维护性。枚举类型可以帮助避免使用魔术数字或字符串，并提供了更清晰的语义化表示。在 TypeScript 中，枚举类型可以通过以下方式定义：enum Direction { Up, Down, Left, Right, }在这个例子中，Direction 是一个枚举类型，它包含了四个成员：Up、Down、Left 和 Right。默认情况下，枚举成员的值从 0 开始递增，但也可以手动指定值：enum Direction { Up = 1, D...
TypeScript提供了一组基本的数据类型，用于声明变量、函数参数和函数返回值的类型。下面是 TypeScript 中常用的基础类型：布尔类型 (boolean): 表示逻辑值，只能是 true 或 false。let isDone: boolean = true;数字类型 (number): 表示整数或浮点数，包括整数和浮点数。let decimal: number = 6; let float: number = 3.14;字符串类型 (string): 表示文本数据。let color: string = "blue";数组类型 (Array): 表示同类型的...
TypeScript有许多优点和一些缺点，让我们逐一来看：优点：静态类型检查： TypeScript引入了静态类型系统，允许开发人员在编码阶段就指定变量的类型。这提高了代码的可靠性，减少了潜在的运行时错误。更好的代码维护性： 静态类型系统和强大的类型推断功能使得代码更易于理解和维护。类型信息充当了自文档化的角色，使得代码更具可读性。提高开发效率： TypeScript提供了更好的编辑器支持，包括智能感知、自动完成和代码导航等功能。这使得开发人员能够更快地编写和调试代码。面向对象编程支持： TypeScript支持类、接口等面向对象编程的概念，使得代码组织更加清晰，并且易于实现复用和扩展。...
结论：一个用函数包裹组件，一个向组件传递函数HOC 和 Render Props高阶组件（Higher-Order Components，HOC）和 Render Props 是 React 中用于组件复用和逻辑抽象的两种常见模式，它们有一些不同之处：1. 高阶组件（Higher-Order Components）：高阶组件是一个函数，接受一个组件作为参数，并返回一个新的增强版组件。高阶组件的作用是在不改变原组件的情况下，通过包裹（Wrapping）或者继承（Inheritance）等方式来增强组件的功能。高阶组件通常用于横切关注点（Cross-Cutting Concerns）的实现，...
在 React 中进行错误处理通常涉及两个方面：组件生命周期方法和错误边界（Error Boundaries）。1. 组件生命周期方法：在组件的生命周期方法中，你可以使用 componentDidCatch() 方法来捕获组件内部发生的 JavaScript 错误，并进行处理。这个方法在组件渲染期间、生命周期方法，或子组件的构造函数中发生的错误都会被捕获。class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: fa...
参考链接：React 函数式组件的性能优化参考链接：React性能优化总结参考链接：React组件设计之性能优化篇减少render次数React.memo缓存组件避免匿名函数，使用React.useCallback缓存函数PureComponentShouldComponentUpdate合理使用Context，只定义被大多数组件所共用的属性减少计算量React.useMemo 缓存值使用 Fragment 来避免添加额外的 DOM使用key合理使用css，性能上：CSS Module > CSS Classes > Inline Style防抖节流减少渲染量懒加载组件（Su...
当 React 将 JSX 转换为真实 DOM 时，它主要依赖于以下几个方法和机制：React.createElement()： JSX 元素会被 Babel 转译为对应的 React.createElement() 调用。这个函数创建了一个描述 DOM 结构的 JavaScript 对象，包含了元素的类型、属性和子元素等信息。例如：const element = <h1>Hello, world!</h1>;这个 JSX 会被转换为以下形式：const element = React.createElement('h1', null, 'Hello, world...
参考链接：这可能是最通俗的 React Fiber(时间分片) 打开方式React Fiber 是 React 的新的核心算法架构，用于实现协调更新和异步渲染。Fiber 架构是 React v16 中引入的重大变化，它的主要目标是解决 React 在大型应用中遇到的性能问题和用户体验问题。React Fiber 解决了以下几个问题：渲染阻塞：在旧的 React 架构中，当 React 应用执行更新时，会阻塞浏览器主线程，导致页面失去响应，用户体验下降。Fiber 架构通过将工作分割成可中断的小任务单元，使得 React 应用可以在更新过程中让出主线程，从而保证页面的流畅响应。优先级调度...
避免不必要的 render 是提高 React 应用性能的关键之一。以下是一些可以帮助避免不必要 render 的方法：使用 PureComponent 或 React.memo：使用 PureComponent 类组件或 React.memo 高阶组件可以帮助避免不必要的 render。这两者都实现了 shouldComponentUpdate 生命周期方法，通过进行浅比较来判断是否需要重新渲染组件。如果组件的 props 和 state 没有变化，就不会重新渲染组件。import React, { PureComponent } from 'react'; class MyComp...
什么是ImmutableImmutable（不可变性）是指对象创建后其内容不能被修改的特性。在编程中，Immutable 模式被广泛应用于函数式编程和一些现代编程框架中，如 React 和 Redux。理解 Immutable 的概念有助于编写更安全、更易于维护的代码。以下是对 Immutable 概念的理解：不可变性：在 Immutable 模式中，一旦创建了对象，它的内容就不能被修改。如果需要对对象进行修改，必须创建一个新的对象，而不是直接在原对象上进行操作。值的不变性：Immutable 不仅适用于对象的内容，还适用于对象的值。即使对象的值发生了变化，原对象本身也不会受到影响，而是...
React Router 有两种主要的路由模式：HashRouter 和 BrowserRouter。HashRouter：HashRouter 使用 URL 中的哈希（#）部分来管理路由，即路由信息保存在 URL 的哈希部分中，不会触发页面的重新加载。在浏览器不支持 HTML5 History API 的情况下，HashRouter 是一种常用的路由模式。实现原理是，通过监听 window.location.hash 的变化来切换路由，并通过 window.addEventListener('hashchange', callback) 来监听 URL 的变化。BrowserRoute...
React 的纯组件（Pure Component）是一种特殊类型的 React 组件，它可以帮助提高性能。纯组件是 React.Component 的子类，它们在 shouldComponentUpdate 方法中默认使用浅比较来判断是否需要重新渲染。当纯组件的 props 和 state 没有发生变化时，React 将跳过对该组件的重新渲染，从而节省了渲染的时间和性能开销。与普通的 React 组件相比，使用纯组件的好处是，无需手动实现 shouldComponentUpdate 方法来进行性能优化，React 会自动帮助我们处理这个问题。但是，需要注意的是，纯组件仅能够对基本数据类...
方式在 React 中使用 CSS 有几种常见的方式，具体取决于你的项目需求和个人偏好：普通的 CSS 文件引入：你可以直接在 React 组件中引入普通的 CSS 文件，然后在 JSX 中使用引入的样式类名。import './styles.css'; const MyComponent = () => { return <div className="my-style">Hello, World!</div>; };内联样式：你可以在 JSX 中直接使用内联样式，通过 style 属性传递样式对象。const style = {...
React Hooks 是 React 16.8 版本引入的一项重要特性，它解决了在函数式组件中复用状态逻辑、副作用等问题，并使函数式组件具有了类组件相似的功能。理解 React Hooks 的核心概念和解决的问题包括以下几点：解决状态逻辑复用问题：在 React 16.7 版本之前，函数式组件没有内部状态，无法直接使用 state、生命周期等功能。这导致了在函数式组件中复用状态逻辑的困难，通常需要使用高阶组件或渲染属性来解决。React Hooks 的出现使得函数式组件可以直接使用状态，并通过 useState Hook 来管理组件内部的状态，从而解决了状态逻辑复用的问题。解决副作用处...
参考链接：高阶组件高阶组件的特点高阶组件（Higher Order Component，HOC）是一种用于增强组件功能的模式，它接收一个组件作为参数，并返回一个新的组件。换句话说，高阶组件是一个函数，它接受一个组件作为输入，并返回一个新的组件作为输出。理解高阶组件的核心概念包括以下几点：接受组件作为参数：高阶组件接受一个组件作为参数，这意味着它可以接受任何类型的组件作为输入。返回新的组件：高阶组件返回一个新的组件，通常是通过组合原始组件和一些额外的功能来增强组件的功能。功能增强：高阶组件通常用于增强组件的功能，例如添加状态管理、数据获取、权限控制、样式装饰等。组件组合：高阶组件可以将多个...
参考链接：《深入理解react》之memo、forwardRef原理forwardRef 是 React 提供的一种特殊的高阶组件（Higher Order Component），用于在函数组件中向子组件传递 ref。在 React 中，函数组件默认不支持 ref 属性，这意味着无法直接通过 ref 属性获取函数组件的实例。但有时候我们希望能够在父组件中通过 ref 获取到子组件的实例，这时就可以使用 forwardRef。使用 forwardRef 可以在函数组件中传递 ref，使得父组件可以直接访问子组件的 DOM 元素或实例。以下是 forwardRef 的基本使用方法：impor...
受控组件和非受控组件在 React 中，受控组件（Controlled Components）和非受控组件（Uncontrolled Components）是两种不同的表单组件的处理方式。受控组件（Controlled Components）：受控组件是由 React 组件状态（state）来控制的表单元素。也就是说，表单元素的值（例如输入框的值、选择框的选中项等）是通过 React 组件的状态来管理和更新的。当用户与表单元素进行交互时，React 组件的状态会更新，并且表单元素的值也会相应地更新。通常，受控组件会使用 onChange 事件来监听用户输入的变化，并将变化后的值保存到组件...
语法：类组件使用 ES6 的类语法来定义组件，继承自 React.Component 或 React.PureComponent。函数组件是一个简单的 JavaScript 函数，接收 props 作为参数，并返回 React 元素作为输出。状态管理：类组件可以包含内部状态（通过 this.state 定义）和生命周期方法（例如 componentDidMount、render 等）。函数组件是无状态的，不包含内部状态或生命周期方法，只负责根据输入的 props 渲染 UI。性能：函数组件通常比类组件执行效率更高，因为函数组件没有实例化过程和额外的生命周期方法，只是执行简单的函数调用。类...
参考链接：2023 再谈 React 组件通信Props 和 Callback：这是 React 中最基本和常见的组件通信方式。父组件通过 props 将数据传递给子组件，子组件通过 props 接收数据，并且可以通过回调函数（callback）来向父组件传递数据。父组件可以将数据作为 props 的属性传递给子组件，子组件通过 this.props 访问这些属性。当子组件需要向父组件传递数据时，可以通过回调函数的方式，将数据作为参数传递给父组件中的函数，从而实现数据的传递。Context：Context 是 React 提供的一种跨组件通信的机制，可以在组件树中传递数据而不必一级一级手...
在 React 中，构建组件的方式主要有以下几种：函数式组件（Functional Components）：函数式组件是一种纯函数，接收 props 作为参数，并返回 React 元素作为输出。函数式组件通常是无状态的，不包含任何内部状态或生命周期方法，只负责根据输入的 props 渲染 UI。函数式组件使用函数声明来定义，语法简洁，易于理解和编写。import React from 'react'; const FunctionalComponent = (props) => { return <div>Hello, {props.name}!</div&...
参考链接：[[React 源码] React18 合成事件][1]React 的事件机制具有以下特点和优势：合成事件（SyntheticEvent）：React 的事件系统基于合成事件，它是对原生 DOM 事件的封装。合成事件提供了与原生事件相似的 API，但在不同浏览器和环境下表现一致。事件委托（Event Delegation）：React 使用事件委托的方式来处理事件，将事件处理函数绑定在顶层的 DOM 元素上。这样可以减少内存消耗和提高性能，特别是在处理大量子元素的情况下。性能优化：React 的事件系统采用了一些性能优化策略，例如事件委托和事件池管理。合成事件对象可以被复用，减...
参考链接：我对 React V16.4 生命周期的理解废弃 UNSAFE_componentWillMount 的原因有一个常见的问题，有人问为什么不在 UNSAFE_componentWillMount 中写 AJAX 获取数据的功能，他们的观点是，UNSAFE_componentWillMount 在 render 之前执行，早一点执行早得到结果。但是要知道，在 UNSAFE_componentWillMount 中发起 AJAX 请求，不管多快得到结果也赶不上首次 render，数据都是要在 render 后才能到达。而且 UNSAFE_componentWillMount 在服务...
在 React 中，组件的生命周期经历了多个不同的阶段，主要包括以下阶段：挂载阶段（Mounting）：constructor(): 构造函数，在组件被创建时调用，用于初始化状态和绑定方法。static getDerivedStateFromProps(): 静态方法，用于根据 props 更新 state。render(): 渲染方法，用于生成组件的虚拟 DOM。componentDidMount(): 组件挂载后调用，通常用于进行一次性的 DOM 操作、数据加载等操作。更新阶段（Updating）：static getDerivedStateFromProps(): 更新阶段也会触发...
发送两次的原因浏览器发送两次 POST 请求通常是因为 预检请求（Preflight Request） 的原因，这是由于跨域请求时浏览器执行的一种预检操作。跨域请求是指请求的目标地址与当前页面的地址不同源，即协议、域名或端口号至少有一个不同。在跨域请求中，如果请求是带有自定义头部（例如 Content-Type）或使用了非简单请求方法（例如 POST、PUT、DELETE）的情况下，浏览器会先发送一个预检请求给目标服务器，以确定是否允许实际的请求。预检请求通常是一个 OPTIONS 请求，用于向服务器确认实际请求是否安全。服务器收到预检请求后，会返回一组响应头，指示浏览器是否允许实际请求...
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它具有以下特点：全双工通信：WebSocket 允许客户端和服务器之间进行双向通信，可以同时发送和接收数据，而不需要发起多个 HTTP 请求。低延迟：WebSocket 建立在 TCP 连接上，减少了 HTTP 请求的开销，通信的延迟更低，适合实时通信场景。轻量级：WebSocket 协议头部较小，通信效率较高，适合在移动设备等资源受限的环境下使用。长连接：WebSocket 建立的连接会持久保持，而不像 HTTP 那样在每次请求后断开连接，节省了频繁建立和断开连接的开销。跨域支持：WebSocket 支持跨域通信，可...
参考链接：在浏览器输入 URL 回车之后发生了什么（超详细版）当在浏览器的地址栏中输入 URL 并按下回车键后，浏览器会执行一系列步骤来处理该请求：URL 解析：浏览器首先会解析输入的 URL，提取出其中的协议（如 HTTP、HTTPS）、主机名、端口号、路径和查询参数等信息。DNS 解析：浏览器会根据主机名（域名）部分进行 DNS 解析，将域名解析成对应的 IP 地址。如果浏览器有缓存或者操作系统 hosts 文件中有对应的 DNS 记录，则会直接使用缓存的 IP 地址；否则，会向本地 DNS 服务器发送 DNS 查询请求，获取域名对应的 IP 地址。建立 TCP 连接：浏览器通过解析...
HTTP 请求头是客户端发送给服务器的一些附加信息，用于描述请求的一些细节和要求。以下是一些常见的 HTTP 请求头：Host：指定被请求资源的主机名和端口号。User-Agent：标识发起请求的客户端信息，包括操作系统、浏览器等。Accept：指定客户端可以接受的内容类型，通常是 MIME 类型。Accept-Language：指定客户端可以接受的语言类型，用于内容协商。Accept-Encoding：指定客户端可以接受的内容编码方式，例如 gzip、deflate。Referer：指定引导用户代理发送请求的上一个页面的 URL。Authorization：包含客户端提供给服务器的认证...
1xx - Informational（信息性状态码）代表请求已被接受，需要继续处理。这类响应是临时响应，只包含状态行和某些可选的响应头信息，并以空行结束常见的有：100（客户端继续发送请求，这是临时响应）：这个临时响应是用来通知客户端它的部分请求已经被服务器接收，且仍未被拒绝。客户端应当继续发送请求的剩余部分，或者如果请求已经完成，忽略这个响应。服务器必须在请求完成后向客户端发送一个最终响应101：服务器根据客户端的请求切换协议，主要用于websocket或http2升级2xx - Success（成功状态码）代表请求已成功被服务器接收、理解、并接受常见的有：200（成功）：请求已成功...
HTTP 中的 GET 和 POST 是两种常用的请求方法，它们在传输数据和处理方式上有一些区别：参数传递方式：GET：通过 URL 的查询字符串传递参数，参数会附加在 URL 后面，例如 http://example.com/page?param1=value1¶m2=value2。POST：通过请求体传递参数，参数不会暴露在 URL 中，而是作为请求的一部分发送到服务器。数据长度限制：GET：由于参数是附加在 URL 中的，所以传输的数据量有限制，受浏览器和服务器的限制，一般在几 KB 到几十 KB 之间。POST：由于参数是作为请求体发送的，所以传输的数据量通常没有...
Webpack 的代理（Proxy）功能是通过配置 devServer 中的 proxy 实现的。这个功能的原理比较简单，主要是通过拦截客户端发送的请求，然后将这些请求转发到目标服务器上，最后再将目标服务器的响应返回给客户端。下面是代理的基本原理和实现步骤：拦截请求：开发服务器在启动时会创建一个本地服务器，用于接收客户端发送的请求。当客户端发送请求时，开发服务器会拦截这些请求。匹配代理规则：开发服务器会根据配置的代理规则检查请求的路径是否与任何代理规则匹配。代理规则通常包括目标服务器的地址和需要代理的路径规则。转发请求：如果请求的路径与某个代理规则匹配成功，开发服务器会将这些请求转发到配...
loaderbabel-loader：用于将 ES6+ 代码转换为向后兼容的 JavaScript 代码。css-loader：用于解析 CSS 文件，处理 CSS 中的 url() 等。style-loader：将 CSS 代码以 <style> 标签的形式插入到 HTML 文件中。sass-loader：用于解析 SASS/SCSS 文件，将其转换为 CSS。less-loader：用于解析 Less 文件，将其转换为 CSS。file-loader：用于处理文件，将文件输出到指定的目录，并返回文件 URL。url-loader：类似于 file-loader，但可以根据...
这些单位在 CSS 中用于定义元素的尺寸和位置，它们各有特点和应用场景：px（像素）：像素是最基本的长度单位，表示屏幕上的一个像素点。px 是固定单位，不随着浏览器缩放而改变，适用于需要精确控制尺寸和位置的情况，如边框宽度、字体大小等。em：em 是相对长度单位，基于元素的字体大小，1em 等于元素的字体大小。em 可以随着父元素的字体大小变化而变化，适用于需要相对于父元素字体大小进行缩放的情况，如段落文字大小、行高等。rem：rem 也是相对长度单位，但基于根元素（html）的字体大小。rem 的值不受父元素字体大小的影响，只受根元素字体大小的影响，适用于需要全局统一字体大小的情况。v...
标准盒模型IE盒模型（怪异盒模型）在实际开发中，可以通过 CSS 的 box-sizing 属性来指定使用哪种盒子模型，常用的取值有 content-box（W3C 标准盒子模型）和 border-box（IE 盒子模型）
getBoundingClientRect获取元素的位置和尺寸信息：const element = document.getElementById('your-element-id'); const rect = element.getBoundingClientRect();getBoundingClientRect() 方法返回一个 DOMRect 对象，包含了元素的位置和尺寸信息，其中包括 top, bottom, left, right, width, height 等属性。获取视口的尺寸信息：const viewportHeight = window.innerHeight |...
JavaScript 中的数字精度丢失问题主要是由于 JavaScript 内部使用 IEEE 754 浮点数表示数字，而浮点数的精度有限，无法精确表示某些十进制小数，导致在进行算术运算时出现精度丢失的情况。为了解决这个问题，可以采用以下方法：使用整数进行运算：将需要进行精确计算的数字转换为整数进行运算，最后再将结果转换回所需的小数格式。let num1 = 0.1; let num2 = 0.2; let result = (num1 * 10 + num2 * 10) / 10; // 0.3使用高精度库：可以使用第三方库（如 BigNumber.js）来处理大数运算，这些库提供了更...
JS的垃圾回收JavaScript 的垃圾回收是一种自动管理内存的机制，用于在程序运行过程中自动释放不再使用的内存，以避免内存泄漏和提高性能。JavaScript 使用垃圾回收器来监视变量的使用情况，并定期清理不再使用的内存。垃圾回收器通常使用以下几种技术来确定哪些内存可以被释放：引用计数：垃圾回收器跟踪每个值被引用的次数。当值的引用次数变为零时，即没有任何变量指向该值时，该值所占用的内存就可以被回收。然而，引用计数无法处理循环引用的情况，因为即使值之间存在循环引用，它们的引用计数也不会降为零。标记-清除：垃圾回收器首先将所有的变量标记为“活动的”，然后遍历所有的变量和引用，将被引用的变...
闭包是指一个函数能够访问并持有其外部作用域中的变量，即使这些变量在函数执行完毕后依然存在。换句话说，闭包使得函数能够记住并访问在其词法作用域外部定义的变量。理解闭包的关键在于理解 JavaScript 的词法作用域和函数的生命周期。当一个函数在其内部定义了另一个函数，并且内部函数引用了外部函数的变量时，就创建了一个闭包。以下是一个简单的闭包示例：function outerFunction() { let outerVariable = 'I am outer'; function innerFunction() { console.log(ou...
var、let 和 const 是 JavaScript 中用于声明变量的关键字，它们之间有以下区别：作用域：var：具有函数作用域（function scope），在声明它的函数内部有效。let 和 const：具有块级作用域（block scope），在声明它们的块（例如，if、for、while 循环或 {} 包裹的代码块）内部有效。变量提升：var：存在变量提升（hoisting），即变量可以在声明之前使用，但其值为 undefined。let 和 const：不会发生变量提升，尝试在声明之前使用会导致 ReferenceError。重复声明：var：允许在同一作用域内重复声明同...
Web Worker 的使用场景主要用于处理耗时的任务、大型数据的处理、实时通信等。以下是一些常见的使用场景和限制：使用场景：计算密集型任务：例如大量的数据处理、复杂的算法计算等。图片处理：对图片的解码、缩放、裁剪等操作。数据处理：对大型数据集的处理、数据加密解密、压缩解压缩等操作。网络请求：在 Web Worker 中进行网络请求，可以避免阻塞主线程。实时通信：处理 WebSocket 连接、接收服务器推送的数据等。计时器：使用计时器执行定时任务，避免主线程被占用。多线程协作：多个 Web Worker 之间相互通信和协作。限制：无法访问 DOM：Web Worker 无法直接访问主线...
在前端实现双令牌（又称刷新令牌和访问令牌）的无感刷新可以通过以下步骤实现：保存令牌：在用户登录成功后，将访问令牌（access token）和刷新令牌（refresh token）保存在客户端的本地存储中，如 sessionStorage 或 localStorage。访问令牌的过期时间：在保存访问令牌时，同时保存访问令牌的过期时间。定时刷新：在每次发送请求前，检查访问令牌是否过期。如果过期，则使用刷新令牌去获取新的访问令牌。为了避免同时发送多个刷新令牌请求，可以使用互斥锁或者请求队列来保证只有一个刷新令牌请求在进行中。处理刷新令牌响应：获取到新的访问令牌后，更新本地存储中的访问令牌和过...
你可以使用一个请求队列来控制并发请求的数量，确保同时只有指定个数的请求在执行。以下是一个简单的示例代码，使用 JavaScript 来实现：class RequestQueue { constructor(maxConcurrentRequests) { this.maxConcurrentRequests = maxConcurrentRequests; this.queue = []; this.activeRequests = 0; } add(request) { if (this.acti...
方法：使用css变量+sass变量+data-theme代码结构：设计三套主题分别定义不同的变量（包含颜色、图标和图片）// theme-default.scss /* 默认主题色-合作蓝色 */ [data-theme=default] { --color-primary: #516BD9; --color-primary-bold: #3347B6; --color-primary-light: #6C85E1; --color-primary-light-1: #C7D6F7; --color-primary-light-2: #c2d6ff; --color-primary-l...
结论：不能，但是可以通过 window.open() 或者 a 标签（target 不为_blank）的形式打开新标签，这时候可以共享sessionStorage。
参考链接：Vue3 模态类（Model）封装方案 - 实践参考链接：Vue3丨TS丨7 个思路封装一个灵活的 Modal 对话框
大文件上传和断点续传的流程前端大文件上传和断点续传的流程通常包括以下步骤：选择文件： 用户在前端界面选择要上传的大文件。计算文件哈希： 为了唯一标识文件并实现断点续传，前端通常会使用文件内容的哈希值作为文件的标识符。通过计算文件内容的哈希值，可以确保同一文件内容生成的哈希值是相同的，从而方便后续的断点续传。查询已上传的文件块： 在继续上传之前，前端会发送一个查询已上传文件块的请求到后端。这个请求用于获取已经上传成功的文件块列表，以便在继续上传时跳过已上传的部分。分块上传： 前端将大文件分割成多个块，并逐个上传到后端。通常情况下，每个文件块的大小是固定的，并且文件块的数量根据文件大小来确定...
基本原理远程桌面的实现原理基本上是将被控制端的屏幕图像和用户输入传输到控制端，并在控制端模拟用户的操作，从而实现远程控制的目的。具体实现原理取决于所使用的远程桌面协议和技术，以下是一般的工作流程：1. 图形渲染和捕获被控制端的桌面环境会不断渲染图像，并且需要定期捕获并发送这些图像到控制端。这一过程通常由一个特定的软件或驱动程序来完成，用于捕获屏幕上的图像并将其编码为适合传输的格式。2. 用户输入捕获控制端需要捕获用户在控制端的输入，例如键盘输入、鼠标移动和点击等。这些输入需要通过网络传输到被控制端，并模拟成真实的用户操作。3. 数据传输被控制端捕获的图像数据和控制端的用户输入会通过网络传...
最近评论