Study jQuery in a Simplified Way [转载]

转载自:岁月如歌
源文地址：http://lifesinger.org/blog/2010/01/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 浏览器下运行）

源码：jquery~core.js

Y.Jiajia:

看完这代码分析感受颇深，Javascript真是太灵活了，让想再一次相信，程序是用心去写的，真正的 Write Less Do More 是用心去写程序，理解并去感受着程序的痛苦与快乐。

其实C语言不难，Hello World手到擒来；其实Java也不难，因为Hello World并不比C难；javascript更不难，因为他的Hello World是最简单的。但是谁能说这些优秀的程序都简单？那一定没去深深的理解所谓的“麻雀虽小却5脏6腹俱全”。

原创文章转载请注明：YSlove.net
本文固定链接:http://yslove.net/2010/02/study-jquery-in-a-simplified-way/

如果你喜欢请+1 ^_^

Tags: javascript, jQuery, 转载

RSS 2.0
trackback