代码改变世界

jQuery 源码基本框架

2014-01-01 22:44  straybird  阅读(212)  评论(0编辑  收藏  举报

抽丝剥茧, 7000+ 行的 jQuery 源码基本可以概括为以下的伪代码

(function (window, undefined) {
    //将 document 封装成 jQuery 对象并缓存
    var rootjQuery,

    //dom ready 事件的委托队列
        readyList,

    //快速地识别 html 标记 如 <div> 或者 #id
        rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,

        jQuery = function (selector, context) {
            return new jQuery.fn.init(selector, context, rootjQuery);
        };

    jQuery.fn = jQuery.prototype = {
        constructor: jQuery,
        init: function (selector, context, rootjQuery) {

            // $(""), $(null), $(undefined), $(false)
            if (!selector) {
                return this;
            }

            var match = rquickExpr.exec(selector);

            // $('<div></div>')
            jQuery.parseHTML(match[1])
            return this;

            // $(#id)
            return document.getElementById(selector);

            // $('.class'),  $('.class', context),  $('#class', context)
            // 其中 context 是jQuery元素
            return (context || rootjQuery).find(selector);

            // $('.class', domElm)
            return this.constructor(context).find(selector);

            // selector is function
            return rootjQuery.ready(selector);


            return jQuery.makeArray(selector, this);
        },
        ready: function (fn) {
            // Add the callback
            jQuery.ready.promise().done(fn);

            return this;
        }
    }

    jQuery.init.prototype = jQuery.fn;

    jQuery.extend = jQuery.fn.extend = function () {
    };

    rootjQuery = jQuery(document);

    // Sizzle 代码
    (function (window, undefined) {

        function Sizzle(selector, context, results, seed) {
            if (support.qsa) {
                return querySelectorAll(selector)
            }

            return select(selector.replace(rtrim, "$1"), context, results, seed);
        }

        function select(selector, context, results, seed) {
            var match = tokenize(selector);
        }

        function tokenize(selector, parseOnly) {

        }

        jQuery.find = Sizzle;
    })(window);

    // 对 jQuery 对象的扩展
    jQuery.extend({});

    // 对 jQuery.fn 对象的扩展
    jQuery.fn.extend({});

    window.$ = window.jQuery = jquery;

})(window);