08 2024 档案

摘要:.triangle{ width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:100px solid red } 阅读全文
posted @ 2024-08-23 21:19 最小生成树 阅读(8) 评论(0) 推荐(0) 编辑
摘要:防抖 (Debounce) 防抖的目的是在一系列连续的调用中,只有在最后一次调用后的一段时间内没有新的调用才会执行该函数。这对于一些需要在用户停止操作后才执行的场景非常有用,比如输入框的搜索建议。 function debounce(func, wait) { let timeout; return 阅读全文
posted @ 2024-08-23 21:15 最小生成树 阅读(16) 评论(0) 推荐(0) 编辑
摘要:HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>炫酷烟花 阅读全文
posted @ 2024-08-20 21:20 最小生成树 阅读(56) 评论(0) 推荐(0) 编辑
摘要:下拉菜单中的箭头通常用于提示用户点击以展开菜单。CSS三角形实现这个箭头: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width 阅读全文
posted @ 2024-08-20 20:40 最小生成树 阅读(8) 评论(0) 推荐(0) 编辑
摘要:通过结合@keyframes动画,让三角形实现旋转、移动等动态效果 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid 阅读全文
posted @ 2024-08-20 20:33 最小生成树 阅读(23) 评论(0) 推荐(0) 编辑
摘要:要用纯CSS绘制三角形,可以通过利用CSS中的border属性来实现。具体来说,核心原理是通过设置不同方向的边框颜色和宽度来形成三角形效果。以下是写技术博客时可以介绍的几个要点: 1. 三角形的基本原理 CSS三角形的关键在于设置一个元素的宽高为0,同时通过边框来创建三角形。例如: .triangl 阅读全文
posted @ 2024-08-20 20:30 最小生成树 阅读(80) 评论(0) 推荐(0) 编辑
摘要:React 和 Vue 都使用虚拟 DOM (Virtual DOM) 来实现高效的 UI 渲染。 1. 引言 介绍虚拟 DOM 的概念和重要性。 提到 React 和 Vue 都采用了虚拟 DOM 来优化视图更新过程。 2. 什么是虚拟 DOM? 定义虚拟 DOM:它是一种用 JavaScript 阅读全文
posted @ 2024-08-16 20:13 最小生成树 阅读(300) 评论(0) 推荐(0) 编辑
摘要:Redux 中间件的实现原理主要基于函数式编程思想和高阶函数。中间件用于在 Redux 的 dispatch 过程之间插入自定义逻辑,如日志记录、异步操作、调试工具等。 1. 什么是 Redux 中间件? 简要介绍 Redux 中间件的概念和用途。 解释中间件如何在 dispatch 动作和到达 r 阅读全文
posted @ 2024-08-16 20:07 最小生成树 阅读(99) 评论(0) 推荐(0) 编辑
摘要:1.1 在组件中使用计算属性监听 Vuex 状态 Vuex 状态可以通过计算属性映射到组件中,当 Vuex 状态发生变化时,计算属性也会自动更新。我们可以通过 Vue 的 watch 选项来监听计算属性的变化,从而监听 Vuex 中状态的变化。 <template> <div>{{ count }} 阅读全文
posted @ 2024-08-15 19:42 最小生成树 阅读(1508) 评论(0) 推荐(0) 编辑
摘要:Vue 的 Diff 算法是虚拟 DOM 实现中的核心部分,它在视图更新时比较新旧虚拟 DOM 树并高效更新实际 DOM。 一、什么是 Diff 算法? Diff 算法用于在虚拟 DOM 更新时,通过比较新旧两棵虚拟 DOM 树,找出最小差异并将这些变化应用到实际 DOM 上。Vue 采用了一种高效 阅读全文
posted @ 2024-08-15 19:36 最小生成树 阅读(134) 评论(0) 推荐(0) 编辑
摘要:在 Vue 中,自定义事件是父组件和子组件之间通信的重要方式。父组件可以监听子组件的事件,子组件则通过触发自定义事件将数据传递给父组件。如果子组件需要向父组件传递多个参数。 $emit 方法使用 一、场景介绍 假设我们有一个父组件和一个子组件。子组件需要通过自定义事件向父组件传递多个参数,比如 na 阅读全文
posted @ 2024-08-15 19:32 最小生成树 阅读(308) 评论(0) 推荐(0) 编辑
摘要:使用基础:创建一个简单的表单 使用 Element UI 创建一个基本的表单。 示例代码展示一个包含文本输入、选择框和提交按钮的表单。 <template> <el-form :model="form" label-width="120px"> <el-form-item label="用户名"> 阅读全文
posted @ 2024-08-14 17:55 最小生成树 阅读(57) 评论(0) 推荐(0) 编辑
摘要:一、React Router 基础 1.1 安装 React Router 要在项目中使用 React Router,首先需要安装: npm install react-router-dom 安装完成后,你可以在应用中使用 BrowserRouter、Route、Switch 等组件来实现路由功能。 阅读全文
posted @ 2024-08-14 17:51 最小生成树 阅读(317) 评论(0) 推荐(0) 编辑
摘要:OSI(Open Systems Interconnection)七层网络参考模型是一个国际标准化组织(ISO)定义的网络通信模型,用于描述计算机网络系统中的数据传输过程。OSI模型将网络通信过程分为七个独立的层次,每一层都有特定的功能和协议。通过这个模型,网络通信得以标准化,使得不同系统之间可以互 阅读全文
posted @ 2024-08-14 17:39 最小生成树 阅读(134) 评论(0) 推荐(0) 编辑
摘要:TCP三次握手和四次挥手详解 在网络通信中,TCP(传输控制协议)是一个非常重要的协议,用于确保数据在不可靠的网络环境中能够可靠传输。TCP通过三次握手(Three-way Handshake)建立连接,通过四次挥手(Four-way Termination)终止连接。 一、TCP三次握手 TCP的 阅读全文
posted @ 2024-08-14 17:29 最小生成树 阅读(291) 评论(0) 推荐(0) 编辑
摘要:1. WebSockets 原理 WebSockets 是 HTML5 标准的一部分,旨在为 Web 应用提供全双工通信能力。与传统的 HTTP 请求不同,WebSockets 连接一旦建立,就可以在客户端和服务器之间自由传输数据,而不再需要每次通信都重新建立连接。 工作流程: 建立连接:客户端通过 阅读全文
posted @ 2024-08-13 16:36 最小生成树 阅读(338) 评论(0) 推荐(0) 编辑
摘要:JavaScript 是一种单线程的编程语言,这意味着在同一时间只能执行一个任务。为了有效地处理并发操作,JavaScript 引入了事件循环(Event Loop)机制,其中宏任务(Macro Task)和微任务(Micro Task)在其中扮演着关键角色。 1. 什么是宏任务和微任务? 宏任务( 阅读全文
posted @ 2024-08-13 16:30 最小生成树 阅读(1143) 评论(0) 推荐(0) 编辑
摘要:在前端开发中,持久化数据存储是一个非常常见的需求。为了实现这一点,浏览器提供了多种方式,包括 Cookie、localStorage 和 sessionStorage。这三者各有优劣,适用于不同的场景 1. Cookie Cookie 是浏览器存储少量数据的一种机制,通常由服务器生成并发送到客户端。 阅读全文
posted @ 2024-08-13 16:25 最小生成树 阅读(567) 评论(1) 推荐(1) 编辑
摘要:基础技术 HTML5 语义化标签 本地存储(localStorage, sessionStorage) 离线存储(Application Cache) Web Workers WebSockets CSS3 Flexbox Grid 媒体查询 预处理器(Sass, LESS) CSS Modules 阅读全文
posted @ 2024-08-05 20:06 最小生成树 阅读(58) 评论(0) 推荐(1) 编辑
摘要:1.【对路由的理解】 Vue Router 是 Vue.js 官方的路由管理器,它用于构建单页面应用(SPA),允许我们在不同的页面间进行导航,而无需刷新整个页面。 路由配置文件代码如下: import {createRouter,createWebHistory} from 'vue-router 阅读全文
posted @ 2024-08-05 20:00 最小生成树 阅读(206) 评论(0) 推荐(0) 编辑
摘要:一、 说说你对 Fetch 的理解,它有哪些优点和不足? Fetch API 是现代 JavaScript 中用于进行网络请求的接口,旨在替代传统的 XMLHttpRequest。它提供了一种更简单、更灵活的方法来获取资源和与服务器进行交互。下面,我将详细介绍 Fetch 的优点和不足。 Fetch 阅读全文
posted @ 2024-08-05 19:39 最小生成树 阅读(348) 评论(0) 推荐(1) 编辑
摘要:前端性能优化不仅限于客户端的代码优化,还涉及到服务器端的优化。服务器优化对提升网站性能、减少延迟、提高用户体验至关重要。 服务器优化技术,包括减少 HTTP 请求、使用缓存策略、内容压缩、CDN 加速、服务器端渲染(SSR)、优化数据库查询等。 1. 减少 HTTP 请求 每次 HTTP 请求都会增 阅读全文
posted @ 2024-08-03 11:28 最小生成树 阅读(71) 评论(0) 推荐(0) 编辑
摘要:防抖(Debounce)和节流(Throttle)是两种常用的优化技术,主要用于控制高频率的事件触发,如滚动、输入、窗口调整大小等。本文将深入探讨防抖与节流的原理、实现方法及其应用场景。 简单场景就是:输入框防抖,滚动节流 1. 防抖(Debounce) 防抖是一种在事件频繁触发时,通过延迟执行来减 阅读全文
posted @ 2024-08-03 11:22 最小生成树 阅读(524) 评论(0) 推荐(0) 编辑
摘要:在前端开发中,性能优化是一个关键点,而样式优化则是性能优化中不可忽视的一环。 笔者给出一些样式优化措施,包括减少重绘和重排、CSS 选择器优化、使用 CSS 预处理器和后处理器、CSS Sprite、Critical CSS 等技术。 1. 减少重绘和重排 重绘(Repaint)和重排(Reflow 阅读全文
posted @ 2024-08-03 11:12 最小生成树 阅读(61) 评论(0) 推荐(0) 编辑
摘要:1. WebAssembly (Wasm) WebAssembly 是一种新兴的技术,它允许在浏览器中运行高性能的低级代码。WebAssembly 提供了一种可以在 Web 浏览器中运行的字节码格式,使得开发者可以用 C、C++、Rust 等语言编写代码,并将其编译为 WebAssembly,在浏览 阅读全文
posted @ 2024-08-02 19:48 最小生成树 阅读(91) 评论(0) 推荐(1) 编辑
摘要:包 (Closures) 闭包是 JavaScript 中一个非常强大的特性,它允许函数访问其外部作用域中的变量,即使在该函数被调用时,外部作用域已经执行完毕。闭包可以帮助我们实现数据的私有化、封装和模块化,使代码更简洁、易读和可维护。 闭包的定义 简单来说,闭包是指有权访问另一个函数作用域中变量的 阅读全文
posted @ 2024-08-02 19:40 最小生成树 阅读(161) 评论(0) 推荐(1) 编辑
摘要:模拟顺时针画矩阵的过程: 填充上行从左到右 填充右列从上到下 填充下行从右到左 填充左列从下到上 由外向内一圈一圈这么画下去 /** * 生成一个包含从1到n*n的数字的矩阵 * @param {number} n - 矩阵的大小,为正整数 * @return {number[][]} - 返回一个 阅读全文
posted @ 2024-08-02 19:22 最小生成树 阅读(17) 评论(0) 推荐(0) 编辑
摘要:1. Vue Hook 的理解 Vue Hook 是在 Vue 3 中引入的一种新的代码组织和状态管理方式,它受到了 React Hook 的启发。Vue Hook 主要通过组合式 API (Composition API) 来实现,让开发者能够更灵活、更高效地管理组件逻辑和状态。 2. Vue H 阅读全文
posted @ 2024-08-01 20:04 最小生成树 阅读(452) 评论(2) 推荐(0) 编辑
摘要:一、创建通用型表格的需求 实现一个通用型表格组件,具备以下功能: 动态列配置。 分页功能。 排序功能。 可扩展的行操作功能。 二、设计通用型表格组件 首先,需要设计一个基础的表格组件,它接受列配置、数据和分页信息等参数。 1. 创建 useTable Hook 在 src/hooks 目录下创建 u 阅读全文
posted @ 2024-08-01 20:04 最小生成树 阅读(232) 评论(0) 推荐(0) 编辑
摘要:一、什么是图片懒加载 图片懒加载(Lazy Loading)是一种在用户需要的时候(通常是滚动到可视区域)才加载图片的技术。通过这种方式,可以减少页面的初始加载时间,减少带宽消耗,提高用户体验。 二、Vue中使用Intersection Observer实现图片懒加载 Intersection Ob 阅读全文
posted @ 2024-08-01 20:04 最小生成树 阅读(88) 评论(2) 推荐(0) 编辑

点击右上角即可分享
微信分享提示