jq架构

(function(ROOT) {

        // 构造函数
        var jQuery = function(selector) {

            // 在jQuery中直接返回new过的实例,这里的init是jQuery的真正构造函数
            return new jQuery.fn.init(selector)
        }

        jQuery.fn = jQuery.prototype = {
            constructor: jQuery,

            version: '1.0.0',

            init: function(selector) {
                // 在jquery中这里有一个复杂的判断,可是这里我作了简化
                var elem, selector;
                elem = document.querySelector(selector);
                this[0] = elem;

                // 在jquery中返回一个由全部原型属性方法组成的数组,咱们这里简化,直接返回this便可
                // return jQuery.makeArray(selector, this);
                return this;
            },

            // 在原型上添加一堆方法
            toArray: function() {},
            get: function() {},
            each: function() {},
            ready: function() {},
            first: function() {},
            slice: function() {}
            // ... ...
        }

        jQuery.fn.init.prototype = jQuery.fn;

        // 实现jQuery的两种扩展方式
        jQuery.extend = jQuery.fn.extend = function(options) {

            // 在jquery源码中会根据参数不一样进行不少判断,咱们这里就直接走一种方式,因此就不用判断了
            var target = this;
            var copy;

            for(name in options) {
                copy = options[name];
                target[name] = copy;
            }
            return target;
        }

        // jQuery中利用上面实现的扩展机制,添加了许多方法,其中

        // 直接添加在构造函数上,被称为工具方法
        jQuery.extend({
            isFunction: function() {},
            type: function() {},
            parseHTML: function() {},
            parseJSON: function() {},
            ajax: function() {}
            // ...
        })

        // 添加到原型上
        jQuery.fn.extend({
            queue: function() {},
            promise: function() {},
            attr: function() {},
            prop: function() {},
            addClass: function() {},
            removeClass: function() {},
            val: function() {},
            css: function() {}
            // ...
        })

        // $符号的由来,实际上它就是jQuery,一个简化的写法,在这里咱们还能够替换成其余可用字符
        ROOT.jQuery = ROOT.$ = jQuery;

    })(window);
相关文章
相关标签/搜索