当前位置：首页 > news >正文

TaskFlow开发日记 #1 - 原生JS实现智能Todo组件

news 来源：原创 2025/9/13 17:58:11

一、项目亮点

- 📌 **零依赖实现**：纯原生JavaScript + CSS3
- 📌 **数据持久化**：LocalStorage自动同步
- 📌 **交互优化**：收藏置顶 + 动态统计
- 📌 **响应式设计**：完美适配移动端
- 📌 **性能卓越**：事件委托 + 批量DOM操作

二、核心实现解析
1. 架构设计

2. 关键技术点

状态管理模块

javascript

// 状态初始化
let todos = JSON.parse(localStorage.getItem('todos')) || [];// 状态持久化
function saveAndRender() {localStorage.setItem('todos', JSON.stringify(todos));render();updateStats();
}

高效渲染策略

javascript

function render() {const sortedTodos = [...todos].sort((a, b) => b.starred - a.starred);DOM.list.innerHTML = sortedTodos.map(todo => `<div class="item ${todo.completed ? 'completed' : ''}" data-id="${todo.id}"><div><input type="checkbox" ${todo.completed ? 'checked' : ''}/><span class="star">${todo.starred ? '⭐' : '☆'}</span><span>${todo.text}</span></div><div class="del">🗑️</div></div>`).join('');
}

3. 性能优化技巧

事件委托：通过一个事件监听器处理所有列表交互

javascript

DOM.list.addEventListener('click', handleListClick);

CSS动画优化：使用transform实现高性能动画

css

.item:hover {transform: translateX(5px);transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

三、开发手记

遇到的挑战

状态同步问题：通过IIFE封装解决全局污染
渲染性能瓶颈：采用innerHTML批量更新替代逐项操作
收藏排序逻辑：使用sort(b.starred - a.starred)实现置顶

四、效果展示

提供的代码是一个简单的Todo应用，包含添加任务、本地存储、收藏功能、统计信息等。代码结构清晰，使用了IIFE封装，事件委托，以及CSS动画。代码中的关键部分，比如状态管理、事件委托、本地存储的使用，以及CSS动画。同时，我可能希望展示项目的演进，比如未来的计划TaskFlow 智联协同平台。

屏幕录制 2025-04-11 222923

相关文章：

TaskFlow开发日记 #1 - 原生JS实现智能Todo组件

一、项目亮点 - 📌 **零依赖实现**：纯原生JavaScript CSS3 - 📌 **数据持久化**：LocalStorage自动同步 - 📌 **交互优化**：收藏置顶动态统计 - 📌 **响应式设计**：完美适配移动端…...

编程日记 2025/9/13 17:58:11

es的告警信息

Elasticsearch（ES）是一个开源的分布式搜索和分析引擎，在运行过程中可能会产生多种告警信息，以提示用户系统中存在的潜在问题或异常情况。以下是一些常见的 ES 告警信息及其含义和处理方法： 集群健康状态告警信息示例…...

编程日记 2025/9/8 3:56:28

vue实现在线进制转换

vue实现在线进制转换主要功能包括： 1.支持2-36进制之间的转换。 2.支持整数和浮点数的转换。 3.输入验证（虽然可能存在不严格的情况）。 4.错误提示。 5.结果展示，包括大写字母。 6.用户友好的界面，包括下拉菜单、输…...

编程日记 2025/9/13 17:57:13

责任链设计模式（单例+多例）

目录 1. 单例责任链 2. 多例责任链核心区别对比实际应用场景单例实现多例实现初始化初始化责任链执行测试方法欢迎关注我的博客！26届java选手，一起加油💘💦👨‍🎓😄😂 最近在…...

编程日记 2025/9/13 17:55:09

Matlab 分数阶PID控制永磁同步电机

1、内容简介 Matlab 203-分数阶PID控制永磁同步电机可以交流、咨询、答疑 2、内容说明略 3、仿真分析略 4、参考论文略...

编程日记 2025/9/13 17:50:07

Java中LocalDateTime类

Java中的日期类 Date类LocalDateTime类创建LocalDateTime对象1 获取当前时间2 获取自己指定时间3 字符串创建日期获取当前日期的信息1获取当前日期的年月日时分秒2 获取当前日期周几\当年第几天\当月第几天3 获取当前⽇期所在周的周⽇和周⼀日期的运算1日期加减天数2 日期加…...

编程日记 2025/9/13 17:50:06

【C语言】--- 文件操作

文件操作 1. 为什么要使用文件2. 什么是文件2.1 程序文件2.2 数据文件2.3 文件名 3. 二进程文件和文本文件4. 文件的打开和关闭4.1 流和标准流4.1.1流4.2.2标准流 4.2 文件指针4.3 打开和关闭操作 5. 文件的顺序读写5.1 文件顺序读写函数5.1.1 fgetc 和 fputc5.1.2 fgets 和 fg…...

编程日记 2025/9/13 15:36:52

操作系统 4.4-从生磁盘到文件

文件介绍操作系统中对磁盘使用的第三层抽象——文件。这一层抽象建立在盘块（block）和文件（file）之间，使得用户可以以更直观和易于理解的方式与磁盘交互，而无需直接处理磁盘的物理细节如扇区（se…...

编程日记 2025/9/13 17:50:07

第六章进阶03 外包测试亮相

因为有年度重点项目，团队缺少测试资源，所以临时招聘了一个外包测试（后文用J代指），让产品经理亮亮来带她。到今天J差不多入职有1个月时间了，亮亮组了个会，一起评审下J做的测试用例。 J展示了其…...

编程日记 2025/9/7 18:41:55

如何使用通义灵码完成PHP单元测试 - AI辅助开发教程

一、引言在软件开发过程中，测试是至关重要的一环。然而，在传统开发中，测试常常被忽略或草草处理，很多时候并非开发人员故意为之，而是缺乏相应的测试思路和方法，不知道如何设计测试用例。随着 AI 技术的飞…...

编程日记 2025/9/13 17:51:58

使用 nano 文本编辑器修改 ~/.bashrc 文件与一些快捷键

目录使用 nano 编辑器保存并关闭文件使用 sed 命令直接修改文件验证更改如果你正在使用 nano 文本编辑器来修改 ~/.bashrc 文件，以下是保存并关闭文件的具体步骤： 使用 nano 编辑器保存并关闭文件打开 ~/.bashrc 文件在终端中运行以下命令&#xf…...

编程日记 2025/9/13 17:55:11

计算机组成原理——CPU与存储器连接例题

计算机组成原理——CPU与存储器连接例题设CPU共有16根地址线和8根数据线，并用(MREQ) ̅作为访存控制信号（低电平有效），(WR) ̅作为读/写命令信号（高电平读，低电平写）。现有下列存储芯片&#…...

编程日记 2025/9/13 17:56:20

SQL 外键（Foreign Key）详细讲解

1. 什么是外键？ 定义：外键是数据库表中的一列（或一组列），用于建立两个表之间的关联关系。外键的值必须匹配另一个表的主键（Primary Key）或唯一约束（Unique Con…...

编程日记 2025/9/13 17:53:51

B3647 【模板】Floyd

题目链接：点击进入题目思路代码 #include <bits/stdc.h> #define inf 0x3f3f3f3f using namespace std; const int maxn 1e6 10;int n,m,g[110][5000];int main() {ios::sync_with_stdio(false);cin.tie(0);cout.tie(0);cin>>n>>m;memse…...

编程日记 2025/9/13 17:55:09

配置镜像端口和观察接口

top： 在G0/0/2上抓包通过其他端口ping pc4 可以看到 Wireshark 抓包没有任何反应，做个镜像端口并配置（观察接口和镜像接口） observe-port interface g0/0/2 #命令配置观察端口mirror to observe-port both …...

编程日记 2025/9/13 17:49:45

爬虫解决debbugger之替换文件

鼠鼠上次做一个网站的时候，遇到的debbugger问题，是通过打断点然后编辑断点解决的，现在鼠鼠又学会了一个新的技能首先需要大家下载一个reres的插件，这里最好用谷歌浏览器先请大家看看案例国家水质自动综合监管平台这里我们只…...

编程日记 2025/9/13 17:55:11

erlang的安装-linux

1：解压 tar -zxvf 安装包 2：进入解压的目录执行： ./configure --prefix/usr/local/erlang --with-ssl --enable-threads --enable-smp-support --enable-kernel-poll --enable-hipe --without-javac 3：编译安装： m…...

编程日记 2025/9/11 19:44:09

Android Coil 3默认P3色域图加载/显示不出来

Android Coil 3默认P3色域图加载/显示不出来解决，需要在Androidmanifest.xml使用Coil 3的activity配置属性： <activityandroid:colorMode"wideColorGamut"...</activity>...

编程日记 2025/9/13 17:52:59

【LaTeX】安装

Register - Overleaf, 在线LaTeX编辑器注册Overleaf 安装 Latex2022 安装教程（附安装资源）_tex2022安装教程-CSDN博客注：先安装 texlive，再安装TexStudio \documentclass{article} % 这里是导言区 \begin{document}Hello, wor…...

编程日记 2025/9/11 0:56:22

【2025年认证杯数学中国数学建模网络挑战赛】A题解题建模过程与模型代码（基于matlab）

目录【2025年认证杯数学建模挑战赛】A题解题建模过程与模型代码（基于matlab）A题小行星轨迹预测解题思路第一问模型与求解第二问模型与求解【2025年认证杯数学建模挑战赛】A题解题建模过程与模型代码（基于matlab） A题小行星轨…...

编程日记 2025/9/4 10:52:58

【KWDB 创作者计划】KWDB 数据库全维度解析手册

——从原理到实践，构建下一代数据基础设施第一章：KWDB 设计哲学与技术全景 1.1 为什么需要 KWDB？ 在数据爆炸与业务场景碎片化的今天，传统数据库面临三大挑战：扩展性瓶颈（单机性能天花板&#xff…...

编程日记 2025/9/13 3:39:56

低代码开发能否取代后端？深度剖析与展望-优雅草卓伊凡

低代码开发能否取代后端？深度剖析与展望-优雅草卓伊凡在科技迅猛发展的当下，软件开发领域新思潮与新技术不断涌现，引发行业内外热烈探讨。近日，笔者收到这样一个颇具争议的问题：“低代码开发能取代后端吗&#xff1f…...

编程日记 2025/9/11 17:27:34

LeetCode hot 100—最长回文子串

题目给你一个字符串 s，找到 s 中最长的回文子串。示例示例 1： 输入：s "babad" 输出："bab" 解释："aba" 同样是符合题意的答案。示例 2： 输入：s "cb…...

编程日记 2025/9/10 18:31:56

蓝桥杯知识总结

文章目录 1.常用的数学方法2.大小写转换3.数组和集合排序数组排序集合排序 4.控制小数位数5.栈6.队列7.字符串相关方法8.十进制转n进制模板字符转为十进制某进制转化为十进制 9.前缀和10.差分11.离散化12.双指针13.二分14.枚举模板组合型枚举模板排列型枚举模板 15.搜索算法BFS…...

编程日记 2025/9/9 1:31:14

leetcode:2839. 判断通过操作能否让字符串相等 I（python3解法）

难度：简单给你两个字符串 s1 和 s2 ，两个字符串的长度都为 4 ，且只包含小写英文字母。你可以对两个字符串中的任意一个执行以下操作任意次： 选择两个下标 i 和 j 且满足 j - i 2 ，然后交换这个字符串中两个…...

编程日记 2025/9/13 12:11:59

Python Lambda表达式详解

Python Lambda表达式详解 1. Lambda是什么？ Lambda是Python中用于创建匿名函数（没有名字的函数）的关键字，核心特点是简洁。它适用于需要临时定义简单函数的场景，或直接作为参数传递给高阶函数（如map()、f…...

编程日记 2025/9/11 7:04:10

Matlab 平衡车的建模与控制

1、内容简介 Matlab 189-平衡车的建模与控制可以交流、咨询、答疑 2、内容说明略平衡车的建模与控制选择一款平衡车（如：小米九号平衡车等），并估计平衡车的关键参数。完成以下工作： 1. 建立平衡车模型&#xf…...

编程日记 2025/9/1 10:34:13

KWDB创作者计划—KWDB关系库与时序库混搭

📢📢📢📣📣📣 作者：IT邦德中国DBA联盟(ACDU)成员，10余年DBA工作经验 Oracle、PostgreSQL ACE CSDN博客专家及B站知名UP主，全网粉丝10万擅长主流Oracle、MySQL、PG、高斯…...

编程日记 2025/9/8 13:32:39

Android studio2024的第一个安卓项目

目录一、创建项目 1、创建Empty Views Activity类型项目 2、Android项目结构解析 manifests 目录： Gradle Scripts目录 3、创建安卓应用二、测试 1、模拟器测试效果 2、连接真机，然后直接选择真机运行即可（点击Run或Shift F10运行…...

编程日记 2025/9/1 13:57:30

航电系统之障碍物监测技术篇

航电系统的障碍物监测技术是保障飞行安全、提升飞行效率的核心技术之一，尤其在复杂环境和低空飞行中发挥着关键作用。以下从技术原理、传感器类型、数据处理与应用等方面进行系统介绍： 一、技术原理航电系统的障碍物监测技术通过多传感器融合和智能算法…...

编程日记 2025/9/12 16:49:43

网站DDoS防护方案——构建企业级安全屏障的关键路径

本文深度解析DDoS攻击最新演变趋势与防御技术体系，通过攻击特征图谱、云原生防护架构、混合防御模型等维度，揭示企业级网站防护方案的设计逻辑。结合2023年金融行业千万级QPS攻击事件，引用Gartner最新防御技术成熟度曲线，给出可落…...

编程日记 2025/9/10 13:59:53

Linux系统使用lshw生成硬件报告方法

使用 lshw 生成 HTML 硬件报告指南一、工具简介 lshw（List Hardware）是 Linux 系统下用于检测并报告硬件详细信息的命令行工具，支持输出多种格式（文本、HTML、XML 等）。核心功能：显示 CPU、内存、磁盘、PCI/USB 设备等完整硬件信息生成结构化报告，便于存档或分析支…...

编程日记 2025/9/9 21:16:46

力扣 905 按奇偶排序数组：双指针法的优雅实现

目录问题背景题目解析解题思路暴力解法双指针法代码实现代码解析算法效率实际应用场景总结问题背景在编程的世界里，数组排序问题一直是经典中的经典。今天我们要解决的是一个有趣的变种：按奇偶排序数组。题目要求我们将一个整数数…...

编程日记 2025/9/13 8:10:51

LeetCode hot 100—子集

题目给你一个整数数组 nums ，数组中的元素互不相同。返回该数组所有可能的子集（幂集）。解集不能包含重复的子集。你可以按任意顺序返回解集。示例示例 1： 输入：nums [1,2,3] 输出：[[],[1],[2…...

编程日记 2025/9/12 20:53:37

BERT - BertTokenizer, BertModel API模型微调

本节代码将展示如何在预训练的BERT模型基础上进行微调，以适应特定的下游任务。 ⭐学习建议直接看文章最后的需复现代码，不懂得地方再回看微调是自然语言处理中常见的方法，通过在预训练模型的基础上添加额外的层，并在特定任务的…...

编程日记 2025/9/5 21:13:50

通过代码获取接口文档工具

通过代码获取接口文档工具介绍使用到的技术使用说明核心源码演示截图工具源码介绍 1.通过前后端代码来生成规格化的接口文档 2.支持拖拽上传或点击选择文件，可以一次选择多个文件或选择文件夹 3.用户选择前后端代码，工具调用GPT解析，得到规…...

编程日记 2025/9/8 14:16:42

不再卡顿！如何根据使用需求挑选合适的电脑内存？

电脑运行内存多大合适？在选购或升级电脑时，除了关注处理器的速度、硬盘的容量之外，内存（RAM）的大小也是决定电脑性能的一个重要因素。但究竟电脑运行内存多大才合适呢？这篇文章将帮助你理解不同使用场景下适…...

编程日记 2025/9/7 20:17:46

leetcode589 N叉树的前序遍历

前序遍历的顺序是：根节点 -> 子节点1 -> 子节点2 -> ... -> 子节点N 递归： class Solution { private:void traverse(Node* cur, vector<int>& res){if(cur NULL) return;res.push_back(cur->val);for(Node* child: cur->…...

编程日记 2025/9/11 10:59:58

游戏引擎学习第216天

回顾并为当天做准备你可以看到，游戏现在正在运行。如果我没记错的话，我们之前把调试系统关闭了，留下一个状态，让任何想要在这段时间内进行实验的人可以自由操作，因为我们还没有完全完成这个系统。所以这样做是为了确…...

编程日记 2025/9/12 3:10:43

JavaSE反射机制干货

1.反射(Relection) 理解定义：程序运行状态,动态地获取程序信息及调用程序功能即为java反射机制 2.获取class对象掌握 2.1 Java代码的3个阶段 Java代码在计算机中经历的三个阶段:Source源代码阶段-Class类对象阶段-Runt…...

编程日记 2025/9/8 10:56:44

[特殊字符] 第十一讲 | 空间回归模型实战：SAR / SEM / GWR逐个击破

📘 专栏：科研统计方法实战分享 | 地学/农学人的数据分析工具箱 ✍️ 作者：平常心0715 🔑 本讲关键词：空间滞后模型（SAR）、空间误差模型（SEM）、地理加权回归（G…...

编程日记 2025/9/9 18:59:45

AI前沿周报：2025年3月技术深度解析

以下是基于2024-2025年AI技术前沿动态的深度技术周报示例，结合行业最新突破与研究进展，突出技术原理与应用场景分析： AI前沿周报：2025年3月技术深度解析时间范围：2025年3月1日-3月31日本期焦点：模型透明…...

编程日记 2025/9/12 9:40:13

aidigu开源微博项目程序，PHP开发的开源微博系统，自媒体个人创业、网盘推广首先

一、软件介绍文末提供程序和源码下载学习 PHP开发的开源微博系统，采用PHP MySQL开发，框架采用ThinkPHP5.1，用户登录后拥有专属ID，支持表情、关注用户，网盘分享等功能，支持图片上传,视频上传,网盘存储分享…...

编程日记 2025/9/10 1:26:46

Tabnet介绍（Decision Manifolds）和PyTorch TabNet之TabNetRegressor

Tabnet介绍（Decision Manifolds）和PyTorch TabNet之TabNetRegressor Decision ManifoldsTabNet1.核心思想2. 架构组成3. 工作流程4. 优点PyTorch TabNetTabNetRegressor参数1. 模型相关参数`n_d``n_a``n_steps``gamma``cat_idxs``cat_dims``cat_emb_dim`2. 训练相关参数`opti…...

编程日记 2025/9/7 18:18:59

格瑞普Tattu正式成为2025年中国无人机竞速联赛官方赞助商！

格瑞普Tattu正式成为2025年中国无人机竞速联赛官方赞助商! 为飞手赋能，为赛事护航! Tattu是深圳市格瑞普电池有限公司(Grepow)旗下的子品牌之一，专注为无人机、FPV和模型爱好者提供专业可靠的电池和充电器等一站式电源解决方案。凭借卓越的放电性能、稳…...

编程日记 2025/9/10 17:23:58

PySide6 监测设备变更事件

在PySide6中监听系统事件，判断是否有串口设备插拔，进而当串口状态变更时，实现列表数据实时更新。在Qt中，可以使用 nativeEvent 接口来完成这一操作： [virtual protected] bool QWidget::nativeEvent(const QByteArray…...

编程日记 2025/9/9 15:21:49

嵌入式系统的历史与发展

目录引言一、嵌入式系统的早期萌芽 1、首个现代嵌入式系统 2、早期未成形嵌入式系统的应用二、以单片机为主的初级阶段 1、工业领域应用 2、大型家电领域应用三、处理器升级与多样化应用阶段 1、数字化电子化设备涌现 （1）智能仪表…...

编程日记 2025/9/10 7:34:08

mysql调试记录

ALTER USER rootlocalhost IDENTIFIED WITH mysql_native_password BY password; 该命令在调试python使用pymysql连接数据库出现错误时， 报错为pymysql.err.OperationalError: (1045, "Access denied for user rootlocalhost (using password: NO)") m…...

编程日记 2025/9/1 13:56:11

【后端开发】Spring MVC阶段总结

文章目录快捷引入依赖lombok的使用Lombok依赖Lombok使用Lombok注解三层架构分层的目的MVC与分层的区别三层架构分层的好处企业命名规范常见命名命名风格介绍大驼峰风格小驼峰风格包名常见注解Cookie与Session 快捷引入依赖这个方法可以快捷引入依赖，但是引入依…...

编程日记 2025/9/11 3:11:16

netty-socketio + springboot 消息推送服务

netty-socketio springboot 消息推送服务后端1. 目录结构：代码pom文件：application.yml：SocketIOConfig：PushMessage：ISocketIOServiceSocketIOServiceImpl：pushMessageController：启动类&…...

编程日记 2025/9/10 11:08:37