javaScript学习计划(Day26-30)

第三阶段：原理 + 实战 + 工程化（Day 21--30）

Day 26：综合项目实战（一）--- Todo List 基础

简介

构建一个 Todo List 可以练习：

DOM 操作
事件绑定
数据与视图同步

示例代码

js 复制代码

// HTML: <input id='todoInput'><button id='addBtn'>Add</button><ul id='todoList'></ul>
let todos = [];
const input = document.getElementById('todoInput');
const btn = document.getElementById('addBtn');
const list = document.getElementById('todoList');

btn.onclick = function(){
  const val = input.value.trim();
  if(val){
    todos.push(val);
    render();
    input.value = '';
  }
}

function render(){
  list.innerHTML = '';
  todos.forEach((todo, idx)=>{
    const li = document.createElement('li');
    li.textContent = todo;
    list.appendChild(li);
  });
}

工程提示

分离数据和 DOM 渲染
render 函数用于统一更新视图

Day 27：综合项目实战（二）--- 增删改查功能

简介

在 Todo List 上加上删除和修改功能，练习数组操作和事件委托。

示例代码

js 复制代码

list.onclick = function(e){
  const li = e.target;
  const index = Array.from(list.children).indexOf(li);
  if(index > -1){
    // 删除项
    todos.splice(index,1);
    render();
  }
}

// 修改示例
function editTodo(index, newVal){
  todos[index] = newVal;
  render();
}

工程提示

使用事件委托提高性能
删除和修改时同步更新数组

Day 28：综合项目实战（三）--- 本地存储和持久化

简介

使用 localStorage 保存 Todo List，实现页面刷新后数据不丢失。

示例代码

js 复制代码

// 保存
function saveTodos(){
  localStorage.setItem('todos', JSON.stringify(todos));
}

// 读取
function loadTodos(){
  const data = localStorage.getItem('todos');
  if(data) todos = JSON.parse(data);
}

loadTodos();
render();

// 每次操作后保存
btn.onclick = function(){
  const val = input.value.trim();
  if(val){
    todos.push(val);
    saveTodos();
    render();
    input.value = '';
  }
}

工程提示

localStorage 容量有限
JSON.stringify / parse 常用在本地存储

Day 29：代码优化与重构

简介

重构 Todo List，提高可维护性、可扩展性。

对比：原始 vs 重构

特性	原始	重构
render 功能	直接 innerHTML	分离创建元素与渲染逻辑
数据操作	散乱	集中管理 todos 数组
可扩展性	差	好，可加状态或优先级

示例代码

js 复制代码

function createTodoItem(todo){
  const li = document.createElement('li');
  li.textContent = todo;
  const delBtn = document.createElement('button');
  delBtn.textContent = 'Delete';
  delBtn.onclick = ()=>{
    const index = todos.indexOf(todo);
    todos.splice(index,1);
    saveTodos();
    render();
  };
  li.appendChild(delBtn);
  return li;
}

function render(){
  list.innerHTML = '';
  todos.forEach(todo=>list.appendChild(createTodoItem(todo)));
}

工程提示

封装函数提高复用
DOM 操作尽量模块化

Day 30：总结与下一步规划

简介

复盘整个 30 天学习计划，总结经验，规划下一步。

学习收获

JavaScript 基础、DOM、事件、异步、面向对象
ES6+ 新语法、模块化、工程化实践
简单项目实战（Todo List）

示例代码 --- 组件化思路演示

js 复制代码

// 封装一个计数器组件
function Counter(elId){
  let count = 0;
  const el = document.getElementById(elId);
  const btn = document.createElement('button');
  btn.textContent = 'Click';
  const span = document.createElement('span');
  span.textContent = count;
  btn.onclick = ()=>{
    count++;
    span.textContent = count;
  };
  el.appendChild(btn);
  el.appendChild(span);
}

Counter('counterContainer');