javascript - 通知 - 替代 Object.observe？

Question

尝试构建一个小组件，通过小型网络应用程序上的 Notifications Object 向您发送通知。因此，一旦群组中收到私有(private)消息，如果该字段的值增加或更改，则显示通知。

如果您刷新页面但它不是异步运行，这会正常工作。

随着 Object.observe() 被弃用，有人可以解释一下我将如何实现它吗？我不太明白如何使用代理来做到这一点。

非常感谢!!

为了简洁而缩短

var myGroup = 0;
var notificationCount = [];

notificationCount.push({'myGroup': myGroup});
localStorage.setItem('notificationCount', JSON.stringify(notificationCount));
var storedCounts = JSON.parse(localStorage.getItem("notificationCount");

setTimeout(function() {
    var newCountMyGroup = parseInt($('.myGroup .wrapper').text());

    if(newCountMyGroup > 0 && storedCounts[0].myGroup !== newCountMyGroup) {
        notify('New Post in My Groups', 'linkHere')
    }
}, 800);

function notify(alertMessage, alertLink) {
    if(Notification.permission !== "granted") {
        Notification.requestPermission();
    } else {
        var notificationMyGroup = new Notification(...);
        notificationMyGroup.onclick = function(){
            window.open(alertLink);
        }
    }
}

Answer 1

来自您的评论:

I want a Notification to display when the div's value changes due to a message. The setTimeout function isn't running properly. The desired outcome is for it to run async as soon as a message is received. This currently only works once you refresh the page.

我读了三遍，但您当前的代码在 800 毫秒后的页面加载时安排了一个单个定时回调。 setTimeout 只是设置一个一次性定时器。如果您希望重复此操作，请改用 setInterval。

因此，如果您想通过轮询来执行此操作，setInterval 而不是 setTimeout 即可。

如果您想在不进行轮询的情况下执行此操作，则不需要 Object.observe 或 Proxy，因为您要观察的是 DOM 元素(div)，不是 JavaScript 对象。幸运的是，有一个工具:Mutation observers .您可以观察所有 .myGroup 元素的 childList 更改，这会告诉您何时添加了新的 .wrapper，和/或观察.wrapper 元素上的 characterData/childList 通知，当它们的文本发生更改时会通知您。

这是两者的一个简单示例，请参阅评论:

var wrapperId = 0;

// Our function for when a .myGroup's child list changes
function myGroupModificationCallback(records) {
  // (Your real code would go here)
  console.log("Saw a modification to " + records[0].target.id);
  // If you want to watch wrappers, you'd set them up by calling hookUpWrapperObservers
  hookUpWrapperObservers();
}

// Hook up obervers to any  `.myGroup` elements that don't have them yet
function hookUpMyGroupObservers() {
  $(".myGroup").each(function() {
    var group = $(this);
    var ob = group.data("ob");
    if (!ob) {
      ob = new MutationObserver(myGroupModificationCallback);
      ob.observe(this, {
        childList: true
      });
      group.data("ob", ob);
    }
  });
}

// Our function for when a .wrapper's character data changes
function wrapperNotificationCallback(records) {
  // (Your real code would go here. Note you may get multiple records for the same wrapper.)
  var changes = Object.create(null);
  records.forEach(function(record) {
    changes[record.target.id] = record.target;
  });
  Object.keys(changes).forEach(function(id) {
    console.log(id + " changed: " + $(changes[id]).text());
  });
}

// Hook up observers to any .wrapper elements that don't have them yet
function hookUpWrapperObservers() {
  $(".myGroup .wrapper").each(function() {
    var wrapper = $(this);
    var ob = wrapper.data("ob");
    if (!ob) {
      var ob = new MutationObserver(wrapperNotificationCallback);
      ob.observe(this, {
        characterData: true,
        childList: true
      });
      wrapper.data("ob", ob);
      console.log(this.id + " received: " + $(this).text());
    }
  });
}

// Initial setup
hookUpMyGroupObservers();
hookUpWrapperObservers();

// Testing/demo: Add two wrappers to the first group and one to the
// second Update all three of them three times, then stop
setTimeout(function() {
  addWrapper("#group1");
  setTimeout(function() {
    addWrapper("#group2");
    setTimeout(function() {
      addWrapper("#group1");
    }, 300);
  }, 300);

  function addWrapper(selector) {
    var wrapper = $("<div class=wrapper>1</div>");
    wrapper[0].id = "wrapper" + (++wrapperId);
    $(selector).append(wrapper);
    var counter = 0;
    var timer = setInterval(function() {
      wrapper.text(parseInt(wrapper.text()) + 1);
      if (++counter == 3) {
        clearInterval(timer);
      }
    }, 300);
  }
}, 300);

<div class="myGroup" id="group1"></div>
<div class="myGroup" id="group2"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

变异观察者支持是good in modern browsers . IE9 和 IE10 实现了之前的突变事件，因此存在使用事件在这些浏览器上提供观察者行为子集的 polyfill。对于 IE8 及更早版本，您需要进行轮询。