通知-替代Object.observe？

Question

试图构建一个小组件，通过Notifications Object在一个小型web应用程序上发送通知。因此，一旦在组中接收到私有消息，如果字段的值增加或更改，则显示通知。

如果刷新页面，但它不是异步运行的，这是很好的。

在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

从你的评论：

当div的值由于一条消息而发生变化时，我希望显示一个通知。setTimeout函数没有正常运行。期望的结果是，一旦收到消息，它就会运行异步。目前，这只在刷新页面之后才能工作。

我已经读过它三次了，但是您当前的代码会在页面加载时安排一个时间上的回调，时间为800 on。setTimeout只是设置了一个一次性计时器.如果希望重复这种情况，则使用setInterval代替。

因此，如果您想通过轮询来完成这一任务，那么setInterval而不是setTimeout将执行此操作。

如果不想进行轮询，就不需要Object.observe或Proxy，因为要观察的是DOM元素( div)，而不是JavaScript对象。幸运的是，有这样一个工具：突变观测器。您可以观察childList对所有.myGroup元素的更改，这将告诉您何时添加了新的.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>

​

突变观测器支持为在现代浏览器中很好。IE9和IE10实现了以前的突变事件，因此有一些使用事件来为这些浏览器提供观测器行为子集的复合填充。对于IE8和更早版本，您需要进行投票。

Answer 2

下面是一个使用代理的简单演示。

​

let o = {a: 1, b: 2};

let p = new Proxy(o, {
  get: (target, name) => {
    console.log(`getting ${name} on ${target}: ${target[name]}`)
    return target[name];
  },
  set: (target, name, value) => {
    console.log(`setting ${name} to ${value} on ${target}`)
    target[name] = value;
  }
});

p.a;     // getting a on [object Object]: 1
p.a = 5; // setting a to 5 on [object Object]
p.a;     // getting a on [object Object]: 5

​

与其执行console.log，不如将其连接到任何您想要的事件处理程序。

你可以做一些类似..。

set: (target, name, value) => {
  event.emit(`set:${name}`, target, value, target[name]);
  target[name] = value;
}

..。或者任何对你有用的东西。