MutationObserver初步理解

最近在学习怎么样给网站埋点，举个例子来说，我在文章中有了一些评论的信息，我需要知道这些评论信息是否被点击和查看，一种常用的做法就是在这些标签上绑定点击事件，然后在事件回调函数中向后台发送信息，从而判断这个文章中的评论是否有被点击和查看。

今天我将尝试采用另外一种做法，来判断文章中的评论有没有被点击查看过。

首先，我们需要知道的是用户在点击评论标签的时候，文章对应的dom是否发生变化？

其次，我会用MutationObserver来监控文章的dom是否发生变化？

再次，我会对发生变化的数据进行也许需要的过滤处理，然后将过滤后的数据发送到后台进行分析。

第一步，创建一个基础的类：

define(function(require){
    const config = {
      childList: true,  // 观察目标子节点的变化，是否有添加或者删除
      attributes: true, // 观察属性变动
      subtree: true     // 观察后代节点，默认为 false
    }

    const mapperObserver = {};

    let CustomMutationObserver = {
        observe(target,name,callback){
            if (mapperObserver[name]) {
                mapperObserver[name].observe(target, config);
            } else {
                mapperObserver[name] = new MutationObserver(callback);
                mapperObserver[name].observe(target, config);
            }
            return this;
        },
        disconnect(name) {
            if (mapperObserver[name]){
                mapperObserver[name].disconnect();
            }
        }
    };
    return CustomMutationObserver;
});

这个类主要为不同的监控区域创建不同的MutationObserver,并且不同的区域可以传递不同的回调函数。其实在这里也可以考虑用同一个回调函数，因为这个回调函数的目的就是将dom的变化发送出去给另一个数据过滤和发送的模块进行处理。

第二步，监控指定区域的dom变化

var myObserver = require('custom.observer');
var targetEditor = document.querySelector('.editor');
myObserver.observe(targetEditor,'targetEditor',function(datas,observer){
    console.log('targetEditor changeDatas:',datas);
});

我的页面情况是这样的：

我的文章区域有两个标注评论，一点点击它们之后就会弹出评论信息，如下图所示：

我现在需要知道是否有人在点击查看这个功能

经过查看日志信息可以得知：

在点击的过程中，目标元素有两个属性发生了变化，其一是class属性有null变成了一个特定的值，其二是data-comment属性也有null变成了另一个值，因此，我一旦知道了这两个值中有一个值发生了变化，我就知道有人点击了这个标签评论，在这样的情况下，我可以选择只监听一个属性class就可以啦，因为另一个属性对我来说可能意义不大，不过呢，这个data-comment属性具有唯一性，我可以将它作为一个标识符，一旦以后再次点击这个评论，我就可以忽略掉，因为我只是想知道这个评论是否点击而已。

当我增加了只过滤class属性之后，看到的日志如下：

可以看到当我点击的时候，class的属性会增加一个激活，而当取消的时候，class属性会去掉一个激活的类。因此采用这样的方法，我能够更好的知道用户是否点击了这个评论标签，而尽可能的将业务代码分开。