最近上線一個新版本，需要在導航增加一個app的下載入口（一個圖片鏈接），然后經過了正常的原型圖、設計、切圖、上線的過程，一切都是那么順利。上線之后，像往常一下會讓產品進行確認，所有的調整和優化都沒有問題，可以正常的展示，但是發現一個奇怪的現象，在chrome下app的入口始終看不到。然后我就在我的機器上幾乎看了所有的瀏覽器（chrome、firefox、safari、IE系列、opera），都能看到。於是我理所當然的做了以下幾步：
- 讓產品清除緩存看一看，之前有過這種情況，由於樣式資源存在緩存導致沒有正常顯示，結果，沒有顯示
- 懷疑是不是那台機器沒有上啊（我很不想出現這個，這會導致上線腳本等一系列問題），去看了產品的機器，發現其他調整了的都能正常運行，應該可以排除這個問題了
緊接着我就想到了是不是瀏覽器的插件有影響呢？是的，在看插件的時候，我看到了它
，這個讓我醉生夢死的她。禁用之后，發現可以正常顯示了。進一步跟了一下，到底觸發了一個什么樣的規則，導致我一個正常的功能入口，被當做廣告給攔截了。看了一下源碼發現，我使用了一個nav-ad的類名，就是這個觸發了adblock的規則。當然知道了什么原因導致的問題，很快就可以正常的解決這個問題。
，這個讓我醉生夢死的她。禁用之后，發現可以正常顯示了。進一步跟了一下，到底觸發了一個什么樣的規則，導致我一個正常的功能入口，被當做廣告給攔截了。看了一下源碼發現，我使用了一個nav-ad的類名，就是這個觸發了adblock的規則。當然知道了什么原因導致的問題，很快就可以正常的解決這個問題。
但是事情還沒有完，這只是一個點，我想了一下，如果不把這個規則搞清楚的話，以后還會觸發其他我們現在未知的的一些規則，導致在用戶那里不能正常展示。於是我學習了一下，adblock的撰寫規則，這里跟大家一塊兒學習一下。
- 基本過濾規則
要攔截的url地址，如：http://example.com
- 定義例外規則
可以使用@@表示后面的是例外，不會攔截；也可以配合|使用。如：@@|http://example.com
- 匹配網址開頭和結尾
使用管線符號|表示最前端或者最末端。如：阻擋以swf結尾，swf|；阻擋以http開頭的，|http。
- 標記分隔符
通常需要接受過規則的任何分隔符，分隔符可以除了字母、數字或_-.%之外的任意字符。
- 注釋
使用！作為注釋的開始，也可以在注釋的上面書寫任何想些的文案。
- 制定過濾規則選項
- 使用正則表達式
通過正則表達式書寫過濾規則，但是出於性能考慮，不建議使用。
- 元素隱藏
之前講到的規則，只要匹配上請求都無法發送。有一些攔截必須要發送請求之后才能知道是否真的需要攔截，才是可以使用到元素隱藏的規則。發現請求的數據觸發了攔截的規則，此時會隱藏相應的元素。一般使用選擇器進行匹配，如：
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過濾規則
http://bbs.kafan.cn/thread-1674209-1-1.html adblock plus官方規則說明反饋貼