js 实现css风格选择器(压缩后2KB)_javascript技巧

近日在做一些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

时间: 2024-11-02 17:42:53

js 实现css风格选择器(压缩后2KB)_javascript技巧的相关文章

移动端使用localStorage缓存Js和css文的方法(web开发)_javascript技巧

将jquery和公共样式缓存到localStorage,可以减少Http请求,从而优化页面加载时间,下面的代码可以实现此功能: <script type="text/javascript"> //入口函数 if (window.localStorage) { initJs(); initCss("css", "/gfdzp201508257998/Turntable/Style/css_whir.css"); } else { add

动态加载js、css等文件跨iframe实现_javascript技巧

1.动态加载js,css文件(用原生js和jquery) iframe结构: frame0(父) frame2(子) frame3(子) frame2中触发事件,动态的向frame3中 加载js.css文件和 dom元素? *同级之间可以调用,可以 通过 子-父-子 的方式调用同级 parent.parentFram("这个方法在调用其他子farme"); 1.jquery的append() 复制代码 代码如下: 速度快,同步(需要引入jquery) var oBody = docum

Ajax清除浏览器js、css、图片缓存的方法_javascript技巧

做东东时都是把图片在服务器的地址存放在数据库里面,然后到浏览器中显示,但是后来发现了两个问题. 第一:为了安全起见,js是无法读取本地的图片的,不然你写一个js,岂不是可以获取任何人电脑里面的文件了. 第二:图片存在的是在服务器的硬盘上面,而不是在客户的硬盘里面,所以也是取不到的 后来在网上找方法,找的方法,都是各种转换二进制到xml中,的各种高大上的答案,然后本人又实在太懒了,就自己想了一个 方法,就是利用BufferedImage这个类. 开始 首先说说我的思路,就是把本地的图片,加载到内存

php,js,css字符串截取的办法集锦_javascript技巧

可能没什么含量,求少拍砖.首先是PHP版本的. 复制代码 代码如下: <?php echo mb_strimwidth("这里是内容", 0,3,"...","utf-8"); ?>  其实只用mb_strimwidth一个函数就可以了,该函数的说明如下: mb_strimwidth - 获取按指定宽度截断的字符串 string mb_strimwidth ( string $str , int $start , int $width

js+html+css实现鼠标移动div实例_javascript技巧

js: 复制代码 代码如下: var posX; var posY; fdiv = document.getElementById("divBody"); document.getElementById("divHead").onmousedown=function(e) { if(!e) e = window.event; //IE posX = e.clientX - parseInt(fdiv.style.left); posY = e.clientY - p

利用YUI Compressor对JS、CSS文件进行压缩

YUI Compressor简介 JS/CSS文件压缩工具,压缩原因以及作用自行脑补,更多介绍可查看 http://yui.github.io/yuicompressor/ 下载地址 地址:https://github.com/yui/yuicompressor 如何使用 首先要确保安装了JDK,关于JDK的安装,可参考http://www.cnblogs.com/chyingp/archive/2013/04/09/jdk.html 下面拿个简单的例子做演示(macx控制台下操作,window

require.js 加载 vue组件 r.js 合并压缩的实例_javascript技巧

准备: vue.js 原本是学习vue组件 require.js 然后想到用require 加载 r.js 文件太多 合并 文件目录 忽略部分文件及文件夹 一.先说vue 组件 先引入vue 再引入vue组件 Vue.extend({}) 定义组件 template data methods Vue.component(),注册组件的标签,标签在html中是一个挂载点 new Vue() 进行实例化 index.html // css引入 略 <div id="header"&g

纯js和css完成贪吃蛇小游戏demo_javascript技巧

本文实例为大家分享了js贪吃蛇小游戏demo,纯js和css完成,供大家参考,具体内容如下 <!doctype html> <html> <meta charset="utf-8"> <head> <style> *{ margin: 0; padding:0; } .content{ position: absolute; width: 500px; height: 500px; background-color: #212

js实现点击文本框显示日期选择器特效代码分享_javascript技巧

为大家分享的JavaScript图片轮播代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js点击文本框显示日期选择器</title> <link type="text/css" rel="stylesheet" href="calen