首页 / 脚本样式 / JavaScript / js 实现css风格选择器（压缩后2KB）

近日在做一些OA前端界面，为了更好管理页面代码想写个js选择器，写着写着发现很费力，索性在网上找找看，功夫不负有心人， 找到一个mini css选择器，且性能不凡：以下代码是压缩后的，仅2KB。
复制代码 代码如下:
var $=（function（）{var b=/（？:[w-\.#]+）+（？:[w+？=（[""]）？（？:\1|.）+？1]）？|*|>/ig,g=/^（？:[w-_]+）？.（[w-_]+）/,f=/^（？:[w-_]+）？#（[w-_]+）/,j=/^（[w*-_]+）/,h=[null,null];function d（o,m）{m=m||document;var k=/^[w-_#]+$/.test（o）;if（！k&&m.querySelectorAll）{return c（m.querySelectorAll（o））}if（o.indexOf（","）>-1）{var v=o.split（/,/g）,t=[],s=0,r=v.length;for（;s<r;++s）{t=t.concat（d（v[s],m））}return e（t）}var p=o.match（b）,n=p.pop（）,l=（n.match（f）||h）[1],u=！l&&（n.match（g）||h）[1],w=！l&&（n.match（j）||h）[1],q;if（u&&！w&&m.getElementsByClassName）{q=c（m.getElementsByClassName（u））}else{q=！l&&c（m.getElementsByTagName（w||"*"））;if（u）{q=i（q,"className",RegExp（"（^|\s）"+u+"（\s|$）"））}if（l）{var x=m.getElementById（l）;return x？[x]:[]}}return p[0]&&q[0]？a（p,q）:q}function c（o）{try{return Array.prototype.slice.call（o）}catch（n）{var l=[],m=0,k=o.length;for（;m<k;++m）{l[m]=o[m]}return l}}function a（w,p,n）{var q=w.pop（）;if（q===">"）{return a（w,p,true）}var s=[],k=-1,l=（q.match（f）||h）[1],t=！l&&（q.match（g）||h）[1],v=！l&&（q.match（j）||h）[1],u=-1,m,x,o;v=v&&v.toLowerCase（）;while（（m=p[++u]））{x=m.parentNode;do{o=！v||v==="*"||v===x.nodeName.toLowerCase（）;o=o&&（！l||x.id===l）;o=o&&（！t||RegExp（"（^|\s）"+t+"（\s|$）"）.test（x.className））;if（n||o）{break}}while（（x=x.parentNode））;if（o）{s[++k]=m}}return w[0]&&s[0]？a（w,s）:s}var e=（function（）{var k=+new Date（）;var l=（function（）{var m=1;return function（p）{var o=p[k],n=m++;if（！o）{p[k]=n;return true}return false}}）（）;return function（m）{var s=m.length,n=[],q=-1,o=0,p;for（;o<s;++o）{p=m[o];if（l（p））{n[++q]=p}}k+=1;return n}}）（）;function i（q,k,p）{var m=-1,o,n=-1,l=[];while（（o=q[++m]））{if（p.test（o[k]））{l[++n]=o}}return l}return d}）（）;

把原版也分享下：
复制代码 代码如下:
/**
* "mini" Selector Engine
* Copyright （c） 2009 James Padolsey
* -------------------------------------------------------
* Dual licensed under the MIT and GPL licenses.
* - http://www.opensource.org/licenses/mit-license.php
* - http://www.gnu.org/copyleft/gpl.html
* -------------------------------------------------------
* Version: 0.01 （BETA）
*/
var mini = （function（）{
var snack = /（？:[w-\.#]+）+（？:[w+？=（[""]）？（？:\1|.）+？1]）？|*|>/ig,
exprClassName = /^（？:[w-_]+）？.（[w-_]+）/,
exprId = /^（？:[w-_]+）？#（[w-_]+）/,
exprNodeName = /^（[w*-_]+）/,
na = [null,null];
function _find（selector, context） {
/**
* This is what you call via x（） 这是你们所谓的经x
* Starts everything off... 开始上所有的
*/
context = context || document;
var simple = /^[w-_#]+$/.test（selector）;
if （！simple && context.querySelectorAll） {
return realArray（context.querySelectorAll（selector））;
}
if （selector.indexOf（","） > -1） {
var split = selector.split（/,/g）, ret = [], sIndex = 0, len = split.length;
for（; sIndex < len; ++sIndex） {
ret = ret.concat（ _find（split[sIndex], context） ）;
}
return unique（ret）;
}
var parts = selector.match（snack）,
part = parts.pop（）,
id = （part.match（exprId） || na）[1],
className = ！id && （part.match（exprClassName） || na）[1],
nodeName = ！id && （part.match（exprNodeName） || na）[1],
collection;
if （className && ！nodeName && context.getElementsByClassName） {
collection = realArray（context.getElementsByClassName（className））;
} else {
collection = ！id && realArray（context.getElementsByTagName（nodeName || "*"））;
if （className） {
collection = filterByAttr（collection, "className", RegExp（"（^|\s）" + className + "（\s|$）"））;
}
if （id） {
var byId = context.getElementById（id）;
return byId？[byId]:[];
}
}
return parts[0] && collection[0] ？ filterParents（parts, collection） : collection;
}
function realArray（c） {
/**
* Transforms a node collection into 转换一个节点收藏
* a real array 一个真正的阵列
*/
try {
return Array.prototype.slice.call（c）;
} catch（e） {
var ret = [], i = 0, len = c.length;
for （; i < len; ++i） {
ret[i] = c[i];
}
return ret;
}
}
function filterParents（selectorParts, collection, direct） {
/**
* This is where the magic happens. 这就是魔法发生
* Parents are stepped through （upwards） to 父母们加紧通过向上
* see if they comply with the selector. 看看他们是否符合选择器
*/
var parentSelector = selectorParts.pop（）;
if （parentSelector === ">"） {
return filterParents（selectorParts, collection, true）;
}
var ret = [],
r = -1,
id = （parentSelector.match（exprId） || na）[1],
className = ！id && （parentSelector.match（exprClassName） || na）[1],
nodeName = ！id && （parentSelector.match（exprNodeName） || na）[1],
cIndex = -1,
node, parent,
matches;
nodeName = nodeName && nodeName.toLowerCase（）;
while （ （node = collection[++cIndex]） ） {
parent = node.parentNode;
do {
matches = ！nodeName || nodeName === "*" || nodeName === parent.nodeName.toLowerCase（）;
matches = matches && （！id || parent.id === id）;
matches = matches && （！className || RegExp（"（^|\s）" + className + "（\s|$）"）.test（parent.className））;
if （direct || matches） { break; }
} while （ （parent = parent.parentNode） ）;
if （matches） {
ret[++r] = node;
}
}
return selectorParts[0] && ret[0] ？ filterParents（selectorParts, ret） : ret;
}
var unique = （function（）{
var uid = +new Date（）;
var data = （function（）{
var n = 1;
return function（elem） {
var cacheIndex = elem[uid],
nextCacheIndex = n++;
if（！cacheIndex） {
elem[uid] = nextCacheIndex;
return true;
}
return false;
};
}）（）;
return function（arr） {
/**
* Returns a unique array返回一个独特的阵列
*/
var length = arr.length,
ret = [],
r = -1,
i = 0,
item;
for （; i < length; ++i） {
item = arr[i];
if （data（item）） {
ret[++r] = item;
}
}
uid += 1;
return ret;
};
}）（）;
function filterByAttr（collection, attr, regex） {
/**
* Filters a collection by an attribute. 一个收集过滤器一个属性
*/
var i = -1, node, r = -1, ret = [];
while （ （node = collection[++i]） ） {
if （regex.test（node[attr]）） {
ret[++r] = node;
}
}
return ret;
}
return _find;
}）（）;

以上代码支持css风格样式写法包括：
复制代码 代码如下:
div
.example
body div
div, p
div, p, .example
div p
div > p
div.example
ul .example
#title
h1#title
div #title
ul.foo > * span