在為知筆記上的每日計劃已經(jīng)有好幾天沒有寫實際內(nèi)容了，抓狂臉。時間真是過得超級快呀，這幾天雙十一，瘋狂的看喜歡的東西和看快遞。其實并不是為了雙十一降價而買東西，而是近來本來就有買東西的打算，而且撞到了雙十一前，那就干脆放購物車?yán)锖昧?，還有就是半年沒見降價的零食也打折啦啦啦~~^_^。好喜歡雙十一結(jié)束后淘寶的宣傳片《再見雙十一》，接下來的這個星期，就靜靜的等待幸福來敲門~
言歸正傳，今天來分享一下關(guān)于如何構(gòu)建數(shù)據(jù)結(jié)構(gòu)使得頁面邏輯更為清晰的思路。
事情的起因是這樣的，boss安排我做一個列表拖拽頁面，為了更貼切我們的UI和產(chǎn)品的需求，除了美化的滾動條使用jquery.nicescroll插件外，不到萬不得已不允許用其他插件（來點題外話：感覺我們公司一般不允許用插件，用boss的話來說就是相信自己能寫出來，根據(jù)項目寫出來的才是最貼切最精煉的代碼。不要一開始就使用插件，如果實在寫不出來而使用插件，也得完全看懂代碼或者使用說明，不要存在一知半解的僥幸心理，這樣相當(dāng)于給項目埋下定時炸彈）。
我起初是用了對象加數(shù)組，各種全局變量加起來寫著寫著很容易把自己的代碼寫混了，然后把自己的困惑和boss說了之后，boss給我提供了一種新的思路，讓我豁然開朗，立即把頁面重寫了一遍。好東西就是要和大家分享的，下面我來分享一下這個方法。
如圖所示，這個頁面的要求是能實現(xiàn)以最左邊一個虛擬的第0列作為根節(jié)點，然后點擊三角形（非葉子節(jié)點的子節(jié)點）實現(xiàn)橫向展開收縮數(shù)據(jù)。每一層都是上一層的子節(jié)點，在不同列的子節(jié)點中也可以相互拖拽，拖拽上一層節(jié)點，下一層節(jié)點也跟著移動（由于需要實現(xiàn)每一列都有一個相對的滾動條的功能，所以不能把所有節(jié)點都實現(xiàn)繪制在一棵樹上通過show，hide展示。需要每展開一列就立即構(gòu)建一個相對獨立的樹）。除了拖拽，還需要能實現(xiàn)復(fù)制節(jié)點（子節(jié)點也隨之復(fù)制），刪除，編輯，添加子節(jié)點，查看節(jié)點下所有葉子節(jié)點和本層葉子節(jié)點的功能。
把這些功能歸類，我們可以看到拖拽，刪除其實是對結(jié)構(gòu)的操作；編輯，查看是對數(shù)據(jù)的操作；復(fù)制，添加子節(jié)點這些既要求對樹操作，要求對數(shù)據(jù)進行操作。
當(dāng)我們把頁面的結(jié)構(gòu)和渲染分開來的時候，頁面的脈絡(luò)會變得很清晰。
我們可以就事論事把這抽象的數(shù)據(jù)想象成，并構(gòu)建成一棵樹，所有對樹結(jié)構(gòu)的修改都在樹的操作上完成，而所有對于節(jié)點內(nèi)容的修改，在另一組數(shù)據(jù)上完成，這樣能使頁面的結(jié)構(gòu)更為清晰，而且也便于檢查和維護，不會存在定義了一堆變量，到最后，自己都忘了這個變量是用來干嘛的。
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍牙鎖 2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式