The F2E - 前端修練精神時光屋挑戰系列 - 2nd Week 8. Cloud Drive
這次前言我要碎碎念一番…
最近不知道在忙甚麼行程通通擠在一起，這禮拜除了工作在趕急件之外，其中兩天還去參加 Modern Web，自己也沒天生神力無法邊聽演講邊寫 code，只好默默扛著筆電跑場，回家再默默加班趕急件，六日兩天又是很久一次的大學同學出遊，出去玩還要帶筆電的話會太厭世，將近一週每天睡不滿 4 小時的情況下..禮拜天甚至為了要去划獨木舟看日出只睡了兩個小時，真的覺得自己要棄賽了 QQ
但是，但是…提早下午就回到家的情況下，靠著工作都沒那麼有恆心的意志力，終於勉強把這週題目刻出來，好累RRRRRRRRRRRRR
使用者故事:
- 我可以在檔案管理區新增資料夾
- 我可以上傳任何檔案，例如圖片、word、pdf、mp4
- 我可以在資料夾裡面新增檔案，進行分類
- 我能透過篩選器 (filter) 來尋找檔案，例如搜尋、時間排序、大小排序等等
- 我可以將檔案打星號，以方便快速查找
來自 edith.hsu 的設計稿，走簡潔風真是太甘心了QQ，掃了一下這週的設計作品真是一個比一個複雜，實在是無心力應對。
運用技術:
- Pug
- Vue.js
挑戰心得:
這週其實沒甚麼心得好分享的..完全沒用任何新技術，主要目標就是把版切出來，如果時間還充裕的情況下再去加功能，但主要功能都會牽扯到資料上傳一度很糾結，最後還是覺得至少要做到能讓人操作的程度才甘心罷手。
剛好上週有追到奶綠茶的聊天室直播，想到可以跟他一樣用”模擬情境”的方式來完成使用者故事，於是一切資料上傳的流程都用簡單的圖像產生來帶過，覺得這招真心好用!
因為沒去處理資料上傳的 part，就有時間可以補做其他功能了，這次有做好篩選器，新增專案、資料夾、檔案，將檔案打星號等模擬流程。
過程中覺得最難搞的是資料夾的建立方式，設計稿會先以建立專案的形式來初始分類，之後才自由的選擇要建立資料夾或是直接塞檔案，這種模式資料夾應該要可以巢狀組合，且因為有回到上一層的按鈕，變成需要知道當前目錄位置下的前後關係，想了好久一直會被 project 這個目錄跟資料夾之間的關係給卡住，最後是想到可以用”時間旅行”的概念來達成這樣的功能，感謝最近一直讓我聽到這個概念的大神講解XD (時間旅行可以解讀成每作一個動作就記錄當下的行為，這樣就能倒退流程狀態)
我的巢狀資料夾做法是，會先區別 project 跟 folder，反正 project 就是個在最頂層的包裝，會包覆裡面所有的 folder 及檔案，所以跳過它之後可以比較好判別之後的內容。除了 folder 之外就是各種類型的檔案，因為檔案類型的文件不會有巢狀的狀況發生，所以也可以當作一層過濾篩選掉，所以要特別去處理的就是 folder 到底有沒有巢狀這件事。我設定一個 children 的 property 在 folder data 中，只要是它子層的東西不管甚麼類型就是塞到 children 裡就對了。但要能夠知道當前位置的上下文關係，我有另外設定一個 parentId 的 property，它接收一組存放 id 的 array，id 其實就是從最外層開始陸續往內直到自己的祖先層 id，有了這組 array，其實就可以用最無腦的方式來遍歷每一個祖先層，直到查出自己的上一層到底是誰，這樣就可以做到即使是無限巢狀的資料夾也可以回到上一層的狀態囉!
parentId 的 array 要紀錄也不難，畢竟一定是從最外層開始建立文件的，所以就一樣用無腦的方式每建立一個子層資料夾時，就把自己爸爸的 parentId 一併繼承到自己身上，所以內層的資料夾就會有所有階層的祖先 id。
不過還有麻煩的地方在於要能夠做檔案篩選，巢狀結構下勢必會出現未知的迴圈數要跑才能遍歷到每個資料，這時候就不能繼續無腦寫了，因為永遠都無法預料使用者到底會建立多少階層QQ
這部分我是先將 project 到 folder 的篩選邏輯寫出來，之後因為是 folder 對 folder 的邏輯，其實搜尋方式是相同的，可以將這部分邏輯單獨抽出來寫成一個 function，這樣就能在 function 中再度呼叫自己這個 function 達成跑未知數迴圈的功能。(當然要設讓他停止繼續迴圈的條件啦，也就是當找不到任何 children 時你就可以去一邊休息了的概念)
這樣的寫法就能順利完成標籤顏色的篩選及關鍵字的篩選了，即使階層再多也能跑過全部的 data。
大概就是這樣吧…可以去洗洗睡了 Zzzz
作品網址: https://kakadodo.github.io/theF2EChallange/cloud-drive.html
以上內容如有勘誤，還請不吝告知🙇