??作為一個程序員，你不得不接觸的除了數據結構那就是算法了。算法是一個問題的數字化解決方案，在編程當中，關于排序問題的算法少說也有幾十種，今天我們來聊一聊微信小程序 百萬工具箱 中的 排序算法可視化 工具吧！

??首先排序算法分為 內部排序 和 外部排序。
??內部排序指的是待排序列完全存放在內存中所進行的排序過程，適合不太大的元素序列。在小程序中，我們討論的都是屬于內部排序；
??而外部排序主要考慮的是 I/O 問題，實際排序所用的算法其實也是內部排序，利用歸并算法，把各個有序片段合并，感興趣的小伙伴可以自行查閱資料，在此不做展開。
??這里列舉較為經典的一些排序算法，這些算法在小程序內部也一一實現了。

內部排序腦圖

測評

簡單的介紹之后，我們就來評測一下百萬工具箱里的排序算法可視化工具吧~

主界面 - 設置

主界面采用了極簡的設計，突出重點，引導用戶操作，降低用戶首次學習和使用的成本。

生成數列面板

面板使用了彈出層的效果，用直接的方式引導讓用戶輸入，同時采用了圓角藍邊框的設計，能夠和主頁面的基本樣式呼應，在視覺越來越挑剔的今天，許多用戶是不會再接受直角無邊框的設計。整體的藍白顏色組合十分地融洽，淺灰色的提示，溫馨卻不礙眼。

主界面

??在引導完用戶輸入之后，界面的元素變得更加豐富，為了降低用戶的的復雜感，我們做了兩點措施，

1. 添加步驟引導。通過 ① ② 兩個步驟讓用戶明確了解流程。
2. 采用折疊設計，把排序算法的內容隱藏，當用戶點擊下拉圖標的時候，顯示更多內容。

排序方法 - 展開

??展開內容介紹了排序算法的基本屬性，如復雜度、穩定性等，可以提供用戶對該排序量化的尺度

??對于動畫延遲的設計更是凸顯人文關懷，可以選擇關閉排序的動畫，直接顯示結果。也可以讓用戶手動操控排序的快慢，不僅在開始排序前，在排序中也是隨時可以修改動畫延遲的大小。
??在排序中也可以放大縮小查看每個細節，在一些數列數列比較大的情況下可以使用，因為屏幕的像素點已經裝不下，為了保證用戶觀感，這是當下最好的方案。

在排序中放大縮小查看細節

冒泡排序介紹

??當用戶點擊問號按鈕或點擊幫助頁時，會展開該排序方法的介紹，以冒泡排序為例展示。若需查看完整的內容，歡迎掃描文章末尾的二維碼進入小程序。

實際展示

接下來我們利用動圖來直觀地來看看各個排序的情況。
設置如下參數：

最小值：100
最大值：1000
生成個數： 50

對于以下幾個排序方法我們用以上參數生成的同一個數列來比較

快速排序

快速排序

歸并排序

歸并排序

直接選擇排序

直接選擇排序

希爾排序

希爾排序

ps: 由于一些排序算法耗時太長導致文件過大無法上傳，所以在此省略。
排序結束后的黑色框是微信小程序的彈窗提示。

小結

??程序會不斷地完善，不斷優化體驗，目標是做一個教科書級別的排序算法小程序。希望這篇文章對你有幫助。

百萬工具箱小程序碼