在為知筆記上的每日計(jì)劃已經(jīng)有好幾天沒有寫實(shí)際內(nèi)容了，抓狂臉。時(shí)間真是過得超級(jí)快呀，這幾天雙十一，瘋狂的看喜歡的東西和看快遞。其實(shí)并不是為了雙十一降價(jià)而買東西，而是近來本來就有買東西的打算，而且撞到了雙十一前，那就干脆放購物車?yán)锖昧?，還有就是半年沒見降價(jià)的零食也打折啦啦啦~~^_^。好喜歡雙十一結(jié)束后淘寶的宣傳片《再見雙十一》，接下來的這個(gè)星期，就靜靜的等待幸福來敲門~
言歸正傳，今天來分享一下關(guān)于如何構(gòu)建數(shù)據(jù)結(jié)構(gòu)使得頁面邏輯更為清晰的思路。
事情的起因是這樣的，boss安排我做一個(gè)列表拖拽頁面，為了更貼切我們的UI和產(chǎn)品的需求，除了美化的滾動(dòng)條使用jquery.nicescroll插件外，不到萬不得已不允許用其他插件（來點(diǎn)題外話：感覺我們公司一般不允許用插件，用boss的話來說就是相信自己能寫出來，根據(jù)項(xiàng)目寫出來的才是最貼切最精煉的代碼。不要一開始就使用插件，如果實(shí)在寫不出來而使用插件，也得完全看懂代碼或者使用說明，不要存在一知半解的僥幸心理，這樣相當(dāng)于給項(xiàng)目埋下定時(shí)炸彈）。
我起初是用了對(duì)象加數(shù)組，各種全局變量加起來寫著寫著很容易把自己的代碼寫混了，然后把自己的困惑和boss說了之后，boss給我提供了一種新的思路，讓我豁然開朗，立即把頁面重寫了一遍。好東西就是要和大家分享的，下面我來分享一下這個(gè)方法。
如圖所示，這個(gè)頁面的要求是能實(shí)現(xiàn)以最左邊一個(gè)虛擬的第0列作為根節(jié)點(diǎn)，然后點(diǎn)擊三角形（非葉子節(jié)點(diǎn)的子節(jié)點(diǎn)）實(shí)現(xiàn)橫向展開收縮數(shù)據(jù)。每一層都是上一層的子節(jié)點(diǎn)，在不同列的子節(jié)點(diǎn)中也可以相互拖拽，拖拽上一層節(jié)點(diǎn)，下一層節(jié)點(diǎn)也跟著移動(dòng)（由于需要實(shí)現(xiàn)每一列都有一個(gè)相對(duì)的滾動(dòng)條的功能，所以不能把所有節(jié)點(diǎn)都實(shí)現(xiàn)繪制在一棵樹上通過show，hide展示。需要每展開一列就立即構(gòu)建一個(gè)相對(duì)獨(dú)立的樹）。除了拖拽，還需要能實(shí)現(xiàn)復(fù)制節(jié)點(diǎn)（子節(jié)點(diǎn)也隨之復(fù)制），刪除，編輯，添加子節(jié)點(diǎn)，查看節(jié)點(diǎn)下所有葉子節(jié)點(diǎn)和本層葉子節(jié)點(diǎn)的功能。
把這些功能歸類，我們可以看到拖拽，刪除其實(shí)是對(duì)結(jié)構(gòu)的操作；編輯，查看是對(duì)數(shù)據(jù)的操作；復(fù)制，添加子節(jié)點(diǎn)這些既要求對(duì)樹操作，要求對(duì)數(shù)據(jù)進(jìn)行操作。
當(dāng)我們把頁面的結(jié)構(gòu)和渲染分開來的時(shí)候，頁面的脈絡(luò)會(huì)變得很清晰。
我們可以就事論事把這抽象的數(shù)據(jù)想象成，并構(gòu)建成一棵樹，所有對(duì)樹結(jié)構(gòu)的修改都在樹的操作上完成，而所有對(duì)于節(jié)點(diǎn)內(nèi)容的修改，在另一組數(shù)據(jù)上完成，這樣能使頁面的結(jié)構(gòu)更為清晰，而且也便于檢查和維護(hù)，不會(huì)存在定義了一堆變量，到最后，自己都忘了這個(gè)變量是用來干嘛的。
