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
    .map(item => [keyFn(item), item]) // 步骤1: 创建 [键值, 原始元素] 对
    .sort((a, b) => { // 步骤2: 根据键值进行排序
        const keyA = a[0];
        const keyB = b[0];
        // 简洁的比较逻辑：
        // 如果 keyA > keyB，结果为 1 - 0 = 1
        // 如果 keyA < keyB，结果为 0 - 1 = -1
        // 如果 keyA == keyB，结果为 0 - 0 = 0
        return (keyA > keyB) - (keyA < keyB);
    })
    .map(pair => pair[1]); // 步骤3: 还原为原始元素数组

const todos = [
    { id: 1, title: 'Learn JavaScript', duedate: new Date('2023-12-15'), prio: 2 },
    { id: 2, title: 'Build Todo App', duedate: new Date('2023-12-10'), prio: 1 },
    { id: 3, title: 'Refactor Sort', duedate: new Date('2023-12-20'), prio: 3 },
    { id: 4, title: 'Read Book', duedate: new Date('2023-12-12'), prio: 2 },
];

console.log('原始 todos:', todos);

// 按标题字母顺序排序 (不区分大小写)
const sortedByTitle = sortBy(todos, item => item.title.toUpperCase());
console.log('按标题排序:', sortedByTitle);

// 按日期排序 (升序)
const sortedByDate = sortBy(todos, item => item.duedate);
console.log('按日期排序:', sortedByDate);

// 按优先级排序 (升序)
const sortedByPrio = sortBy(todos, item => item.prio);
console.log('按优先级排序:', sortedByPrio);

// 将排序结果应用到 UI 的模拟
// 假设 cleanTodo() 和 showTodos() 是更新 UI 的函数
function updateAndShowTodos(sortedArray) {
    console.log('\n--- UI 更新模拟 ---');
    console.log('当前排序结果:', sortedArray);
    // 实际项目中会在这里调用具体的 UI 更新逻辑，
    // 例如：清除旧列表，然后使用 sortedArray 渲染新列表。
    // cleanTodo(); 
    // showTodos(sortedArray);
}

// 假设有以下事件监听器，现在可以统一调用 sortBy 函数
const titleSortButton = document.getElementById("titleSort"); // 假设存在
const dateSortButton = document.getElementById("dateSort");   // 假设存在
const prioSortButton = document.getElementById("prioSort");   // 假设存在

if (titleSortButton) {
    titleSortButton.addEventListener("click", () => {
        const newTodos = sortBy(todos, item => item.title.toUpperCase());
        updateAndShowTodos(newTodos);
    });
}

if (dateSortButton) {
    dateSortButton.addEventListener("click", () => {
        const newTodos = sortBy(todos, item => item.duedate);
        updateAndShowTodos(newTodos);
    });
}

if (prioSortButton) {
    prioSortButton.addEventListener("click", () => {
        const newTodos = sortBy(todos, item => item.prio);
        updateAndShowTodos(newTodos);
    });
}