使用 Anysort 排序库给网易云歌单排序

歌单排序

网易云音乐的歌单排序功能十分鸡肋，只能按照歌曲名、歌手名、专辑名排序。别说处理一些复杂的规则了，他连从 Z-A 这种简单的倒序逻辑都搞不定。这对像我这种红星单动不动就几千首曲子或是喜欢给曲子分类、制作歌单的朋友来说简直就是灾难。

于是，我写了一个专门用来给歌单中的歌曲排序的爬虫脚本，能够实现各种有意思的排序功能。

比方说，这个歌单的歌曲排序按照以下规则排序：

按专辑名称排序
再按专辑发布日期排序。
再按歌曲时长排序。

再举个例子，这个歌单的曲子按照以下规则排序：

按专辑作者名称排序，由于专辑可能有多个作者，优先选择其中有歌手名为“CLOCKWORKS TRACER”的专辑。
再按专辑发布日期排序。
再按歌曲在对应专辑中的顺序排序。

哇哈，这个排序功能比网易云默认的歌单排序强哈，这才真有点意思~ 接下来，我们一步一步来把它实现吧。名称和标语我都想好了，就叫做 Anysort：灵活、优雅、无依赖的排序库。

简单解决

确定问题

首先，得确定要解决什么问题。

在 JavaScript 中，排序其实是一个非常好写的功能。通过给 Array.prototype.sort 传入自定义排序方法，就能得到按期望顺序排好了的数组。

const nums = [1, 30, 4, 21, 100000]function customCompare(a, b) {if (a < b) return -1if (a > b) return 1else return 0
}nums.sort(customCompare)// 排序结果：[1, 4, 21, 30, 100000]

可以看到，给 Array.prototype.sort 传入的排序方法 customCompare，最终的返回值要么是 0，要么是 1 或 -1，这个返回值直接的指代了 a 和 b 的排序顺序。也就是说，无需关心 Array.prototype.sort 的具体实现到底是快速排序还是冒泡排序，只需要写一个比较两个值的大小的函数，返回它们的顺序到底是相等（0），还是 a 比 b 靠前（-1），或是 a 在 b 之后（1）就行了。

我们通常会使用 JSON 对象去描述一首曲子，比如《海阔天空》可能描述如下：

const song = {name: '海阔天空',authro: 'Beyond',// 专辑信息album: {name: '海阔天空',time: '1993-09-09',brief: '《海阔天空》是黄家驹为BEYOND成立十周年而作的，刻画着他们十年来的心路历程。'},// 评论信息comments: [{name: '冰凍七音',content: '有些人死了，他还活着',approve: '150283',hot: true,},{name: '独坐凭栏',content: '钢铁锅，含着泪喊修瓢锅。。。',approve: '77739'}]
}

给歌曲排序可要比给数字排序复杂。两个数字之间固然只有大于小于等于三种关系，但是同一首专辑的歌曲之间，也许我们还想继续按歌曲名、歌曲时间或其它属性排序。讲到这里，写排序函数时碰到的第一个问题就出来了：如何给多属性进行排序？

简单方案

先简单来写几个基础排序函数，尝试解决以下问题：

先按曲子的专辑名称的长度排序。
再按曲子的名称的字典顺序排序。

function sortByAlbumNameLen(songA, songB) {const lenA = songA.album.name.lengthconst lenB = songB.album.name.length// 专辑名称相同，则不改变顺序（0），名称不相同时，则按照专辑名称的长度由短到长排列。return lenA === lenB ? 0 : (lenA < lenB ? -1 : 1)
}
const songs = [{ name: 'songB', album: { name: 'wow' } },{ name: 'songC', album: { name: 'other' } },{ name: 'songA', album: { name: 'wow' } },
]
songs.sort(sortByAlbumNameLen)
// 得到结果：songB、songA、songC

然后再来处理专辑名称相同的情况。

function sortBySongName(songA, songB) {const nameA = songA.nameconst nameB = songB.name// 根据曲子的名称的字典顺序排序，如 'abort' 排在 'bank' 前面。return nameA === nameB ? 0 : (nameA < nameB ? -1 : 1)
}

由于 Array.prototype.sort 方法只接受一个函数，所以，需要把 sortByAlbumNameLen 和 sortBySongName 两个函数合二为一。

function sortByAlbumLenThenSongName(songA, songB) {const firstRes = sortByAlbumNameLen(songA, songB)// 先以 sortByAlbumNameLen 的结果为准，// 如果 sortByAlbumNameLen 没能得出顺序，// 返回了 0，// 那么继续排序，以 sortBySongName 的结果为准if (firstRes !== 0) return firstReselse return sortBySongName(songA, songB)
}
const songs = [{ name: 'songB', album: { name: 'wow' } },{ name: 'songC', album: { name: 'other' } },{ name: 'songA', album: { name: 'wow' } },
]
songs.sort(sortByAlbumNameLen)
// 得到结果：
// [
//   { name: 'songA', album: { name: 'wow' } },
//   { name: 'songB', album: { name: 'wow' } },
//   { name: 'songC', album: { name: 'other' } },
// ]

搞定。目前为止，先按曲子的专辑名称的长度排序，再按曲子的名称的字典顺序排序这个小功能就写好了。

问题抽象

有一个问题比较烦人，就是 Array.prototype.sort 只接受一个参数用作排序函数，还不能是数组。所以只要更改了排序的规则，那么传进去的参数（即上面的 sortByAlbumLenThenSongName）的逻辑就得跟着改。

这个小麻烦可以通过抽象解决。仔细观察，sortByAlbumLenThenSongName 的逻辑是：先按 sortByAlbumNameLen 的规则排序，如果 sortByAlbumNameLen 没能给出现后顺序（即返回 0），那么再按 sortBySongName 的顺序排序。这种现后顺序，不就是一个循环嘛！

function sortBy(...sortFns) {return function fn(obj1, obj2) {var fnsLen = sortFns.length,result = 0,i = 0while(result === 0 && i < fnsLen) {result = sort(sortFns[i], map)(obj1, obj2)i++}return result}
}
songs.sort(sortBy(sortByAlbumNameLen, sortBySongName
))

以后，就算我们继续更改排序规则，也不需要写新的函数去重构传入 Array.prototype.sort 的那个方法。假设替换一条排序规则：

先按曲子的专辑名称的长度排序。
~~再按曲子的名称的字典顺序排序。~~
再按曲子的时长排序。

只需要改动以下几行代码：

// ...
function sortBySongTime(a, b) {return a.time === b.time ? 0 : (a.time < b.time ? -1 : 1)
}
// ...
songs.sort(sortBy(sortByAlbumNameLen,sortBySongTime
))

妙哉妙哉~

逐步改进

上一小节，我们简单完成了一个具有多属性排序功能。接下来需进一步完善这个排序函数，使其功能完整，更加强大。

API 优化

程序员都是懒惰的。其实我甚至连基础的排序函数都不想写，要是能直接传入待排序的属性名那多好哇：

const songs = [{ name: 'songB', album: { name: 'wow' } },{ name: 'songC', album: { name: 'other' } },{ name: 'songA', album: { name: 'wow' } },
]
// 先按专辑名称、再按曲子名正序排列
songs.sort(sortBy('album.name', 'name')
)
// Results：songA、songB、songC

也就是说，需要写一个读取对象的属性值的方法。既然是涉及属性存取符号（也就是点运算符），那我们就用 eval(‘song.album.name’) 就能读到属性啦。咳咳，划掉，动态语言不意味着就要用 eval 解决问题。当然了，new Function 也不行。以下继续写一个 while 循环吧。

const getVal = name => {const pathsStore = name.split('.')return x => {const paths = [...pathsStore]let val = xwhile (val && paths.length) {next = paths.shift()val = val[next]}return val}
}
getVal('b.c')({ b: { c: 'test' } }
)
// Results：'test'

再接下来只要重构 sortBy 函数，把 getVal 的逻辑添加进去，就完成传入字符串属性的改造啦。

自定义排序函数

现在可以传入字符串了，我们再加一种 API：自定义排序函数，以支持某些特殊排序逻辑。比如以下代码：

songs.sort(sortBy(// 优先选择 2020 年发布的曲子，并按时间倒序排列(a, b) => {const year2019 = +new Date('2019-12-31 23:59:59')const year2020 = +new Date('2020-12-31 23:59:59')const timeA = Math.min(year2019, Math.max(a.pubTime, year2020))const timeB = Math.min(year2019, Math.max(b.pubTime, year2020))return timeA === timeB ? 0 : ( timeA < timeB ? 1 : -1)},// 再按专辑名称排序'album.name',
))

这个改造其实并不难，判断一下传入参数的类型就好了。

// 由于 sortBy 函数返回一个排序函数，
// 所以在这儿改名为 factory（函数工厂）
function factory(...cmd) {// 如果没有排序参数，那么返回 undefined，// 告诉 Array.prototype.sort 不需要排序if (cmd.length < 1) return undefined// 兼容字符串或自定义函数const sortFns = cmd.map((x, i) => x === 'function' ? x : generate(x))return (obj1, obj2) => {var fnsLen = sortFns.length,result = 0,i = 0while(result === 0 && i < fnsLen) {result = sort(sortFns[i], map)(obj1, obj2)i++}return result}
}// 从字符串指令（如 album.name）中得到排序函数
function generate(s) {// 指定排序是正序还是倒序，稍后会用到const sortOrder = 1return function fn(a,b) {var resultvar am = getVal(s)(a)var bm = getVal(s)(b)if (am === bm) result = 0if (am < bm) result = -1if (am > bm) result = 1return result * sortOrder}
}

增加倒序逻辑

在 generate 函数里，我们还遗留了一个字段 sortOrder 用来指定排序是正序还是倒序。当然，如果传入自定义排序函数，根本不会走 generate，只有字符串参数，才会走到这一步。这里可以改进一下 API，如传入 ‘-album.name’，前面加了一个负号，用来代表按倒序排序。

function generate(s) {const sortOrder = 1// 如果第一个字符为负号，则将排序结果取反if (s[0] === '-') {sortOrder = -1s = s.substr(1)}return function fn(a,b) {var resultvar am = getVal(s)(a)var bm = getVal(s)(b)if (am === bm) result = 0if (am < bm) result = -1if (am > bm) result = 1return result * sortOrder}
}

奈斯哇，经过这两次迭代，终于支持了自定义排序函数，也支持通过负号得到倒序的逻辑。

不过，这可远远没有结束，第三小节才是“真正的 Coding”。

层层抽象

坐稳啦，