javascript - JS if else 条件基于 if div 元素更改 > 然后填充数据字段

Question

我想用 JS 创建一个简单的 if/else 语句。这将在填充从动态更改的 HTML 中提取的 JSON 数据字段/变量之前检查 div 元素是否已更改。

我不想使用DOMSubtreeModified。因为它已经贬值了..

下面是我的开始逻辑。但看起来我必须废弃 DOMSubtreeModified 以获得不贬值的方法。

问题是:如何不使用上述折旧技术重写，以及如何嵌套我的数据数组，它只会根据首先检查我的 if(条件) 为任何指针干杯。

var element = document.querySelector('.username'); // username div wrapper

//if {

element.addEventListener('DOMSubtreeModified', function() { // detect if div element changes
  var date = new Date();
  var month = date.getUTCMonth() + 1;
  var day = date.getUTCDate();
  var year = date.getUTCFullYear();

  var time = date.toLocaleTimeString();
  var formattedDate = month + '/' + day + '/' + year;

  console.log(time); // 7:01:21 PM
  console.log(formattedDate); // 3/15/2016
}, false);

// change something on element
setTimeout(function() {
  element.dataset.username = 'bar';
}, 3000);

// json object with captured data fields

var NewUserSession = [{ 

    currentusername: $('.username').text(),
    referrer: document.referrer,
    loggedintime: $(formattedDate),

}];

//}
//
//else { 
//
//
//}

Answer 1

您可以使用MutationObserver并观察数据用户名更改

var element = document.querySelector('.username'); // username div wrapper

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.attributeName = 'data-username') {
      var date = new Date();
      var month = date.getUTCMonth() + 1;
      var day = date.getUTCDate();
      var year = date.getUTCFullYear();

      var time = date.toLocaleTimeString();
      var formattedDate = month + '/' + day + '/' + year;

      snippet.log(time); // 7:01:21 PM
      snippet.log(formattedDate); // 3/15/2016
    }
  });
});

var config = {
  attributes: true,
  attributeFilter: ['data-username']
};

// pass in the target node, as well as the observer options
observer.observe(element, config);


// change something on element
setTimeout(function() {
  element.dataset.username = 'bar';
}, 1000);

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<div class="username"></div>