过滤器 选择器问题

[worry127722]

你好麻烦您能不能 出一份 过滤器 和 选择器的详细使用说明，最好是有例子的，我在使用过程中发现 page-monitor 如果只筛选某一类型的标签 或者 class name 部分无效，谢谢，我说的选择器是：attributeFilters: [ ],
includeSelectors: [],
excludeSelectors: [],
ignoreTextSelectors: [],
ignoreChildrenSelectors: [],

[fouber]

@worry127722

attributeFilters

一个数组，用于追踪元素的，默认值是 [ "id", "class" ]。就是说默认情况下，page-monitor在判断两个元素是否匹配的时候，会根据元素标签、id和class来判断元素是否一致。说的有点难理解，给你举个例子，假设我们有这样一段html结构：

...
<div>
    <div>1</div>
    <div>2</div>
    <div class="foo">3</div>
</div>
...

过了一段时间之后，html结构变成了：

...
<div>
    <div>1</div>
    <div class="foo">3</div>
</div>
...

这里涉及到diff算法的问题，如果我们只是根据元素标签来对比元素，你会发现前后两个版本的映射结果是：

这样，diff的结果就会认为左边的 <div class="foo">3</div> 这个元素被删除了。也就说，如果我们只看元素标签来进行diff过程中的配对就不是很合理。

基于这样的思考，我引入了元素的其他属性作为标识，最常见的标识就是id和class，也就说，如果一个元素有class或者id属性，那么能与它匹配的元素也必须有这些属性，并且值相等。引入这种匹配机制之后，之前的问题就不存在了：

这个时候，算法就能发现被删除的元素是 <div>2</div> 了。

当然，这招并不是万灵，有些ui组件库会给元素赋值一些随机数id，这会导致算法始终认为元素被删除，因此遇到这样的页面，可以选择忽略class或者id，虽然效果有些折扣，但总算是用的过去