Study jQuery in a Simplified Way
作者:lifesinger 来源:岁月如歌 时间:2010-01-30 12:55:00
学习复杂代码的最好方法是简化:
(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 浏览器下运行)