TAT.melody css捕捉器的实现
In Web开发,作品 on 2011年12月09日 by view: 3,583
2

这个工具的实现,是我长久以来的一个愿望,缘于之前看到的蓝色理想上的一个代码捕捉器。当时我下下来用了一下,没仔细研究,只觉得很难用,于是心底就有了一颗种子,希望有一天自己能开发出这样的工具。感谢伟大的谷歌,给了我一种优雅的实现方式——谷歌插件。

下面说说技术部分:

一开始用的是浏览器原生的css rules,可是后来发现谷歌的css rules是经过解析的,而ie的不是。由于对谷歌的偏爱,所以不得不另辟蹊径。凑巧之前又看到了谷歌的另一个插件——Web Developer,可以把页面引用到的css文件内容都显示出来。于是,在控制台把代码复制了下来,考到了我的js里面。它的实现原理是用ajax请求把所有css文件内容给抓下来,这涉及到一个跨域问题。不过不用怕,我们是插件嘛,当然有特殊的权利——跨域ajax请求。

css内容抓下来后,怎么分析呢?一开始想用简单的split方式进行解析。可在对腾讯微博的页面进行测试后,发现不对。于是,仔细查看css内容,原来是@keyframes和expression搞的鬼。于是,没办法,只能循环字符串,进行字符串匹配了。写起来,发现没想象的复杂,很简单。下面贴出解析函数的代码:

把cssrules读出来之后,我们需要把有用的css给提取出来。这里,我们先把dom节点给复制出来,直接outerHTML就行了(嘻嘻,原来很多ie独有的东西现在chrome都支持了)。然后呢,我们需要用到两个伟大的函数:一个是querySelector(或querySelectorAll),还有webkitMatchesSelector。这两个函数都是dom节点具有的方法,接受一个selector(即css的选择器),前面一个是在dom节点的子节点下面寻找满足selector的节点,后面那个是判断节点自身是否匹配selector。这里,要注意querySelector是在整个文档的基础下进行判断某个节点是否满足selector。即这个dom节点处在这个文档里,是否满足这个selector,而不是说单纯在我们抽出来的这段html里是否满足这个selector。有了这两个函数,我们就可以知道我们提取出来的cssrules的selector是否匹配我们提取出来的这段html了,也就知道这个cssrules是不是我们需要的了。当然,其实接下来还要做许多工作,比如去掉没用的selector,去掉selector没用的上级限制(因为匹配这些selector的上级节点不在我们选取的html里)。不过,基本的思路就是这样了。
截图:


插件地址:https://chrome.google.com/webstore/detail/emajkockhmibmpnkbohiipfidkifdjhp?hl=zh-CN

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2011/12/css%e6%8d%95%e6%8d%89%e5%99%a8%e7%9a%84%e5%ae%9e%e7%8e%b0/

  1. Shinry_zhang 2015 年 8 月 6 日

    报错了,用不了,博主能不能更新下程序

  2. excel学习网 2014 年 6 月 9 日

    请问你这个工具是做什么用的,我好像没看懂你的目的。

发表评论