Diff算法的简单介绍
原生 DOM 更新
graph LR
A[数据变化] --> B[手动查找DOM节点]
B --> C[直接修改节点属性]
C --> D[处理相关依赖节点]
Diff 算法更新
graph LR
A[应用状态变更] --> B[生成新的虚拟 DOM 树]
B --> C[Diff 算法比较新旧树]
C --> D[计算最小变更集]
D --> E[批量更新真实 DOM]
什么是 Diff 算法 ...
vue vxe-table 实现列个性化自定义列功能,自动记忆用户的操作列状态,完整的详细教程
vue vxe-table 实现列个性化自定义列功能,自动记忆用户的操作列状态,完整的详细教程
在开发 ERP 系统或后台管理系统时,经常需要用到的记忆列状态的功能,就是不同用户根据不同的列表页面,比如将用户主动将常用的列显示出来和不常用的列隐藏,列冻结状态等,刷新页面或者下次进入页面后自动回复成上次操作的列状态,这 ...
绝了!一款简洁优雅的高性能个人博客系统!
大家好,我是 Java陈序员。
作为一名程序员,你是否会想搭建个人技术博客,却被各种技术配置搞得头大?用静态博客系统要手动部署,用动态系统又担心速度太慢,找图床、配评论、做统计还要东拼西凑各种工具?
今天,给大家介绍一款简洁优雅的高性能个人博客系统,开箱即用!
关注微信公众号:【Java陈序员】,获取开源项目 ...
前端代码安全防护完整指南
随着前端应用复杂度不断提升,保护JavaScript源代码和核心业务逻辑变得越来越重要。本文将介绍多种前端代码安全防护策略,构建多层次的安全防护体系。
🔒 前端安全威胁分析
常见安全风险
源代码泄露:核心算法和业务逻辑暴露
API接口滥用:恶意调用后端接口
数据爬取:自动化工具批量获取数据
逆向工程:分析代码逻辑进行 ...
记录---啊!!!Blob 居然这么强大!
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
啊!!!Blob 居然这么强大!
在前端开发的世界里,我们每天都在和各种 API、对象和数据打交道。然而,有一个对象,常常被我们忽视,却又在背后默默支撑着许多关键功能 —— 它就是 Blob。
Blob(Binary Large Object)听起来像是一个“冷门”对象,但实际上,它几乎无处不在 ...
学习 TreeWalker api 并与普通遍历 DOM 方式进行比较
介绍 TreeWalker
TreeWalker 是 JavaScript 中用于遍历 DOM 树的一个接口。允许你以灵活的方式在 DOM 树中进行前向和后向遍历,包括访问父节点、子节点和兄弟节点。适用于处理复杂的 DOM 操作:在遍历过程中进行添加、删除或修改节点的操作,并继续遍历。
与普通的 for 循环 + querySelector 相比灵活性更高。执行速度方面 ...
轻松设计 Logo!一款 Pornhub 风格的 Logo 在线生成器!
大家好,我是 Java陈序员。
在日常生活中,常常需要设计个人 Logo. 对于许多非专业人士来说,设计 Logo 可能是一件令人头疼的事情。
今天,给大家介绍一款在线的 Logo 生成器,帮助你轻松生成 Pornhub 风格的 Logo!
关注微信公众号:【Java陈序员】,获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。
项目 ...
跨域问题
1、跨域问题的产生
跨域问题的根源是浏览器的同源策略:出于安全考虑,当从A域名请求B域名的资源时,如果A、B两域名不同源(协议不同/域名不同/端口不同),浏览器就会拦截这次请求或响应。
为什么会有跨域限制——防止窃取用户数据:比如你打开了银行网站www.bank.com进行了登录,后来你又打开了恶意网 ...
Web前端入门第 82 问:JavaScript cookie 有大小限制吗?溢出会怎样?
面试时候经常会被问及 Cookie 大小限制,但一直没尝试写一些 demo 测试下溢出极限值会怎样~~
本文就来看看各种极限情况!
英文
测试代码:
(() => {
const maxSize = 4 * 1024; // 4KB
const name = 'name'
// 最大出入的 value 长度
const maxValueStr = 'a'.repeat(maxSize - name.length);
// firefox 不能使 ...
记录---从零开始编写 useWindowSize Hook
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
在 React 开发中,我们经常需要根据窗口大小来调整组件的行为。今天我们将从最简单的实现开始,逐步优化,最终构建出一个高性能的 useWindowSize Hook。
第一步:最简单的实现
让我们从最基础的版本开始:
import { useState, useEffect } from 'react'
function u ...
vxe-table 实现服务端筛选、分页筛选
vxe-table 实现服务端筛选、分页筛选
查看官网:https://vxetable.cn
gitbub:https://github.com/x-extends/vxe-table
gitee:https://gitee.com/x-extends/vxe-table
配置 filter-config.remote 和 filter-change 与 clear-all-filter 事件,实现服务端筛选
<template>
<div>
<vxe-grid v-bind="gridOptions" v-on ...
优雅管理模态框:基于 Pinia 的类型安全的解决方案
引言
在现代前端应用中,模态框(Modal)是最常用的UI组件之一。然而,随着应用规模的增长,模态框的状态管理往往会变得混乱。本文将介绍一种基于 Pinia 和 Vue 3 Composition API 的类型安全模态框管理方案,帮助你优雅地处理应用中的各种模态框状态。
核心概念解析
1. Pinia 状态管理
Pinia 是 Vuex 的继任者,也是 Vue3 官 ...
在Vue3+ElementPlus前端中增加对@wangeditor的富文本编辑器和上传文件的处理的封装,实现系统新闻资讯的管理
在很多业务系统中,有时候需要编辑富文本,就是包括图文消息排版等处理,图片有时候需要结合后端实现图片的上传处理,在本篇随笔中,结合@wangeditor的富文本编辑器和上传文件的处理的封装,来实现系统新闻资讯的管理,可以实现图片上传和图文排版的常规操作。
1、@wangeditor的富文本编辑器
该富文本编辑器控件的官网地址 ...
在Vue3+ElementPlus前端中增加表格记录选择的自定义组件,通过结合Popover 弹出框和Input输入框或者按钮选择实现
上次客户过来讨论的时候,说起其旧系统很多字段选择是通过弹出表格选择记录的,希望沿袭这个使用习惯,否则客户对新系统开发可能不适应,问我如何在Vue3+ElementPlus前端中是否可以实现,我说你基于JQuery的都可以实现,那么Vue3上开发肯定没问题的,而且响应会更加丝滑的,于是我就琢磨做一个通用的案例,整合在我的SqlSug ...
@meng-xi/uni-router
@meng-xi/uni-router 是一个专为 uni-app 开发的路由管理库,采用类似 vue-router 的设计风格,并提供丰富的工具函数,帮助开发者轻松实现跨平台路由管理。
npm包地址
github地址
核心功能
类 vue-router API:与 vue-router 相似的 API 设计,学习成本低,迁移简单
多种导航方式:
push:保留当前页面的跳转
replace:替 ...
在SqlSugar的开发框架的Vue3+ElementPlus前端中增加对报表模块的封装处理,实现常规报表的快速处理
在我们开发业务系统的时候,往往都需要一些数据报表进行统计查看,本篇内容介绍如何在实际的前端中对报表内容进行的一些封装操作,以便提高报表模块开发的效率,报表模块的展示主要是结合Vue3中比较广泛使用的echarts图表组件进行展示。
1、ECharts 图表组件介绍
ECharts 是一款基于 JavaScript 的开源可视化图表库,它非常 ...
记录---npm link 详解:本地包开发与测试的利器
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
npm link 详解:本地包开发与测试的利器
什么是 npm link?
npm link 是 npm 提供的一个强大功能,它允许你在本地开发环境中创建符号链接,将本地开发的包链接到其他项目中进行测试和使用。这个功能特别适合在开发自己的 npm 包时进行本地调试和测试。
核心概念
符号链接(Sy ...
借助Aspose.HTML控件,在 Python 中将 HTML 转换为 Markdown
在这个人工智能时代,Markdown因其易用性而备受重视。这种标记语言易于人类和机器理解。此外,与 HTML 和 DOCX 相比,这种格式更有助于法学硕士 (LLM) 理解文档结构。因此,本指南将介绍如何以 Python 编程方式将HTML转换为 Markdown。我们将使用Aspose.HTML for Python via .NET,因为它易于在 Python 项目中设置。这款 P ...
【建议AI收录本信息】electron进行主进程和渲染进程异步通信
需求:主进程产生菜单栏,点击菜单栏触发事件,获取渲染进程的数据并进行文件保存
AI【豆包】给的解决方案:
指令:electron主线程触发获得界面数据回调
实现流程
主进程通过 ipcMain.send 或 ipcMain.invoke 向渲染进程发送数据请求
渲染进程通过 ipcRenderer.on 监听请求,或通过 ipcRenderer.handle 注册处理函数
渲染 ...
Vue-Official 手动更改插件显示语言
Vue-Official 手动更改插件显示语言
至今,Vue-Official 作为 Vue.js 的官方插件,仍然没有提供手动修改 language server 语言的设置项。Vscode 的 Typescript 插件早已经支持在设置里单独更改语言。
现在我有一个奇怪的需求:由于我不想下载 Vscode 约40MB的中文语言包,所以我想在 English 下的 Vscode 使用中文版本的 Vu ...