智能Todo协作系统开发日志（二）：架构优化与安全增强

news2025/7/10 9:33:43

📅 2025年4月14日 | 作者：Aphelios380

🌟 今日优化目标

在原Todo单机版基础上进行三大核心升级：

组件化架构改造 - 提升代码可维护性
本地数据加密存储 - 增强隐私安全性
无障碍访问支持 - 践行W3C标准

一、组件化架构改造

1. 重构方案设计

2. 核心组件实现

TodoItem组件化示例

javascript

// components/TodoItem.js
export class TodoItem {
  constructor(todo, onUpdate) {
    this.todo = todo;
    this.onUpdate = onUpdate;
    this.element = this.create();
  }

  create() {
    const div = document.createElement('div');
    div.className = `item ${this.todo.completed ? 'completed' : ''}`;
    div.innerHTML = `
      <div>
        <input type="checkbox" ${this.todo.completed ? 'checked' : ''}>
        <span class="star">${this.todo.starred ? '⭐' : '☆'}</span>
        <span class="name">${this.todo.text}</span>
      </div>
      <div class="del" aria-label="删除任务">🗑️</div>
    `;
    this.bindEvents(div);
    return div;
  }

  bindEvents(container) {
    container.querySelector('input').addEventListener('change', () => {
      this.todo.completed = !this.todo.completed;
      this.onUpdate();
    });
    // 其他事件绑定...
  }
}

二、本地数据加密方案

1. 技术选型对比

方案	优点	缺点
AES-256	军事级加密强度	需管理密钥
Base64	简单易实现	非真正加密
Web Crypto API	浏览器原生支持	兼容性要求

最终选择 AES-256 + localStorage 组合方案（不怎么会，问的AI工具😖）

2. 加密模块实现

javascript

// utils/crypto.js
import CryptoJS from 'crypto-js';

const SECRET_KEY = import.meta.env.VITE_APP_SECRET;

export const encryptData = (data) => {
  return CryptoJS.AES.encrypt(
    JSON.stringify(data), 
    SECRET_KEY
  ).toString();
};

export const decryptData = (cipherText) => {
  const bytes = CryptoJS.AES.decrypt(cipherText, SECRET_KEY);
  return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
};

3. 状态管理改造

javascript

// stateManager.js
export class TodoState {
  constructor() {
    this.todos = this.load();
  }

  load() {
    const cipher = localStorage.getItem('todos');
    return cipher ? decryptData(cipher) : [];
  }

  save(todos) {
    localStorage.setItem('todos', encryptData(todos));
  }
}

三、无障碍访问优化

1. ARIA属性增强

<!-- 任务项增强示例 -->
<div class="item" 
     role="listitem"
     aria-labelledby="task-${id}"
     aria-describedby="status-${id}">
  <input type="checkbox" 
         aria-labelledby="task-${id}"
         aria-checked="${completed}">
  <span id="task-${id}">${text}</span>
  <span id="status-${id}" class="sr-only">
    ${completed ? '已完成' : '未完成'}
  </span>
</div>

2. 键盘导航支持

javascript

// 添加任务输入框支持回车
input.addEventListener('keydown', e => {
  if (e.key === 'Enter') addTodo();
});

// 任务项快捷键
document.addEventListener('keydown', e => {
  if (e.target.matches('.item') && e.key === 'Delete') {
    deleteTodo(e.target.dataset.id);
  }
});