36、共享待办事项列表的实现与优化

共享待办事项列表的实现与优化

1. 待办事项列表的基本结构与页面加载

在待办事项列表应用中，每个待办事项会生成一个包含复选框的字符串，例如：

<li><input type='checkbox' onClick="readyMarkDone('odysseus', 2);"> Beat Troy</li>

当点击复选框时，会调用 readyMarkDone() 函数，该函数用于将事项标记为已完成，并将其从待办列表移动到已完成列表。此函数有两个参数：要更新的列表名称和要更新的事项编号。

完成待办事项的遍历后，会开始遍历已完成事项。这个循环与待办事项的循环类似，只是它会遍历 doneitems 元素内的所有事项，并打印出一个复选框，点击该复选框会调用 readyMarkUndone() 函数，将事项从已完成列表移回到待办列表。

将内容添加到网页的过程如下：
- 两个循环结束后，会将介绍性文本、待办事项列表和已完成事项列表放入 contentArea div 中。
- 接着会添加一个表单（包含输入框和按钮），点击添加按钮会调用 addNewItem() 函数，将新事项添加到待办列表中。
- 最后会启动一个超时函数，与之前的超时函数类似，但它调用的是 updateTodoIfChanged() 而不是 updateUs