JavaScript 通用排序函数设计与实现：优化重复代码模式

// 原始的按标题排序函数
function sortTitle(array) {
  return array.sort((a, b) => {
    const titleA = a.title.toUpperCase();
    const titleB = b.title.toUpperCase();
    return (titleA > titleB) - (titleA < titleB); // 简化比较
  });
}

// 原始的按日期排序函数
function sortDate(array) {
  return array.sort((a, b) => {
    return (a.duedate > b.duedate) - (a.duedate < b.duedate); // 简化比较
  });
}

// 原始的按优先级排序函数
function sortPrio(array) {
  return array.sort((a, b) => {
    return (a.prio > b.prio) - (a.prio < b.prio); // 简化比较
  });
}

/**
 * 通用排序函数，根据指定的键提取函数对数组进行排序。
 * 该函数返回一个新数组，不修改原数组。
 *
 * @param {Array<Object>} array 待排序的数组。
 * @param {Function} keyFn 一个函数，接受数组中的一个元素，返回用于排序的键值。
 *                         例如：item => item.title.toUpperCase() 或 item => item.duedate。
 * @returns {Array<Object>} 排序后的新数组。
 */
const sortBy = (array, keyFn) => array
    // 步骤1: 映射 - 提取键值，创建 [键值, 原始元素] 对
    .map(item => [keyFn(item), item])
    // 步骤2: 排序 - 根据键值对对进行排序
    .sort((a, b) => {
        const keyA = a[0]; // 第一个元素的键值
        const keyB = b[0]; // 第二个元素的键值
        // 简洁的比较函数：
        // 当 keyA > keyB 返回 1
        // 当 keyA < keyB 返回 -1
        // 当 keyA === keyB 返回 0
        return (keyA > keyB) - (keyA < keyB);
    })
    // 步骤3: 还原 - 提取排序后的原始元素
    .map(pair => pair[1]);

let todos = [
    { title: 'Buy Milk', duedate: 8, prio: 2 },
    { title: 'Learn JavaScript', duedate: 9, prio: 1 },
    { title: 'Write Report', duedate: 7, prio: 3 },
    { title: 'Read Book', duedate: 6, prio: 1 },
    { title: 'Attend Meeting', duedate: 10, prio: 2 },
];

// 注意：对于字符串排序，如果需要忽略大小写，应在 keyFn 中进行转换
const sortedByTitle = sortBy(todos, item => item.title.toUpperCase());
console.log("按标题排序:", sortedByTitle);
/* 输出示例 (顺序可能因实际数据而异):
[
  { title: 'Attend Meeting', duedate: 10, prio: 2 },
  { title: 'Buy Milk', duedate: 8, prio: 2 },
  { title: 'Learn JavaScript', duedate: 9, prio: 1 },
  { title: 'Read Book', duedate: 6, prio: 1 },
  { title: 'Write Report', duedate: 7, prio: 3 }
]
*/

const sortedByDate = sortBy(todos, item => item.duedate);
console.log("按日期排序:", sortedByDate);
/* 输出示例:
[
  { title: 'Read Book', duedate: 6, prio: 1 },
  { title: 'Write Report', duedate: 7, prio: 3 },
  { title: 'Buy Milk', duedate: 8, prio: 2 },
  { title: 'Learn JavaScript', duedate: 9, prio: 1 },
  { title: 'Attend Meeting', duedate: 10, prio: 2 }
]
*/

const sortedByPrio = sortBy(todos, item => item.prio);
console.log("按优先级排序:", sortedByPrio);
/* 输出示例:
[
  { title: 'Learn JavaScript', duedate: 9, prio: 1 },
  { title: 'Read Book', duedate: 6, prio: 1 },
  { title: 'Buy Milk', duedate: 8, prio: 2 },
  { title: 'Attend Meeting', duedate: 10, prio: 2 },
  { title: 'Write Report', duedate: 7, prio: 3 }
]
*/

// 假设 titleSort, dateSort, prioSort 是 DOM 元素
// cleanTodo() 和 showTodos() 是更新UI的函数

titleSort.addEventListener("click", () => {
    // sortBy 返回一个新数组，因此需要重新赋值给 todos 或处理新数组
    todos = sortBy(todos, item => item.title.toUpperCase());
    cleanTodo(); // 清理旧的UI显示
    showTodos(); // 渲染排序后的待办事项
});

dateSort.addEventListener("click", () => {
    todos = sortBy(todos, item => item.duedate);
    cleanTodo();
    showTodos();
});

prioSort.addEventListener("click", () => {
    todos = sortBy(todos, item => item.prio);
    cleanTodo();
    showTodos();
});