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属性会去掉一个激活的类。因此采用这样的方法,我能够更好的知道用户是否点击了这个评论标签,而尽可能的将业务代码分开

版权声明:著作权归作者所有。

相关推荐

初识parcel

webpack是一个很好的web应用打包工具,但是使用webpack需要很多繁琐的配置。parcel则提供了一个零配置的方案,大大简化了使用web应用的工具的难度。Parcel特性Parcel有以下一些特性:1、相比于Webpack, Rollup以及Browserify,Parcel打包时间极快这是Parcel做的一个基准测试,基于一个合理大小的应用,包含1726个模块, 6

Tomcat 8.5新安装环境初步配置优化

下载安装Tomcatwget http://mirrors.hust.edu.cn/apache/tomcat/tomcat-8/v8.5.37/bin/apache-tomcat-8.5.37.tar.gztar zxf apache-tomcat-8.5.37.tar.gz -C /usr/localmv /usr/local/apache-tomcat-8.5.37 /usr/local/t

初识JPA

1、什么是JPA?        JPA的全称是Java Persistence API,翻译成中文就是java对象持久化应用程序接口。JPA是Sun公司在Java EE5中提出的java对象持久化应用程序接口。2、JPA的优势是什么?标准化对容器级特性支持简单易用,集成方便可媲美JDBC的查询能力支持面向对象的高级特性3、JPA的缺点是什么?性能不好?学习

理解CKEditor5的schema

我们知道,CKEditor5是一个用MVC架构设计的富文本编辑器。如上图所示,三层分别是:Model,Controller, View首先,第一个问题是schema属于那一层?经过官方文档的初步学习,我们可以看到:editor.model.schema; // -> The model's schema.因此,我们可以得出结论:schema属于模型层:其次我们需

初步理解RxJs

         学习是一个由浅入深的过程,如果能够理解并掌握二八原则(帕累托法则),那么我们对知识的学习定会事半功倍,甚至事半多倍。对基础知识的理解决定了对知识理解的深度。RxJs定义        RxJS是ReactiveX在JavaScript上的一个派生。ReactiveX是一个应用比较广泛的响应式

RxJs——subject理解一

什么是subject首先我们来理解什么是subject,按照官方的定义:A Subject is a special type of Observable that allows values to be multicasted to many Observers.Subjects are like EventEmitters.从定义我们看出subject就是一种允许发送值到多个观察者的特殊类型的

RxJs——Subject理解二

上一节我们对subject有了初步理解,今天我们继续学习subjectReplaySubject介绍这个ReplaySubject之前,我们说下一种使用场景1、我们创建一个subject2、在应用的某个地方,我们向subject推送值,但此时没有订阅3、在某个时点,有第一个观察者开始订阅4、我们期望观察者能接收之前主题推送的值(可能是全部值或者时其中一个)5、实际上啥都没发生,因为主题不能存储记忆

javascript——generator理解

最近在学习CK5的时候,遇到了一个函数:function* _getAllUpcastDefinitions( definition ) { if ( definition.model.values ) { for ( const value of definition.model.values ) { const model = { key: definition.model.key

RxJs——Subscription理解

我們前段時間學習了Observable相關的知識,今天我們學習另一個重要的概念:Subscription。首先,我們看看Subscription官方文檔的介紹如下:What is a Subscription? A Subscription is an object that represents a disposable resource, usually the execution of an