说实话，咱们现在的技术环境，真的有点让人眼花缭乱。每天打开手机或电脑，各种新技术、新框架层出不穷。微信、微博、技术博客、GitHub……信息像潮水一样从四面八方涌来。这种碎片化的信息获取方式，kan似让我们学到了hen多，但到了深夜复盘时你有没有过那种“满目茫然”的感觉？

这种感觉就像武侠小说里的习武者，体内几道真气乱窜，却始终无法平衡。你收藏了无数教程，点赞了各种干货，但真要让你动手写个像样的功Neng，脑子里却是一团浆糊。这其实不是你不够努力，而是你的知识像散落在硬盘里的碎片文件，彼此孤立，无法对话。

今天我想带大家换个姿势。我们不再孤立地去背API，而是通过一个经典的“待办清单”项目，把数组操作本地存储以及那个让无数新手头秃的事件委托，一网打尽。这不仅仅是一段代码，geng是一次从碎片化输入到结构化输出的思维升级。

一、 为什么你的学习总是“断片”？

在敲代码之前，咱们得先聊聊心态。hen多同学在学习JavaScript时容易陷入一个误区：觉得背过了 mapfilter 的用法，或者kan过 localStorage 的文档，就算掌握了。但一遇到真实项目，比如“我要删除列表里的某一项”，瞬间就卡壳了。

这其实是因为缺乏系统的处理框架。计算机科学的知识体系就像一座精密运行的钟表，每一个齿轮dou必须严丝合缝地咬合。Ru果你手里只有一堆散落的齿轮，那是拼凑不出Neng走动的机械结构的。

我们要Zuo的，就是通过这个待办清单，把这些齿轮组装起来。你会发现，hen多中大型项目的基础模块，本质上dou长这个样子。每完成一个 ，你dou会对 JavaScript geng加自信，那种“我Neng掌控它”的感觉，真的会上瘾。

二、 数据结构设计：数组的艺术

任何应用的核心dou是数据。对于待办清单来说Zui直观的数据结构就是数组。但怎么设计这个数组里的对象，却是有讲究的。

咱们别搞那些花里胡哨的，每个待办项其实就只需要三样东西：

{
  id: Date.now,      // 唯一标识，千万别用下标，否则删除时容易乱套
  text: '学习JavaScript',  // 待办的内容
  completed: false     // 完成状态，布尔值搞定
}

整个应用的状态，本质上就是这样一个数组 todos。接下来的所有操作，无论是添加、删除还是筛选，其实dou是在跟这个数组打交道。这就是所谓的“数据驱动视图”的雏形——你只管把数据摆弄好，界面交给渲染函数去操心。

1. 动态过滤：别再手写 if-else 了

hen多新手在写“全部/未完成/Yi完成”筛选时喜欢写三个不同的渲染逻辑。其实大可不必。利用数组的 filter 方法，几行代码就Neng优雅地解决问题。

我们定义一个状态变量 currentFilter，然后在渲染的时候根据这个状态动态生成一个新的数组：

let currentFilter = 'all';
function render {
  // 第一步：根据筛选条件过滤
  let filtered = todos;
  if  {
    filtered = todos.filter;
  } else if  {
    filtered = todos.filter;
  }
  // 第二步：生成 HTML 字符串
  const html = filtered.map(todo => `
    

      
      ${escapeHtml}
      删除
    
  `).join;
  document.getElementById.innerHTML = html;
  // 第三步：统计信息
  const total = todos.length;
  const completedCount = todos.filter.length;
  document.getElementById.innerHTML = `共 ${total} 项，Yi完成 ${completedCount} 项`;
}

kan到没？只要数据变了调用一下 render，界面就自动geng新了。这种“声明式”的写法，比你去手动操作每一个 DOM 节点要清爽得多，也不容易出错。

三、 持久化存储：别让刷新键毁了你的努力

你有没有遇到过这种情况？好不容易写了一堆待办事项，手一抖刷新了页面瞬间回到解放前。这对于用户体验来说简直是灾难。

这时候，localStorage 就该登场了。它是浏览器自带的一个小型数据库，哪怕你关闭浏览器、关机重启，只要不清除缓存，数据就一直在那儿。

我们要Zuo的，就是在数据发生变化时顺手把它存进去；在页面刚加载时顺手把它读出来。

function loadTodos {
  const stored = localStorage.getItem;
  return stored ? JSON.parse : ;
}
function saveTodos {
  localStorage.setItem);
}

这里有个小细节：localStorage 只Neng存字符串。所以存的时候要用 JSON.stringify 把对象转成字符串，取的时候再用 JSON.parse 转回来。这就像打包行李和拆行李，虽然麻烦点，但为了东西不丢，值得。

四、 🔥 事件委托：新手必kan的“黑魔法”

好了现在到了Zui让新手头疼的部分：事件绑定。

你可Neng会想，这有什么难的？不就是个 addEventListener 吗？比如我想给每个“删除”按钮加个点击事件：

document.querySelector.addEventListener { ... })

这行代码写上去，运行一下——你会发现根本没反应！为啥？

因为代码执行的时候，页面上压根儿就没有 .delete-btn 这个元素。我们的列表是后来通过 render 动态渲染出来的。哪怕你把这段代码写在 render 之后每次重新渲染时旧的 DOM 会被替换掉，之前辛辛苦苦绑定的监听器也就跟着“灰飞烟灭”了。

生活类比：老板与员工

想象一下你是一个大老板，你手下有一堆临时工。这些临时工流动性hen大，今天来明天走。

Ru果你要给每个新来的临时工单独交代任务，那你得累死。而且一旦他们走了你交代的话也就白说了。

聪明的Zuo法是什么呢？你站在办公室门口大喊一声：“谁要是点了删除按钮，就自己把自己名字划了然后走人！”。不管临时工怎么换，你的这个指令一直挂在门口，随时生效。

代码实现：利用冒泡机制

在浏览器里点击一个子元素，事件会像气泡一样向上冒泡，一直传到父元素、祖先元素。我们利用这个机制，把监听器挂到Yi经存在的父容器 ul#todoList 上。

document.getElementById.addEventListener => {
  // e.target 是用户实际点击的Zui深层元素
  const target = e.target;
  // 关键方法：closest
  // 它会沿着祖先链向上查找，找到第一个匹配的 li
  const li = target.closest;
  if  return; // Ru果点的是空白处，直接忽略
  // 拿到当前项的 ID
  const id = Number;
  // 判断是不是点了删除按钮
  if ) {
    // 删除逻辑：过滤掉 id 匹配的项
    todos = todos.filter;
    saveTodos;
    render; // 重新渲染
    return;
  }
  // 判断是不是点了复选框
  if  {
    const todo = todos.find;
    if  {
      todo.completed = target.checked;
      saveTodos;
      render;
    }
  }
});

这就是事件委托的威力：只需一个监听器，就Neng管理未来所有动态生成的子元素。不管你后续怎么增删列表，这段代码dou稳如泰山。

五、 完整实战：把所有碎片拼起来

为了让大家kan得geng明白，我把所有功Neng整合在了一起。你Ke以直接复制下面的代码，保存为 .html 文件，用浏览器打开就Neng跑。这不仅仅是一个 Demo，geng是你理解现代 Web 开发模式的一块敲门砖。

    

        
        添加
    
    

        全部
        未完成
        Yi完成
    
    

六、 写在Zui后：从碎片到体系

完成这个项目后我希望你得到的不仅仅是一个Neng用的待办清单，而是一种系统化的思维方式。

以前，数组、存储、事件监听在你脑海里可Neng是一堆孤立的名词。现在你应该Nengkan到它们之间的联系了：数组是骨架，存储是记忆，事件委托是神经系统。它们共同构成了一个有机的生命体。

对于那些总是喊着“没时间学习”的朋友，我想说整块的时间固然宝贵，但碎片化的时间Ru果Neng被系统化的目标串联起来威力同样惊人。就像我们今天写的代码，每一行douhen简单，但组合在一起，就Neng解决复杂的问题。

别再满足于收藏夹里的吃灰教程了。动手去写，去改，去报错，去调试。哪怕每天只弄懂一个 filter 的用法，或者搞明白一次事件冒泡的原理，日积月累，你也Neng构建起属于自己的知识大厦。告别碎片化焦虑，从现在开始，让每一次学习dou成为坚实的基石。

---