网络编程
位置:首页>> 网络编程>> JavaScript>> Study jQuery in a Simplified Way

Study jQuery in a Simplified Way

作者:lifesinger 来源:岁月如歌 发布时间:2010-01-30 12:55:00 

标签:jquery,学习

学习复杂代码的最好方法是简化:

(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 浏览器下运行)

源码:jquery~core.js

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com