js implements css style selector (2KB after compression)_javascript skills

I have been working on some OA front-end interfaces recently. In order to better manage the page code, I wanted to write a js selector. I found it very laborious, so I simply searched online. The hard work paid off. I found a mini css selector with good performance. Extraordinary: The following code is compressed, only 2KB.

Copy code The code is as follows:

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"){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

Share the original version:

Copy the code The code is as follows:

/**
* "미니" 선택기 엔진
* Copyright (c) 2009 James Padolsey
* ------------- ----------------
* MIT 및 GPL 라이센스에 따라 이중 라이센스가 부여되었습니다.
* - http://www.opensource.org/licenses/mit-license.php
* - http://www.gnu.org/copyleft/gpl.html
* ---- ------------------------------------- -
* 버전: 0.01(베타)
*/
var mini = (function(){
var 스낵 = /(?:[w-\.#] ) (?:[w ?= (['"])?(?:\1|.) ?1])?|*|>/ig,
exprClassName = /^(?:[w-_] )?.([w- _] )/,
exprId = /^(?:[w-_] )?#([w-_] )/,
exprNodeName = /^([w*-_] )/,
na = [null,null];
function _find(selector, context) {
/**
* 이것은 x()를 통해 호출하는 것입니다. 이것은 x를 통해 호출하는 것입니다.
* 모든 것을 시작합니다... 모든 것을 시작합니다
*/
context = context || [w-_#] $/.test(selector);
if (!simple && context.querySelectorAll) {
return realArray(context.querySelectorAll(selector))
}
if ( selector.indexOf(',') > -1) {
var 분할 = selector.split(/,/g), ret = [], sIndex = 0, len = 분할.길이
for( ; sIndex < sIndex) {
ret = ret.concat( _find(split[sIndex], context) )
}
return Unique(ret); parts = selector.match(snack),
part = parts.pop(),
id = (part.match(exprId) || na)[1],
className = !id && (부분 .match(exprClassName) || na)[1],
nodeName = !id && (part.match(exprNodeName) || na)[1],

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);
ID로 반환하시겠습니까?[byId]:[];
}
}
부품 반품[0] && 컬렉션[0] ? filterParents(parts, collection) : 컬렉션;
}
function realArray(c) {
/**
* 노드 컬렉션을 노드 컬렉션으로 변환
* 실제 배열 실제 배열
*/
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) {
/**
* 여기서 마법이 일어납니다.
* 부모가
* 장치 선택
을 준수하는지 확인합니다.*/
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, 부모,
일치;
nodeName = nodeName && nodeName.toLowerCase();
while ( (노드 = 컬렉션[ cIndex]) ) {
parent = node.parentNode;
do {
일치 = !nodeName || nodeName === '*' || nodeName === parent.nodeName.toLowerCase();
일치 = && 일치(!id || parent.id === id);
일치 = 일치 && (!className || RegExp('(^|\s)' className '(\s|$)').test(parent.className));
if (직접 || 일치) { break; }
} while ( (parent = parent.parentNode) );
if (일치) {
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;
반환 함수 (elem) {
var 캐시Index = elem[uid],
nextCacheIndex = n
if(!cacheIndex) {
elem[uid] = nextCacheIndex;
return true; }
return false;
};
return function(arr) {
/**
* 고유한 배열을 반환합니다. 고유한 배열을 반환합니다.
*/
var length = arr.length,
ret = [],
r = -1,
i = 0,
항목
for (; i item = arr[i; ];
if (data(item)) {
ret[ r] = item;
}
}
uid = 1;
return; 🎜>})();
function filterByAttr(collection, attr, regex) {
/**
* 속성을 기준으로 컬렉션을 필터링합니다.
*/
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