最近上线一个新版本，需要在导航增加一个app的下载入口（一个图片链接），然后经过了正常的原型图、设计、切图、上线的过程，一切都是那么顺利。上线之后，像往常一下会让产品进行确认，所有的调整和优化都没有问题，可以正常的展示，但是发现一个奇怪的现象，在chrome下app的入口始终看不到。然后我就在我的机器上几乎看了所有的浏览器（chrome、firefox、safari、IE系列、opera），都能看到。于是我理所当然的做了以下几步：

    紧接着我就想到了是不是浏览器的插件有影响呢？是的，在看插件的时候，我看到了它，这个让我醉生梦死的她。禁用之后，发现可以正常显示了。进一步跟了一下，到底触发了一个什么样的规则，导致我一个正常的功能入口，被当做广告给拦截了。看了一下源码发现，我使用了一个nav-ad的类名，就是这个触发了adblock的规则。当然知道了什么原因导致的问题，很快就可以正常的解决这个问题。

 

    但是事情还没有完，这只是一个点，我想了一下，如果不把这个规则搞清楚的话，以后还会触发其他我们现在未知的的一些规则，导致在用户那里不能正常展示。于是我学习了一下，adblock的撰写规则，这里跟大家一块儿学习一下。

            之前讲到的规则，只要匹配上请求都无法发送。有一些拦截必须要发送请求之后才能知道是否真的需要拦截，才是可以使用到元素隐藏的规则。发现请求的数据触发了拦截的规则，此时会隐藏相应的元素。一般使用选择器进行匹配，如：http://example.com###coner-flash http://example.com##.floatgg等等            

 

    学习了撰写规则，然后在大概了解一下easylist（https://easylist-downloads.adblockplus.org/easylistchina.txt）等规则，大概知道什么情况下会触发这些规则。进而，在开发过程中，可以避免掉入这些坑里面。

 

    总结一下：通过上面的学习可以再根据easylist查看一些经常会被拦截的id、class命名，然后避免使用包含ad的类名、class名、文件名；避免使用被拦截域名下的资源；很多公司的打点统计会被拦截，这个可以通过bd联系一下，看看是否可以解决。如果打点统计被拦截之后，量足够大的话，是会直接影响数据的准确性的，所以这块儿需要重视一下。

 

 

参考资料：

https://adblockplus.org/zh_CN/filters#basic 撰写adblock Plus过滤规则

https://easylist-downloads.adblockplus.org/easylistchina.txt 过滤规则

http://bbs.kafan.cn/thread-1674209-1-1.html adblock plus官方规则说明反馈贴