天天看點

這個幾個DataV小技巧,教你如何避坑。

現在越來越多項目使用datav了,但是datav坑點有點多,而剛剛接觸datav的你可能并不知道,一些隐藏的功能特性。如果了解了這些特性,可以讓你避開很多坑點,節省開發時間。

(PS)成組:成組時datav的一個功能,是把多個元件或組,成組。相當于子產品化,達到統一控制和管理的效果。圖示是一個檔案夾的圖示;

藍圖:類似節點程式設計。

1、隐藏特性一:新增元件在成組的圖表位置區域内就入成組不會打亂成組的圖表尺寸和圖表位置

我覺得很多同學剛接觸datav時,都會遇到很糟心的事情。那就是當你在編輯大屏,已經基本完成了一個子產品時,突然來了新需求需要往裡面新增元件。可是無論你左側的圖層群組件層怎麼選中怎麼操作,新增的元件并不會直接在你的成組裡加,而是直接在圖層的最外層(最上層)。好,這時候你覺得沒關系,把新增的元件拖拽進成組裡就好了。

這個幾個DataV小技巧,教你如何避坑。

(拖拽前一)
           
這個幾個DataV小技巧,教你如何避坑。
(拖拽前二)
           
這個幾個DataV小技巧,教你如何避坑。
(拖拽進來)
           
這個幾個DataV小技巧,教你如何避坑。
這個幾個DataV小技巧,教你如何避坑。
(尺寸和位置變化)
           

但是這時候不好的事情發生了,組群組裡面的元件位置和尺寸全變了,這并不是你想要的,你被迫去全部修改了一遍,是不是覺得很糟心。其實,你隻要記住一點就可以避免這樣的事情發生。那就是在你每次拖拽新元件進入組裡前,先把新增的元件挪到組所在的區域範圍内再拖拽進組,組群組裡的元件位置和尺寸就不會發生變化。

2、隐藏特性二:删除不可回退,回撤不好用

馬有失蹄,人有失足。人總有出錯的時候。當你不小心操作失誤的時候,你下意識的按下CTRL+Z,還好,回退了。你誤以為datav原來還有回退功能啊。其實不然。當你再按下一次CTRL+Z時,你就會發現。元件隻會在這兩個步驟發生改變,并且隻是位置和尺寸的變化。

這隻是小事情。如果你經曆過一天中發生過4次需求變更,你删除的元件回不來了。那你絕對會痛苦哀嚎甚至怒而拍案口吐芬芳,想死的心都有了。是以,删除元件是高危操作,需要慎重,特别是大子產品删除。

3、隐藏特性三:快照版本隻記錄釋出的版本

當你看到上面那一段話,你會發出疑問:難道datav沒有版本管理嗎?有,但是并不完善。datav有一個快照管理功能,會記錄你釋出的節點,你可以選擇覆寫新節點,也可以選擇成為最新的節點。你可以選擇任何一個快照版本成為目前的釋出版本。但是,你不知道的是,快照版本隻是釋出的版本。而你編輯的狀态永遠隻會記錄你最新的狀态。删除了就沒有了,你不能像git一樣切到某個曆史版本進行編輯。意思就是你不能去到某個快照版本進行編輯。

4、隐藏特性四:右鍵藍圖空白處,可以選擇取消所有的列印日志

在藍圖編輯中,避免不了需要對某個互動進行調試預覽,輸出事件的日志。而你可能會在調試完後忘記取消,跟你寫代碼總是忘記删除調試語句console.log和System.out.print一個道理。在這密密麻麻的藍圖裡看着這麼密集的線你都要頭暈了,你早已經不記得在哪根線上使用了日志輸出,界面上也沒有任何記錄和提示。别慌,這時你隻要右鍵空白處就可以選擇全部取消藍圖節點的列印日志了。不會吧?不會吧?你不會真的一根線一根線的去找吧?

5、隐藏特性五:執行藍圖之前,必然先執行資料過濾器,如果你有設定了資料過濾器的話

有時候,你做的datav項目裡隻有前端和資料組同學,是的,沒有後端,沒有API接口。不要驚訝,datav的資料源其實可以是靜态的csv檔案還可以是資料庫,沒有後端和API并不驚奇。但是總會有得有失,節省了人力,資料格式化工作少不了就壓在前端身上了。一個SQL有時候并不能直接給你能用的資料格式,跟元件所需的格式完全比對不上。這時,你需要寫資料過濾器,進行資料轉化。在複雜的互動中,你需要在跟元件互動後獲得某個效果,但是需要給另一個元件導入不同的資料格式。這時候,你會發現你互動得到資料的資料源都是經過資料過濾器格式化過的。這時候,你該頭疼考慮新的實作方案了。

6、隐藏特性六:資料過濾器可以寫html

這一點好像在datav的文檔上并沒有提到。或許很多人誤以為,過濾器隻是請求到資料後,對資料進行處理的一個回調方法而已。其實,這裡還是可以寫html,意味着你可以寫樣式了。好處是什麼呢?舉個例子,當産品經理要你實作一個輪播清單,這個清單的某行或者某列要根據某個變量值展示不同的顔色,可是這個元件并沒有提供這樣的屬性給你設定。怎麼辦呢?假設你的SQL或接口傳回的資料是這樣的:[{ name: '名額名稱1', value: 0}, {name: '名額名稱2', value: 1 }],你要實作當值為0的時候該行變紅展示。那麼你的過濾器可以這麼寫:

這個幾個DataV小技巧,教你如何避坑。

7、隐藏特性七:藍圖裡導入資料接口動作不接收html

看完第六點你肯定大喜過望,以為datav其實還是很好用的嘛。那麼接下來這點會把你打回原形,你還是太年輕了。假如産品經理,讓你實作這個清單的同時還需要你在點選某行的時候,去跟另一個元件進行關聯。在藍圖中,輪播清單元件确實帶有點選行的這個事件方法,如圖:

這個幾個DataV小技巧,教你如何避坑。

也确實在點選事件中拿到資料

這個幾個DataV小技巧,教你如何避坑。

好,連線另一個元件節點導入接口資料,預覽測試。好,這時候你懵了,不是已經傳資料過來了嗎?為什麼什麼都不展示?是的,藍圖節點導入接口資料這個動作不接收html。這個時候你不得不吐槽:“什麼玩意,啥也不是”。繞了半天又回到原點,相當于沒實作。說實話datav由于局限性非常大非常多,是以非常能激發你發散思維,激發你的潛力。沒事,辦法總比困難多(官方吐槽:我差點信了)。其實你可以處理資料過濾器的時候,給對象加一個key, 把這行的原始資料指派給它就行了。

那麼,過濾器可以這麼寫:

這個幾個DataV小技巧,教你如何避坑。

然後,藍圖中點選事件通過串行資料處理取到資料data.dataSource。ok,問題解決。

到這裡,不得不說,這全文讓你看了都覺得一波三折,堪比小說情節跌宕起伏。 那麼,我在這裡一問,如果最後不是簡單的導入資料接口就能實作,同樣需要特殊樣式處理怎麼辦?怎麼辦?怎麼辦?重要得事情要問三遍。到這裡我都要爆粗口了:"卧槽"。

說實話我也不知道怎麼辦,我唯一想到得就是藍圖與hook相結合,有了藍圖,不代表就能完全舍棄hook。可是,輪播清單裡"行"并不是子元件啊,它沒有元件id, hook裡沒辦法stage.get() 無法擷取到Dom節點,麻煩事情來了。好了,口水幹了,不說了。

如果你有方案記得戳我,互相學習共同進步。如果我說的不對,也請指正,謝謝。