打造小于5KB的jQuery计划先留个言

作者: 唐斌

2 二 2010

一遍学习一边记录。陆续加入常用功能，语法沿用jQuery。压缩后尽量控制在5KB之内
CSS选择器引擎部分我使用了(mini)Selector Engine，据测试效率比jQuery高一点

支持选择器：

tag
tag > .className
tag > tag
#id > tag.className
.className tag
tag, tag, #id
tag#id.className
.className
span > * > b

目前功能支持（2010-02-02）:

DOM Ready （文档就绪即可加载脚本，不必等待图片或iframe）
事件绑定

完全模拟jQuery语法风格：

$(function(){
	$('#search > input.text').focus(function(){
		if(this.value == '搜索..') this.value = '';
		this.style.cssText = 'background:#FFC;';
	}).blur(function(){
		if(this.value == '')this.value = '搜索..';
		this.style.cssText = '';
	});
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">
(function(){
window._$ = window.$;
var query = window.query = window.$ = function(data){
	if (typeof data == 'string') {
		var selector = selectorEngine(data);
		return new query.fn.init(selector);
	}else{
		return new query.fn.ready(data);
	};
};
query.fn = query.prototype = { 
	init: function(selector){
		if(selector) this.data = selector;
		return this;
	},

	//DOM就绪
	ready: !+'\v1' ? function(f){
		(function(){
			try{
				document.documentElement.doScroll('left');
			} catch (error){
				setTimeout(arguments.callee, 0);
				return;
			};
			f();
		})();
	} : function(f){
			document.addEventListener('DOMContentLoaded', f, false);
	},

	//绑定事件
	bind: function(type,fn){
		var i = -1, l = this.data.length;
		if (window.addEventListener){
			while (++i < l){
				this.data[i].addEventListener(type, fn, false);
			};
		} else {
			e = "on" + type;
			while (++i < l){
				var d = this.data[i];
				d.attachEvent(e, (function(d){
					return function(){
						fn.call(d);
					}
				})(d));
			};
		};
		return this;
	}, 

	//事件列表
	blur: function(f){return this.bind('blur',f)},
	focus: function(f){return this.bind('focus',f)},
	load: function(f){return this.bind('load',f)},
	resize: function(f){return this.bind('resize',f)},
	scroll: function(f){return this.bind('scroll',f)},
	unload: function(f){return this.bind('unload',f)},
	click: function(f){return this.bind('click',f)},
	dblclick: function(f){return this.bind('dblclick',f)},
	mousedown: function(f){return this.bind('mousedown',f)},
	mouseup: function(f){return this.bind('mouseup',f)},
	mousemove: function(f){return this.bind('mousemove',f)},
	mouseover: function(f){return this.bind('mouseover',f)},
	mouseout: function(f){return this.bind('mouseout',f)},
	mouseenter: function(f){return this.bind('mouseenter',f)},
	mouseleave: function(f){return this.bind('mouseleave',f)},
	change: function(f){return this.bind('change',f)},
	select: function(f){return this.bind('select',f)},
	submit: function(f){return this.bind('submit',f)},
	keydown: function(f){return this.bind('keydown',f)},
	keypress: function(f){return this.bind('keypress',f)},
	keyup: function(f){return this.bind('keyup',f)},
	error: function(f){return this.bind('error',f)}
};
query.fn.init.prototype = query.fn;
})();
(function($){ 
	$.noConflict = function(){ 
		window.$ = window._$;
	};
})(query);
//query.noConflict();

//(mini)Selector Engine
var selectorEngine=(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})();
</script>

<script type="text/javascript">
//---------------------------------------------------------演示代码 //////
$(function(){ 
	$('li').mouseover(function(){
		this.style.cssText = 'background:#000; color:#FFF; cursor:pointer';
	}).click(function(){
		this.style.cssText = 'background:#F00; color:#FFF;';
	});

	$('#search > input.text').focus(function(){
		if(this.value == '搜索..') this.value = '';
		this.style.cssText = 'background:#FFC;';
	}).blur(function(){
		if(this.value == '')this.value = '搜索..';
		this.style.cssText = '';
	});

	$('#search').submit(function(){
		alert('hello world');
		return false;
	});
});
</script>
</head>
<body>
<div id="wrap" style="width:550px;">
<h3>Usage:</h3>
<pre>
$(function(){
	$('#search > input.text').focus(function(){
		if(this.value == '搜索..') this.value = '';
		this.style.cssText = 'background:#FFC;';
	}).blur(function(){
		if(this.value == '')this.value = '搜索..';
		this.style.cssText = '';
	});
});</pre>
<form id="search" action="" method="get">
<input class="text" name="" type="text" value="搜索.." />
  </form>
<h3>Supported Selectors:</h3>
<ul>
<li id="test">tag</li>
<li>tag > .className</li>
<li>tag > tag</li>
<li>#id > tag.className</li>
<li class="this">.className tag</li>
<li>tag, tag, #id</li>
<li>tag#id.className</li>
<li>.className</li>
<li>span > * > b</li>
</ul>
<div id="DOMready">
<h4>DOM Ready Test</h4>
<p>    <iframe src="http://www.qq.com" style="width:300px; height:200px; overflow:hidden;"></iframe></p>
<div style="width:300px; height:200px; overflow:hidden;"> <img src="http://img9.zol.com.cn/desk_pic/big_304/303619.jpg" /> </div>
</p></div>
</div>
<p></body><br />
</html><br />

14 Responses for "打造小于5KB的jQuery计划"

aob 说：

2010年07月30日于 11:31 上午

看了作者的这么多作品，作者对js+css理解和运用的这么高深我非常的佩服,我也对js挺有兴趣的，但搞不出高深的东西..支持作者~

回复
- 唐斌说：
  
  2010年07月30日于 3:06 下午
  
  呵呵，开始接触WEB标准是因为以前无法把自己设计稿独立切出来，后来一发不可收拾，会了CSS与XHTML后发现交互行为无法自己控制，又接触了javascript一发不可收拾。。
  
  回复
Eyson 说：

2010年07月13日于 11:40 上午

为什么有很多人不喜欢用框架呢?我觉得比较方便嘛。但是，不说到JQ就说我中毒于框架了。

回复
- 唐斌说：
  
  2010年07月13日于 1:29 下午
  
  原生代码更自由，至少是自己可以控制的。原生代码可以按需使用。就算是用jQuery，如能了解其工作原理也能达到“可控”，而不是跟随API文档。
  
  回复
aitouchy 说：

2010年07月10日于 10:37 上午

飘过，坚决支持楼主加油

回复
pyzy 说：

2010年05月21日于 3:04 下午

不留个脚印对不起楼主辛勤的汗水哇~

回复
- 唐斌说：
  
  2010年05月22日于 9:00 下午
  
  呵呵，飘雨之夜～
  
  回复
fangyu12 说：

2010年05月18日于 3:17 下午

好东东~

回复
afc163 说：

2010年04月16日于 5:13 下午

很想知道是如何实现选择器的

回复
- 唐斌说：
  
  2010年04月16日于 5:37 下午
  
  呵呵，还没有能力自己写选择器，用的是mini.js。
  先学习下，以后就有时间了根据自己的想法写一个小框架
  
  回复
360 说：

2010年04月12日于 1:41 下午

支持楼主,看了之后真是受益非浅啊….

回复
laoshu133 说：

2010年04月10日于 10:04 下午

很久没看到如此犀利的了，今天有开眼了 ……

回复
karson 说：

2010年03月26日于 1:40 下午

支持楼主开发，运用在小型项目上还是非常有用的。

回复
aiens 说：

2010年02月5日于 11:16 上午

如此强大的东东,岂能是0回复?
希望楼主继续增加功能.非常看好!

回复