TAT.melody css 捕捉器的实现
In Web开发,作品 on 2011年12月09日 by view: 3,615
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 日

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

发表评论