原生JS实现TodoMVC与Vue对比实战

1. 项目概述与核心价值

TodoMVC作为前端开发领域的"Hello World"，是检验开发者基本功的绝佳试金石。这个项目看似简单，却完整覆盖了数据管理、DOM操作、事件处理等核心技能点。我选择纯原生JavaScript实现，是因为在框架盛行的当下，回归原生能真正夯实基础。同时提供Vue对比版本，帮助开发者理解框架背后的设计思想。

我曾面试过上百名前端候选人，发现能徒手实现TodoMVC的不足20%。通过这个教程，你将掌握：

• 原生JS模块化开发实践
• 符合MVC架构的代码组织
• 工业级的状态管理方案
• 框架与原生实现的本质区别

2. 环境准备与项目结构

2.1 基础环境配置

虽然纯原生项目不需要构建工具，但我仍推荐以下现代开发环境：

bash复制mkdir todo-mvc && cd todo-mvc
touch index.html style.css app.js

使用Live Server插件运行项目（VS Code可直接安装），这比直接打开HTML文件更接近真实开发场景。注意在HTML中正确引入资源：

html复制<link rel="stylesheet" href="style.css">
<script src="app.js" type="module"></script>

关键细节：使用type="module"启用ES6模块系统，这是现代JS开发的起点

2.2 MVC架构设计

典型的TodoMVC包含以下模块：

code复制src/
├── model.js    # 数据状态管理
├── view.js     # DOM渲染层  
├── controller.js # 业务逻辑
└── store.js    # 本地持久化

这种分离带来三大优势：

1. 数据与UI解耦
2. 职责单一便于维护
3. 可独立测试各模块

3. 核心功能实现详解

3.1 状态管理实现

Model层的核心是维护todos数组和操作它的方法：

javascript复制class TodoModel {
  constructor() {
    this.todos = JSON.parse(localStorage.getItem('todos')) || []
  }
  
  addTodo(text) {
    this.todos = [...this.todos, {
      id: Date.now(),
      text,
      completed: false
    }]
    this._commit()
  }
  
  _commit() {
    localStorage.setItem('todos', JSON.stringify(this.todos))
  }
}

踩坑提醒：直接修改数组不会触发视图更新，必须创建新引用

3.2 视图渲染优化

避免全量DOM更新的关键技巧：

javascript复制function renderTodoList(todos) {
  // 使用DocumentFragment减少重绘
  const fragment = document.createDocumentFragment()
  
  todos.forEach(todo => {
    const li = document.createElement('li')
    li.dataset.id = todo.id
    li.innerHTML = `
      <input type="checkbox" ${todo.completed ? 'checked' : ''}>
      <label>${todo.text}</label>
      <button class="destroy"></button>
    `
    fragment.appendChild(li)
  })
  
  // 一次性更新DOM
  listEl.innerHTML = ''
  listEl.appendChild(fragment)
}

3.3 事件委托实战

高效处理动态元素事件的经典模式：

javascript复制document.addEventListener('click', e => {
  if (e.target.matches('.destroy')) {
    const id = Number(e.target.closest('li').dataset.id)
    controller.removeTodo(id)
  }
  
  if (e.target.matches('input[type="checkbox"]')) {
    const id = Number(e.target.closest('li').dataset.id)
    controller.toggleTodo(id)
  }
})

4. Vue对比版本实现

4.1 框架带来的改变

同样的功能用Vue实现：

javascript复制new Vue({
  data: {
    todos: JSON.parse(localStorage.getItem('todos')) || [],
    newTodo: ''
  },
  
  methods: {
    addTodo() {
      this.todos.push({
        id: Date.now(),
        text: this.newTodo,
        completed: false
      })
      this.saveTodos()
    }
  }
})

核心差异对比：

4.2 框架原理剖析

Vue的双向绑定本质上是基于：

1. Object.defineProperty的getter/setter
2. 依赖收集系统
3. 异步更新队列

理解这些机制后，我们可以用原生JS模拟类似行为：

javascript复制function defineReactive(obj, key) {
  let value = obj[key]
  
  Object.defineProperty(obj, key, {
    get() {
      return value
    },
    set(newVal) {
      value = newVal
      render() // 数据变化触发更新
    }
  })
}

5. 性能优化与调试技巧

5.1 内存管理要点

动态创建的DOM元素必须正确清理：

javascript复制// 错误示例：直接删除父元素
listEl.innerHTML = '' 

// 正确做法：移除事件监听后再删除
function clearList() {
  Array.from(listEl.children).forEach(child => {
    child.removeEventListener('click', handleClick)
    child.remove()
  })
}

5.2 调试工具进阶用法

Chrome DevTools的实用技巧：

1. 使用monitorEvents监听DOM事件
2. 设置DOM断点追踪元素变化
3. 用Performance面板分析渲染耗时

典型的内存泄漏排查流程：

1. 录制堆内存快照
2. 执行可疑操作
3. 比较前后快照差异
4. 查看保留树(Retaining Tree)

6. 工程化扩展方向

6.1 测试方案设计

针对Model层的单元测试示例：

javascript复制describe('TodoModel', () => {
  let model
  
  beforeEach(() => {
    localStorage.clear()
    model = new TodoModel()
  })
  
  test('addTodo should create new todo', () => {
    model.addTodo('Test todo')
    expect(model.todos.length).toBe(1)
  })
})

6.2 构建工具集成

即使原生项目也可以引入现代工具链：

javascript复制// vite.config.js
export default {
  build: {
    rollupOptions: {
      input: './index.html'
    }
  }
}

这样能获得：

• 模块热更新(HMR)
• CSS预处理器支持
• 生产环境代码压缩

7. 常见问题解决方案

7.1 状态同步问题

当多个视图依赖同一数据时，采用发布-订阅模式：

javascript复制class EventBus {
  constructor() {
    this.events = {}
  }
  
  on(event, callback) {
    this.events[event] = this.events[event] || []
    this.events[event].push(callback)
  }
  
  emit(event, data) {
    this.events[event]?.forEach(cb => cb(data))
  }
}

// 使用示例
bus.emit('todos-updated', newTodos)

7.2 移动端适配陷阱

触摸事件处理的特殊考量：

javascript复制// 区分点击和滑动
let startX, startY

element.addEventListener('touchstart', e => {
  startX = e.touches[0].clientX
  startY = e.touches[0].clientY
})

element.addEventListener('touchend', e => {
  const diffX = Math.abs(e.changedTouches[0].clientX - startX)
  const diffY = Math.abs(e.changedTouches[0].clientY - startY)
  
  if (diffX < 10 && diffY < 10) {
    // 视为点击事件
  }
})

8. 项目进阶路线

完成基础实现后，建议尝试：

1. 添加路由管理（如hash路由）
2. 实现撤销/重做功能
3. 接入IndexedDB替代localStorage
4. 开发Chrome插件版本

每个扩展方向都会涉及新的技术点：

• 路由管理需要理解History API
• 撤销功能需要掌握命令模式
• IndexedDB涉及异步数据库操作
• 插件开发需要了解Chrome API

我在实际项目中发现，完整实现TodoMVC所需的知识量，已经覆盖了前端开发80%的日常工作场景。这也是为什么它成为检验开发者能力的经典考题。