一直有人在重复同一个问题：XX怎么学？技能怎么提升？我也回答过好几次这样的问题：动手去做。每次都换来一个更迷茫的回复：做什么啊？于是这里我从最近的一个小经历出发，分享一下我是怎么找到做什么的，以及怎么从做什么里面学习和积累的。
故事的起因很简单：有个叫leanpub的自出版网站，上面有许多作者跳过出版社在网络上出版技术书籍。上面书籍的质量都不错，还有一些作者很大方，在线阅读免费。比如我最近就在读NicholasC.Zakas的新书《Understading ECMAScript6》：
有什么问题呢？看到顶部的那个卖书的顶部条和右下角的税率提示了吗？这两个东西会随着页面一直滚动，让我这种有强迫症的人心里难受得不行。是可忍孰不可忍，立刻动手弄掉他们吧。
先用inspect element查看这两个DOM元素，找到他们的id分别是'quick-buy'和'taxamo-confirm-country-overlay'。然后就简单了，用document.getElementById()找出这两个node再分别remove()掉就可以了。
如果只到这里就满足，那我也不会来写这篇文章了。当年我从老师那学来一句话"Can we do better?"。这个简单做法的问题就在于每次刷新页面都得重复着几个指令，真是太麻烦了。作为一个极其懒惰的人，我问了自己一个问题：能自动化吗？能每次加载这个页面，甚至访问这个网站的其他书籍的时候自动运行这个脚本吗？
虽然我眼下没有解决方案，但我依稀记得firefox上有一个插件能做类似的工作。这个插件就是大名鼎鼎的Greasemonkey！该插件的作用就是在制定的页面加载制定的用户脚本，我们可以利用用户脚本来定制页面的行为和属性。
四下一搜，有了这个[小教程](http://hayageek.com/greasemonkey-tutorial/。Greasemonkey的自定义脚本其实非常简单，选择add user script之后就是一个脚本编辑器。只要在js代码前插入一定格式初始化条件就可以了。以上面提到的例子来说：
// ==UserScript==
// @name leanpub
// @namespace xnie
// @description neat leanput online reading
// @include https://leanpub.com/*
// @version 1
// @grant none
// ==/UserScript==
我们这里稍作讲解：
- @name：脚本的名字
- @namespace：脚本的命名空间
- @description：对脚本作用的简短描述
- @include：这个比较重要，是该脚本启用的url。这里我用了*来表示对leanpub的所有页面都启用
- @version：版本号
- @grant：要使用的特殊api，我们这里不使用
只要插件启用了，在加载include的url后后面的JS脚本就会加载执行了。于是我试着将刚才说过的几句加进去:
// ==UserScript==
// @name leanpub
// @namespace xnie
// @description neat leanput online reading
// @include https://leanpub.com/*
// @version 1
// @grant none
// ==/UserScript==
var quickBuy = document.getElementById('quick-buy');
var taxamo = document.getElementById('taxamo-confirm-country-overlay');
if (quickBug) quickBuy.remove();
if (taxamo) taxamo.remove();
看起来好像没有什么问题了，刚才能用现在也一定可以。可执行的结果却有些意外，顶部的购买条是去掉了，右下角的税率提示黑框却一直都在。
这是怎么回事呢？仔细想想，再用inspect element观察了一下页面加载的行为，问题找到了。顶部购买条本来就是DOM模板的一部分，因此页面加载完后是肯定可以按id找到它然后删除的。
右下角的税率提示框就不一样了，它是在页面加载完成后注入的node。想想也是正常的，每个国家地区的税率都不尽相同，总得先知道你的国家再提示吧。在页面加载完成后必然有一个脚本检查你的ip段，然后再提示相应国家的税率。正因为有这么一个分析执行再注入node的过程，页面加载后就立即执行的greasemonkey脚本是找不到taxamo的，此时该node还未注入呢。
问题找到了，该如何解决呢？思路是必须等taxamo注入DOM后再执行查找和删除。我第一时间想到的是一个简单粗暴的方法：setTimeout。立即执行步行，等一会再执行总行了吧？一试，还真行！
故事写到这，我们找到了一个能用的方法，可以结束了吗？别忘了问自己那句话：can we do better? 这个方法的问题是不准确，我们怎么知道什么时候node注入了，setTimeout要等多久呢？对于有强迫症的我，多等一秒也是不能忍啊！更何况我可不想被说人这个傻X，居然用setTimeout来处理async的问题。
那么有什么方法可以知道什么时候DOM被注入了呢？继续思考下去，想起当年我做远程面试时用过的一个方法：[MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver。这个方法提供了一个对DOM变动作出响应的手段：
MutationObserver( function callback);
callback将在DOM发生改变时被触发，并传入这些改动的信息。通过这个callback我们就可以探测到taxamo的注入啦。
实例化MutationObserver需要两个参数：第一个是要监测的对象，第二个是设置选项。这里我们需要监测的是整个页面的body节点，也就是document.body：
var target = document.body;
第二个设置选项主要是来控制变动时报告的信息，对我们来说最重要的就是子节点的添加，也就是childLis为true：
var config = { attributes: true, childList: true, characterData: true };
前面我们说过，callback在DOM改变时被触发。但注入DOM可不止taxamo一个node，怎么找到我们需要的节点呢？
这里关键的就在于这个callback了。首先要知道callback被触发时会带有一个对我们来说最重要的参数：一个MutationRecord的array，这里面包含了所有变动的的信息。
继续查找文档的MutationRecord章节，一眼就发现了我们需要的东西：addedNodes。该属性是一个所有新添加节点的NodeList。通过遍历他就可以定位taxamo了。
好了，思路清楚了，开始写callback吧：
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
var addedNodeList = mutation.addedNodes;
var filter = [].filter;
var taxamoList = filter.call(addedNodeList, function(node) {
return (node.id === 'taxamo-confirm-country-overlay');
});
if (taxamoList.length > 0) {
taxamoList.forEach(function(taxamo) {
taxamo.remove()
});
observer.disconnect();
}
});
});
可以看到，我用了forEach来遍历MutationRecord的数组。然后用了一个filter在nodeList中找出已注入的taxamo节点，最后删除就是了。需要注意的时nodeList不是array，所以不能直接套用array的方法。这里我用了一个call在nodeList上使用filter。另外，节点删除后，不再需要检测页面的改动了，于是用observer.disconnect()来结束检测。
现在清爽了，每次加载页面就自动屏蔽掉烦人的东西了，一秒钟都不会污染你的眼睛。
完整的脚本在这里。
P.S: 除了Firefox, chrome也有一个类似的自动脚本插件Tampermonkey
一个小问题和一点不妥协的劲儿，我学会使用了强力的Greasemonkey。另外，就在这个数十行的小脚本里，我了解了如何对DOM变动作出响应，学到了nodeList和array的不同，复习了DOM的基本操作。收获不错，不是么？现在你还迷茫做什么吗？从你身边一切让你不爽的东西做起！
