一直有人在重复同一个问题: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的基本操作。收获不错,不是么?现在你还迷茫做什么吗?从你身边一切让你不爽的东西做起!