Study jQuery in a Simplified Way
学习复杂代码的最好方法是简化:
(function(win, undefined) {
var jQuery = function(selector, context) {
// jQuery 对象就是 init 函数的一个实例
return new jQuery.fn.init(selector, context);
},
document = window.document,
push = Array.prototype.push,
slice = Array.prototype.slice;
jQuery.fn = jQuery.prototype = {
init: function(selector, context) {
// 选择器
var ret = (context || document).querySelectorAll(selector);
// 转换为普通数组
ret = slice.call(ret);
// jQuery API 的奥妙全在下面这句,将选择器获取的元素添加到 jQuery 对象中
// 使用 push, 速度飞快(当年担心大量 jQuery 对象实例化的性能问题,根本就不是问题)
// 使用 push, 还能自动更新 length 属性
push.apply(this, ret);
return this;
},
length: 0,
// 实例方法
attr: function(name, value) {
return access(this, name, value, jQuery.attr);
}
};
// 这句保证了 init 方法里的 this 拥有 jQuery 实例的方法
jQuery.fn.init.prototype = jQuery.fn;
// 静态方法
jQuery.attr = function(elem, name, value) {
if (value === undefined) {
return elem.getAttribute(name);
}
return elem.setAttribute(name, value);
};
// 神奇的 access, 在实例方法和静态方法中建立了一座桥梁
// 数组批次操作的实现也在这里
function access(elems, key, value, fn) {
var length = elems.length;
if (value !== undefined) {
for (var i = 0; i < length; i++) {
fn(elems[i], key, value);
}
return elems;
}
return length ? fn(elems[0], key) : null;
}
win.$ = win.jQuery = jQuery;
})(window);
测试页面:study-jquery-in-simplified-way.html (请在非 IE 浏览器下运行)

January 26th, 2010 on 8:59
学习了
原来是这样push进去的
January 26th, 2010 on 10:07
额~我还在超级菜鸟阶段!
January 26th, 2010 on 13:15
jquery的live方法好象是用事件冒泡来完成的,那我如果:
$(‘:checkbox’).live(‘click’, …)
jQuery会先把:checkbox全找出来吗?如果是,这不是浪费cpu了吗?
以前粗看了一下jQuery的源码,根本不是人看的。。
January 26th, 2010 on 16:15
@flywokites: 你可以 $(‘#id :checkbox’) 限定选择范围。性能大部分情况下取决于用的人,而不是类库。
January 26th, 2010 on 17:00
@lifesinger: 我只是用一个极端的情况来说明一下。
一般情况下,比如我用’a.ajax’来在当a click时转成ajax请求,那也要选择页面上的好几十个a对象。
或者,把这段代码放在页面最上部,因为有时页面没全加载时也要处理,这时用document ready事件不太合适。而运行js会阻塞页面显示,当然是最好jquery根本就进行这个多余的dom查询。
January 28th, 2010 on 8:43
最关键还是
jQuery.fn.init.prototype = jQuery.fn;
January 28th, 2010 on 10:06
lifesinger 您 好,关注你播客有一个时间,到这学到不少东西!
但现我有个问题发在csdn 上好几天没有解决
冒昧地请你帮我看看
http://topic.csdn.net/u/20100127/13/8c59342c-b2ba-49c8-88aa-4a2f4906d5c7.html
如果没csdn账号,可以发邮件给我
先行谢过!
January 28th, 2010 on 17:46
初学JQ,练手写了个插件,动态添加input。
有时间的话能不能帮我看看哪里能优化,谢了!
邮箱:jsw0528@mrzhang.net
下载:http://asp-cwb.googlecode.com/files/addInput.rar
January 29th, 2010 on 22:07
我想问一下,我用JQ做了一个显示外链的Favicon 的小应用,但是不想让所有外链都显示,比如说像.jpg .gif .png的图片链接就不想显示出来!我把这个问题写在这里:
http://blog.xiao3.info/jquery-favicon.html
希望你能帮我修改一下~
谢谢~
January 30th, 2010 on 16:04
研究jquery了? 怎么说呢:concise,compact ,估计你没几天就看完了,希望能详细分析原理架构哦
ps : live 问题
1.4 可以设置 context的,在 context上监听
http://yiminghe.javaeye.com/blog/575726
leave a reply