今日文章目录

• 需求说明
• 事前准备
• 重点说明
• 参考资料

DAY12练习ToDoList分类项目，遇到重复点击完成钮，资料无法同时在三种清单上同时更新。
昨晚想了一下，决定重新调整写法。所以今天一样是ToDoList奋斗日记

需求说明

• 三种页签清单：全部、未完成、已完成。
• 每个清单内的li都要可以重复点击完成钮，并同时更新对应分类。
• 新增 优先清单 标签：1、2、3

事前准备

• 清单资料都会依据阵列内的资料，去 render 视觉画面。

    const listData = [];         // 全部清单
    let unfinishedListData = []; // 未完成清单
    let finishedListData = [];   // 已完成清单

• 规划存放资料的架构如下：

const listData =[
    {
        id: 1, // 这次练习是用 Math.random() 产生随机数，但其实还是有可能重复。
        value: "Learn JS",
        status: "unfinished", // 筛选分类清单依据
        priority: 1, // 调整排列顺序依据
    },
    ...
];

• 步骤记录：
  1.拿到的资料，会先建立上方对应资料
  2.push加入listData
  3.依照 priority重新排列listData
  3.依据listData，筛选(filter)出未完成、已完成资料
  4.render 画面
  5.监听deleteBtn，参数传入：该li。点击执行以下动作：
  - 找到目标项目
  - 修改资料： listData
  - 修改样式： toDoList
  - 依据 修正後的 listData，重新筛选未完成、已完成资料
  - re-render 画面
• codepen 练习：https://codepen.io/chen-chens/pen/ExXXZMW?editors=0010
• 显示效果：
  
• 依照目前的写法，不管是在哪一页页签取消或点击完成钮，都会同步更新到相对应的清单分类中。也会将优先顺序较高的排列在最上面。

重点说明

• sort(compareFunction):
  • 作用对象：阵列
  • 用途：依照比对要求做排列。
  • 参数：compareFunction(optional)，函式会有两个参数代表作用阵列项目，依照比较内容做排序。
  • 返回值：修改後的原阵列
• filter((element, index, targetArray)=>{}):
  • 作用对象：阵列
  • 用途：依照测试函式，筛选出符合条件的所有元素。
  • 参数：一测试函式，该函式包含三个参数：
    • element：目前作用元素
    • index(optional)：目前作用元素索引
    • targetArray：作用阵列
  • 返回值：包含符合条件的***全新阵列***;如果没有一个符合，返回空阵列[]
• find((element, index, targetArray)=>{}):
  • 作用对象：阵列
  • 用途：依照测试函式，筛选出第一个符合条件的元素。
  • 参数：一测试函式，该函式包含三个参数：
    • element：目前作用元素
    • index(optional)：目前作用元素索引
    • targetArray(optional)：作用阵列
  • 返回值：如果有符合元素，返回第一个符合元素;如果没有一个符合，返回 undefined
• findIndex((element, index, targetArray)=>{}):
  • 作用对象：阵列
  • 用途：依照测试函式，筛选出第一个符合条件的元素索引。
  • 参数：一测试函式，该函式包含三个参数：
    • element：目前作用元素
    • index(optional)：目前作用元素索引
    • targetArray(optional)：作用阵列
  • 返回值：如果有符合元素，返回第一个符合元素索引;如果没有一个符合，返回 -1

参考资料

• How to Bind Event Listeners to Dynamically-Created Elements in JavaScript
• MDN - Array.prototype.filter()
• MDN - Array.prototype.sort()
• MDN - Array.prototype.find()
• MDN - Array.prototype.findIndex()

明日预告：