利用原生JS實現(xiàn)data方法示例代碼

發(fā)布時間：2020-08-20 10:44:13 來源：腳本之家閱讀：180 作者：拭目以待欄目：web開發(fā)

前言

在開發(fā)中經(jīng)常會在DOM上存儲一些自定義數(shù)據(jù)，我們可以通過setAttribute方法來實現(xiàn)。但是當(dāng)數(shù)據(jù)為引用類型時，存儲后的數(shù)據(jù)卻無效。這里將用原生的JS對data方法進(jìn)行實現(xiàn)。

使用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})// 執(zhí)行后DOM節(jié)點變化為<div baukh="[object Object]"></div>
testData.getAttribute('baukh'); // => "[object Object]"

可以從上面的代碼中看出，存進(jìn)去的是個Object，取出來的是Object.toString()所產(chǎn)出的字符串。

分析

在JS經(jīng)典類庫-jQuery中存在data方法是通過jQuery.cache的方式進(jìn)行數(shù)據(jù)存儲，那么還有沒有其它方法可以實現(xiàn)？

由于使用場景不同，我想實現(xiàn)的方式是將數(shù)據(jù)直接存儲到DOM節(jié)點上，以達(dá)到使用時更方便簡捷的目的。

那如何存儲? 變量testData存儲的是通過document.querySeletor('#test-data')獲取到的Element，而Element是Object的一個實例。通過[testData instanceof Object]可以進(jìn)行驗證。

那么一切都簡易了，即然是Object類型，那么就可以隨意的增刪自定義屬性。

通過在Element的原型上增加data方法來實現(xiàn)DOM擴(kuò)展

Element.prototype.data = function(key, value){
 var _this = this,
  _dataName = 'testData', // 存儲至DOM上的對象標(biāo)記, 這里只是測試用名
  _data = {};
 // 未指定參數(shù),返回全部
 if(typeof key === 'undefined' && typeof value === 'undefined'){
  return _this[_dataName];
 }
 // setter
 if(typeof(value) !== 'undefined'){
  // 存儲值類型為字符或數(shù)字時, 使用attr執(zhí)行
  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存儲

現(xiàn)在還有一個問題, 通過Element.prototype綁定的方法只支持Element類生效,而對NodeList類并無效果.

可以通過下面這些代碼進(jìn)行效果測試:

var testDataList = document.querySelectorAll('.test-data-list'); // 獲取的為NodeList 而非 Element
testDataList.data('name', 'baukh'); // Uncaught TypeError: testDataList.data is not a function

這肯定不是想要的結(jié)果, 那么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實現(xiàn):

var testDataList = document.querySelectorAll('.test-data-list'); // 獲取的為NodeList 而非 Element
testDataList.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}

這樣就功能上就完成了.

當(dāng)然也可以將NodeList與Element進(jìn)行互換, 具體情況具體考慮.

很簡單不是嗎？

順帶說一下，Array類型的數(shù)據(jù)，也可以增加自定義屬性。

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 在前端行業(yè)的慢慢弱化，總是會有一種斯人遠(yuǎn)去，何者慰籍的感覺?；ッ惆?，各位。

另推薦個表格組件gridManager

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對億速云的支持。

向AI問一下細(xì)節(jié)

利用原生JS實現(xiàn)data方法示例代碼

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽