元のJSを利用してdata方法の例コードを実現します。

前言
開発においては常にDOMにカスタムデータを記憶しています。私たちはset Attributeの方法で実現できます。ただし、データが参照タイプの場合、格納後のデータは無効となります。ここでは生のJSでdata方法を実現します。
set Attributeを使う:

<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}

解決ノードリスト記憶
もう一つの問題があります。Element.prototypeを通して結合する方法はElementクラスの有効性だけをサポートします。NodeListクラスには効果がありません。
下記のコードによって効果テストができます。

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

これで機能的に完成します。
もちろん、NodeListとElementを交換してもいいです。具体的な状況は具体的に考慮してください。
簡単じゃないですか？
ちなみに、Arayタイプのデータは、カスタム属性を追加することもできます。

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が先端業界で徐々に弱体化するにつれて、いつもこの人が遠ざかっていくような感じがします。励まし合いましょう。
他の推薦のテーブルコンポーネントgrid Manager
締め括りをつける
以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考学習価値を持ってほしいです。ありがとうございます。