2016-03-04 43 views
0

背景:我目前正在使用庫座標系統HTML-canvas。目前用戶只能通過添加div特定類的元素來使用它。他應該能夠使用div元素上的data-*屬性自定義系統。HTML/JS - 保存數據 - *以備後用

我需要經常訪問這些數據(例如在調整大小)。我循環遍歷所有div與所述類(由document.getElementsByClassName返回)的數組,並使用element.getAttribute(name)讀取數據來調整元素大小並進行進一步的操作。我認爲總是再次讀取數據(每個調整大小)並使用它並不是那麼高效。隨時存儲數據並訪問數據的好方法(良好實踐/高效)是什麼?我在想一個數組。我可以編寫一個init()函數,該函數會將所有數據加載到每個data-*元素具有一個屬性的對象以及一個用於容納元素本身的額外元素。 在調整大小,我可以遍歷數組中的所有對象,並執行我的操作...

因爲我是JavaScript新手,我很高興能夠得到任何幫助。你對這種方法有什麼看法?

+0

加載後執行attribs更改嗎?如果不是,那麼使用一個數組並使用一個'data-'來存儲該對象數組的索引以查找與該元素相關聯的數據。如果你總是需要做所有這些,你甚至不需要索引... – dandavis

+0

@dandavis數據不會改變,所以沒有索引就沒問題。如果你想寫一個小答案,我會很高興接受它:) – LastSecondsToLive

回答

1

如果將document.getElementsByClassName另存爲數組,則訪問它們上的數據屬性只是檢索對象的屬性。它只是在DOM上定位需要時間的元素。只要您存儲該數組,循環快速。

+0

好吧,格里塔 - 我會和陣列一起去。 – LastSecondsToLive

+0

您對[this(jsfiddle)]有什麼看法?](https://jsfiddle.net/xmshwrgt/6/) – LastSecondsToLive

+0

@LastSecondsToLive小提琴不起作用(Chrome PC),您是否需要建立上下文'getContext()'或者什麼? – zer00ne