前言
在開發中經常會在DOM上存儲一些自定義數據，我們可以通過setAttribute方法來實現。但是當數據為引用類型時，存儲后的數據卻無效。這里將用原生的JS對data方法進行實現。
使用setAttribute:
<div id="test-data"></div><p class="test-data-list"></p><p class="test-data-list"></p><p class="test-data-list"></p><p class="test-data-list"></p>
var testData = document.querySeletor('#test-data');testData.setAttribute('baukh', {a:1,b:2})// 執行后DOM節點變化為<div baukh="[object Object]"></div>testData.getAttribute('baukh'); // => "[object Object]"可以從上面的代碼中看出，存進去的是個Object，取出來的是Object.toString()所產出的字符串。
分析
在JS經典類庫-jQuery中存在data方法是通過jQuery.cache的方式進行數據存儲，那么還有沒有其它方法可以實現？
由于使用場景不同，我想實現的方式是將數據直接存儲到DOM節點上，以達到使用時更方便簡捷的目的。
那如何存儲? 變量testData存儲的是通過document.querySeletor('#test-data')獲取到的Element，而Element是Object的一個實例。通過[testData instanceof Object]可以進行驗證。
那么一切都簡易了，即然是Object類型，那么就可以隨意的增刪自定義屬性。
通過在Element的原型上增加data方法來實現DOM擴展
Element.prototype.data = function(key, value){ var _this = this, _dataName = 'testData', // 存儲至DOM上的對象標記, 這里只是測試用名 _data = {}; // 未指定參數,返回全部 if(typeof key === 'undefined' && typeof value === 'undefined'){ return _this[_dataName]; } // setter if(typeof(value) !== 'undefined'){ // 存儲值類型為字符或數字時, 使用attr執行 var _type = typeof(value); if(_type === 'string' || _type === 'number'){ _this.setAttribute(key, value); } _data = _this[_dataName] || {}; _data[key] = value; _this[_dataName] = _data; return this; } // getter else{ _data = _this[_dataName] || {}; return _data[key] || _this.getAttribute(key); }};這里來試一下:
var testData = document.querySelector('#test-data');// 字符串類型測試testData.data('name', 'baukh');console.log(testData.data('name')); // => 'baukh'// 對象類型測試testData.data('info', {'name': 'baukh', 'age': 27});console.log(testData.data('info')); // => Object {name: "baukh", age: 27}解決NodeList存儲
現在還有一個問題, 通過Element.prototype綁定的方法只支持Element類生效,而對NodeList類并無效果.
可以通過下面這些代碼進行效果測試:
var testDataList = document.querySelectorAll('.test-data-list'); // 獲取的為NodeList 而非 ElementtestDataList.data('name', 'baukh'); // Uncaught TypeError: testDataList.data is not a function這肯定不是想要的結果, 那么NodeList類就需要如下處理:
NodeList.prototype.data = function (key, value) { // setter if(typeof(value) !== 'undefined'){ [].forEach.call(this, function (element, index) { element.data(key, value); }); return this; } // getter else{ return this[0].data(key, value); // getter 將返回第一個 }};來測試下NodeList類的data實現:
var testDataList = document.querySelectorAll('.test-data-list'); // 獲取的為NodeList 而非 ElementtestDataList.data('name', 'baukh'); // Uncaught TypeError: testDataList.data is not a function// 字符串類型測試testDataList.data('name', 'baukh');console.log(testDataList.data('name')); // => 'baukh'// 對象類型測試testDataList.data('info', {'name': 'baukh', 'age': 27});console.log(testDataList.data('info')); // => Object {name: "baukh", age: 27}這樣就功能上就完成了.
當然也可以將NodeList與Element進行互換, 具體情況具體考慮.
很簡單不是嗎？
順帶說一下，Array類型的數據，也可以增加自定義屬性。
var ar = [1,2,3];console.log(ar instanceof Object); //true 能添加自定義屬性的原因就在這里，Array也是Object的實例。ar.test1 = {a:1,b:2};console.log(ar); //[1, 2, 3, test1: Object]console.log(ar.test1); //Object {a: 1, b: 2}隨筆一行
這是前端最好的時代， 這也是前端最壞的時代。 眾多前端框架滿天飛，隨著 jQuery 在前端行業的慢慢弱化，總是會有一種斯人遠去，何者慰籍的感覺。互勉吧，各位。
另推薦個表格組件gridManager
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對武林網的支持。
新聞熱點
疑難解答
