- 博客(59)
- 收藏
- 关注
RSS订阅原创 代理与反射
使用代理的主要目的是可以定义捕获器。捕获器是定义在处理程序对象中的特殊方法，用于拦截并自定义目标对象的各种操作。当我们通过代理对象（Proxy实例）对目标对象执行某些操作（如访问属性、修改属性、调用函数等）时，对应的捕获器会先被触发，开发者可以在捕获器中编写自定义逻辑（如验证、日志、拦截等），再决定是否将操作转发给目标对象。例如，可以定义一个 get()捕获器，在 ECMAScript 操作以某种形式调用 get() 时触发。foo: 'bar'// 捕获器在处理程序对象中以方法名为键。
2025-09-23 22:36:06
633
原创 对象、类与面向对象编程
在一个对象上同时定义多个属性的可能性是非常大的。为此，ECMAScript 提供了 Object.defineProperties()方法。这个方法可以通过多个描述符一次性定义多个属性。它接收两个参数：要为之添加或修改属性的对象和另一个描述符对象，其属性与要添加或修改的属性一一对应。
2025-09-22 17:45:55
708
原创 迭代器与生成器
此时的yield 关键字有点像函数的中间返回语句，它生成的值会出现在 next()方法返回的对象里。不管这些集合内部是如何存储数据的（比如数组是连续内存，链表是离散节点），我们都能通过相同的方式（迭代器）依次访问其中的元素，而不用关心其内部实现细节。一个实现 Iterator 接口的对象一定有 next() 方法，还有一个可选的 return()方法用于提前终止迭代器。可迭代对象本身不负责遍历，它的职责是 “提供遍历工具”—— 当引擎需要遍历它时，它能生成一个迭代器，让迭代器去完成具体的遍历工作。
2025-09-17 22:05:26
1039
原创 集合引用类型
indexOf() 和 includes() 方法从数组前头（第一项） 开始向后搜索，而 lastIndexOf() 从数组末尾（最后一项）开始向前搜索。它首先会创建一个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组。如果有两个参数，则 slice()返回从开始索引到结束索引对应的所有元素，其中不包含结束索引对应的元素。默认情况下，sort()会按照升序重新排列数组元素，即最小的值在前面，最大的值在后面。视图有不同的类型，但引用的都是 ArrayBuffer 中存储的二进制数据。
2025-09-17 10:31:14
749
原创 基本引用类型
而 substring()方法会将第二个参数转换为 0，相当于调用 substring(3, 0)，等价于 substring(0, 3)，这是因为这个方法会将较小的参数作为起点，将较大的参数作为终点。与 concat()方法一样，slice()、substr() 和 substring()也不会修改调用它们的字符串，而只会返回提取到的原始新字符串值。调用 exec()后找到了一个匹配项。数组的第一个元素是匹配的整个字符串，第二个元素是匹配第一个捕获组的字符串，第三个元素是匹配第二个捕获组的字符串。
2025-09-10 10:36:05
705
原创 JavaScript变量、作用域与内存
JavaScript 变量可以保存两种类型的值：原始值和引用值。原始值可能是以下 6 种原始数据类型之 一：Undefined、Null、Boolean、Number、String 和 Symbol。原始值和引用值有以下特点：原始值大小固定，因此保存在栈内存上。从一个变量到另一个变量复制原始值会创建该值的第二个副本。引用值是对象，存储在堆内存上。包含引用值的变量实际上只包含指向相应对象的一个指针，而不是对象本身。从一个变量到另一个变量复制引用值只会复制指针，因此结果是两个变量都指向同一个对象。
2025-09-06 17:13:11
612
原创 HTML中的JavaScript
要包含外部 JavaScript 文件，必须将 src 属性设置为要包含文件的 URL。文件可以跟网页在同一台服务器上，也可以位于完全不同的域。所有<script>元素会依照它们在网页中出现的次序被解释。在不使用 defer 和 async 属性的情况下，包含在<script>元素中的代码必须严格按次序解释。对不推迟执行的脚本，浏览器必须解释完位于<script>元素中的代码，然后才能继续渲染页面 的剩余部分。为此，通常应该把<script>元素放到页面末尾，介于主内容之后及</body>标签 之前。
2025-09-05 16:40:10
838
原创 TypeScript
TypeScript 中的模块是相关变量、函数、类和接口的集合。在正常的TS项目开发过程中并不建议用命名空间，但通常在通过 d.ts 文件标记 js 库类型的时候使用命名空间，主要作用是给编译器编写代码的时候参考使用。：命名空间一个最明确的目的就是解决重名问题，命名空间定义了标识符的可见范围，一个标识符可在多个名字空间中定义，它在不同名字空间中的含义是互不相干的。用户定义的：它包括枚举(enums)，类(classes)，接口(interfaces)，数组(arrays)和元组(tuple)。
2025-05-14 12:11:22
964
原创 性能优化八股文
这些节点通过中心平台调度，将用户所需的内容（如图片、视频、网页文件、API 数据等）缓存到离用户物理位置最近的节点上，从而缩短数据传输距离，减少延迟。（Code Splitting 的核心思想是：不将所有代码打包到一个文件中，而是根据路由、组件或功能需求，将代码分割成多个独立的文件（chunks），并在需要时动态加载。图片懒加载也叫延迟加载，只加载当前屏幕的图片，可视区域外的图片不会进行加载，只有当屏幕滚动的时候才加载。使用路由懒加载，在需要的时候才会进行加载，避免一次性加载太多路由，导致页面阻塞。
2025-05-13 22:00:17
899
原创 HTTP及浏览器八股
WebSocket 是一种在单个TCP 连接上实现全双工通信的网络协议，与传统的 HTTP 协议不同，HTTP是基于请求-响应模式，即客户端发送请求，服务器返回响应，然后连接关闭。如果客户端在规定时间内没有收到服务器的响应，或者服务器长时间未收到客户端的心跳消息，就可以判断连接可能出现了问题，进而采取相应的处理措施，如重新连接。：当浏览器接收到HTML文档后，它会解析HTML标签，将标签转换为DOM（文档对象模型）节点，并按照文档的结构将这些节点组织成一棵树形结构，即DOM树。），避免重复读取触发回流。
2025-05-11 16:51:31
1161
原创 工程化八股
Code Splitting代码分割，是一种优化技术。它允许将一个大的chunk拆分成多个小的chunk，从而实现按需加载，减少初始加载时间，并提高应用程序的性能。在Webpack中通过optimization.splitChunks配置项来开启代码分割。
2025-05-11 15:39:18
707
原创 Vue常问八股
computed：是计算属性，借助定义一个函数来返回计算结果。在模板中使用时，就像使用普通数据属性一样。watch：是监听器，用于监听数据的变化，并在数据变化时执行相应的回调函数。
2025-04-28 00:15:49
883
原创 面试常问八股
当事件触发时，返回一个新的函数，每次调用返回的函数，首先检查timer是否为null，若为null，说明距离上次执行已超过了设定的时间间隔，使用apply方法调用原始的目标函数func，并将当前的this上下文和传入的参数传给func，在调用func之后，设置一个新的定时器，延迟时间后执行回调函数，用clearTimeout（timer）。排和重绘，影响性能。批量更新：当有大量数据变化需要更新 DOM 时，虚拟 DOM 的 Diff 算法可以批量计算出需要更新的部分，然后一次性更新真实 DOM。
2025-04-26 20:57:37
544
原创 JS中获取 DOM 元素的常见方法
通过 CSS 选择器获取第一个匹配的元素，返回单个元素。通过 CSS 选择器获取所有匹配的元素，返回。属性获取一组元素，常用于表单元素（如。在文档中必须唯一，若页面中无此。属性获取唯一的 DOM 元素。通过标签名获取一组元素（如。通过类名获取一组元素。（静态类数组集合）。
2025-04-24 21:31:25
363
原创 CSS高频面试题
浮动元素脱离文档流后，原本占据的空间会被释放，后面的元素会向上移动并填充这个空间。但浮动元素仍然会影响周围元素的布局，尤其是文本内容，文本会围绕着浮动元素进行排列。不会在文档中创建新的元素，只是根据元素的现有状态或位置来应用样式。会在文档中创建虚拟的元素，这些元素虽然在 HTML 代码中不可见，但在渲染时会被视为元素的一部分。浮动元素会使周围的文本内容围绕它进行排列，这是浮动的一个重要特性，常用于实现文字环绕图片的效果。属性的元素会脱离正常的文档流，不再占据原来的空间，这可能会导致父元素高度塌陷。
2025-04-24 08:36:09
945
原创 前端如何实现懒加载优化：使用 Vue 的指令和生命周期函数，结合 IntersectionObserver API，实现数据和图表的精准懒加载，根据用户的操作和页面滚动情况，动态加载数据和图表，提升
【代码】前端如何实现懒加载优化：使用 Vue 的指令和生命周期函数，结合 IntersectionObserver API，实现数据和图表的精准懒加载，根据用户的操作和页面滚动情况，动态加载数据和图表，提升。
2025-04-12 14:45:12
352
原创 前端如何实现采用 流处理技术，将大文件以流的形式分段上传，同时优化服务器端的接收和存储逻辑，减少内存占用，提高上传效率。
前端的主要任务是将大文件切割成多个小块，然后依次上传这些小块。以下是一个使用原生 JavaScript 和。
2025-04-12 14:33:04
331
原创 前端如何实现使用 Websocket 技术，在用户编辑个人信息后，实时推送数据更新请求到后端，后端更新成功后返回确认信息，前端及时更新展示数据，保证数据一致性。
在前端使用 WebSocket 技术实现用户编辑个人信息后实时推送数据更新请求到后端，且在后端返回确认信息时及时更新展示数据，下面以 Vue 3 和原生 JavaScript 分别举例说明。
2025-04-12 14:26:35
479
原创 如何进行优化图片大小，减少 HTTP 请求数
对于页面上位于可视区域之外的图片，采用懒加载技术。这样可以减少初始加载时的 HTTP 请求数，提高首屏加载速度。确保图片的尺寸与在网页上显示的尺寸相匹配。如果图片原始尺寸过大，即使进行了压缩，文件大小仍然可能较大。对于一些非常小的图片（如图标），可以将其转换为 Base64 编码，然后直接嵌入到 HTML 或 CSS 中。属性，根据设备的屏幕尺寸和分辨率，提供不同尺寸的图片。这样可以避免在小屏幕设备上加载过大的图片，同时减少不必要的请求。属性来显示不同的图标。这样可以将多个小图标的请求合并为一个请求。
2025-04-12 14:19:04
398
原创 如何使用 Webpack 对资源进行压缩合并
执行完上述命令后，Webpack 会根据配置文件对项目中的资源进行压缩合并，并将打包后的文件输出到。首先要保证你已经安装了 Node.js 和 npm。接着创建一个新的项目目录，并在该目录下初始化。文件夹，并在其中创建。
2025-04-12 14:15:33
469
原创 运用 CSSkeyframes 结合 SVG路径动画实现动画效果
将路径的描边设置为虚线，虚线的长度和间隔均为 1000 像素。这里的 1000 是一个较大的值，使得路径看起来是连续的，但实际上是由一个很长的虚线组成。：设置虚线的偏移量为 1000 像素，初始时路径完全不可见，因为偏移量等于虚线的长度。：表示动画结束时，虚线的偏移量变为 0，即路径完全显示出来。的动画，动画持续时间为 5 秒，动画的播放速度是线性的，：设置 SVG 元素的宽度和高度均为 200 像素。：设置路径的描边宽度为 2 像素。：设置路径的描边颜色为黑色。：表示路径内部不填充颜色。
2025-04-12 14:11:18
365
原创 基于 Token 实现管理员与普通用户的身份识别及权限隔离，在前端 路由守卫中提取角色信息，动态控制路由跳转及管理员专属功能的可见性。
在用户登录成功后，后端会返回一个包含用户信息（如角色）的 Token。前端需要将 Token 存储在本地，通常使用。通过以上步骤，你可以实现基于 Token 的管理员与普通用户身份识别及权限隔离，确保系统的安全性。
2025-04-12 13:56:50
431
原创 防抖节流是什么？
防抖是指在一定时间内，只有最后一次触发事件才会执行相应的处理函数。如果在这个时间间隔内再次触发事件，那么计时会重新开始。比如搜索框的输入提示，当用户连续输入时，不会每次输入都触发请求，而是在用户停止输入一段时间后才触发请求。节流是指在一定时间内，只执行一次事件处理函数。即使在这个时间间隔内多次触发事件，也只会执行一次。例如滚动加载更多数据，无论用户滚动多快，在一定时间内只会触发一次加载数据的请求。都返回了一个新的函数，该函数会根据相应的规则来控制原函数的执行频率。在上述代码中，防抖函数。
2025-04-12 13:46:38
122
原创 浏览器渲染机制
浏览器渲染机制是一个复杂且关键的过程，它决定了网页如何在浏览器中呈现给用户。下面我将从构建 DOM 树、构建 CSSOM 树、合并渲染树、布局与绘制这几个核心步骤详细介绍浏览器渲染机制。
2025-04-11 23:58:59
1037
原创 如何实现响应式布局
除了手动编写 CSS 代码，还可以使用一些成熟的响应式框架，如 Bootstrap、Tailwind CSS 等。表示列的宽度会根据容器宽度自动调整，每列最小宽度为 200px，最大宽度为 1fr（即平均分配剩余空间）。Flexbox 是一种一维布局模型，它可以轻松地实现元素的水平和垂直排列，并且能够自适应不同的屏幕尺寸。CSS Grid 是一种二维布局模型，它可以创建复杂的网格结构，并且能够很好地适应不同的屏幕尺寸。在这个示例中，使用了 Bootstrap 的栅格系统，将容器设置为网格容器，
2025-04-11 23:52:45
402
原创 axios的原理
axios通过封装原生的 HTTP 请求对象，结合拦截器和 Promise 机制，提供了一个功能强大、易于使用的 HTTP 客户端。它的设计使得开发者可以方便地对请求和响应进行统一处理，提高了代码的可维护性和复用性。
2025-04-11 23:05:48
487
原创 Vue中的过滤器
全局过滤器可以在整个应用中使用，通过方法来定义（Vue 2.x 版本）。在 Vue 3.x 中，由于组合式 API 的引入，全局过滤器可以通过来设置。Vue 2.x 示例// 定义全局过滤器if (!});<template>Vue 3.x 示例data() {return {});// 定义全局过滤器if (!<template>
2025-04-11 22:48:59
316
原创 vue组件之间的通信方式
},methods: {console.log('接收到子组件的数据：', data);</script>-- 子组件 --><template><button @click="sendData">发送数据给父组件</button><script>methods: {const childData = '这是来自子组件的数据';
2025-04-11 22:38:39
391
原创 axios是怎么做封装的
在响应返回后进行一些操作，比如处理错误信息、解析响应数据等。：在请求发送前进行一些操作，比如添加请求头、处理请求参数等。：为了对请求和响应进行统一处理，我们会创建一个。等）进行封装，方便在项目中使用。：将常用的请求方法（如。：如果项目中还未安装。在项目中使用封装后的。时，只需引入封装好的。
2025-04-11 21:49:35
311
原创 keep-alive
keep-alive是 Vue.js 提供的一个内置组件，它的主要作用是对组件进行缓存，避免组件在切换时重复创建和销毁，从而提升组件的渲染性能，尤其是在那些需要频繁切换显示且初始化成本较高的组件场景中非常实用。
2025-04-11 17:21:37
345
原创 Vue中的修饰符
分别用于监听 Tab 键、删除键、Esc 键、空格键等。，像表单提交、链接跳转这类默认行为都能被阻止。才执行处理函数，而不会在子元素触发时执行。事件修饰符可用于调整事件处理的行为。按键修饰符可用于监听特定的按键事件。表单修饰符能改变表单输入绑定的行为。事件中同步输入框的值与数据。该修饰符使事件仅在事件绑定的元素。，即阻止事件向父元素传播。把输入的值转换为数字类型。，而非默认的冒泡阶段。修饰符保证事件处理函数。去除输入值首尾的空格。让事件在捕获阶段触发。
2025-04-11 16:41:08
165
原创 v-model双向绑定原理
v-model的本质是语法糖，它是:value和@input指令的结合。对于不同的表单元素，v-model的具体实现方式略有不同，但总体思路是将表单元素的值绑定到 Vue 实例的数据属性上，同时监听表单元素的输入事件，当用户输入时，更新 Vue 实例中的数据；当 Vue 实例中的数据发生变化时，更新表单元素的值。v-model通过结合数据绑定和事件监听，实现了表单元素和 Vue 实例数据的双向同步。不同的表单元素使用不同的属性（如valuechecked等）和事件（如inputchange。
2025-04-11 11:30:39
940
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人