나는 최근에 일부 OA 프런트엔드 인터페이스를 작업하고 있는데, 페이지 코드를 더 잘 관리하기 위해 js 선택기를 작성하고 싶었습니다. 그래서 그냥 온라인으로 검색해 본 결과 성과가 있었습니다. 성능이 좋은 미니 CSS 선택기 특별함: 다음 코드는 2KB로 압축되었습니다.
var $=(function(){var b=/ (?:[w-\.#] ) (?:[w ?=(['"])?(?:\1|.) ?1])?|*|>/ig,g =/^ (?:[w-_] )?.([w-_] )/,f=/^(?:[w-_] )?#([w-_] )/,j=/ ^([ w*-_] )/,h=[null,null];함수 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
exprClassName = /^(?:[w-_] )?.([w- _] )/,
exprId = /^(?:[w-_] )?#([w-_] )/,
exprNodeName = /^([w*-_] )/,
na = [null,null];
function _find(selector, context) {
/**
* これは x() 経由で呼び出すものです これは x 経由で呼び出すものです
* すべてを開始します... すべてを開始します
*/
context = context || var simple = /^ [w-_#] $/.test(selector);
if (!simple && context.querySelectorAll) {
return realArray(context.querySelectorAll(selector));
if ( selector.indexOf(',')
for( ; sIndex < sIndex) {
ret = ret.concat(_find[sIndex], context) );
return unique(ret); 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]:[];
}
}
パーツ[0] && コレクション[0]を返しますか? filterParents(パーツ, コレクション) : コレクション;
}
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];
}
ret を返します。
}
}
function filterParents(selectorParts, collection, direct) {
/**
* ここで魔法が起こります。
* 親が (上向きに)
* セレクターに準拠しているかどうかを確認します。*/
varparentSelector = 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,親、
が一致します。
ノード名 = ノード名 && ノード名.toLowerCase();
while ( (node = collection[ cIndex]) ) {
parent = node.parentNode;
do {
matches = !nodeName ||ノード名 === '*' ||ノード名 === 親.ノード名.toLowerCase();
一致 = 一致 && (!id ||parent.id === id);
matches = matchs && (!className || RegExp('(^|\s)' className '(\s|$)').test(parent.className));
if (直接 || 一致) { ブレーク; }
} while ( (parent =parent.parentNode) );
if (一致) {
ret[ r] = ノード;
}
}
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 queueIndex = elem[uid],
nextCacheIndex = n ;
if(!cacheIndex) {
elem[uid] = nextCacheIndex;
return false;
})();
return function(arr) {
/**
* 一意の配列を返します 一意の配列を返します
*/
var length = arr.length,
ret = [],
r = -1,
i = 0,
item;
for (; i < length; i) {
item = arr[i ];
if (データ(アイテム)) {
ret[r] = アイテム;
リターン
}; 🎜>})();
function filterByAttr(collection, attr, regex) {
/**
* 属性によってコレクションをフィルターします。コレクション フィルターと属性
*/
var i = -1, node, r = -1, ret = [];
while ( (node = collection[ i]) ) {
if (regex.test(node[attr])) {
ret[ r] = ノード;
}
}
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 > * 스팬
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
