jQuery源码框架fn解读

(function( window, undefined ){
        var jQuery = (function(){
            var jQuery = function( selector, context ){
                return new jQuery.fn.init( selector, context )
            }

            jQuery.fn = jQuery.prototype = {
                constructor: jQuery,
                init: function( selector, context ){
                    if (!selector) return this;
                    var nodeList = (context || document).querySelectorAll( selector ),
                        i = 0,
                        length = nodeList.length;
                    for (; i<length; i+=1){
                        this[i] = nodeList[i];
                    }
                    this.length = nodeList.length;
                    return this;
                }
            }
            //用fn的真正原因是
            //如果不用fn，直接用jQuery.init 会返回undefined，主要是jQuery并不是new的对象，也就不能//访问原型，undefined不能设置原型
            //jQuery.fn = {}可以直接访问init属性，所以fn必须写
            console.log( jQuery.fn );

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

            jQuery.fn.extend = jQuery.extend = function(obj){
                    var obj = obj || null;
                    if (!obj) return this;
                    for ( var i in obj){
                        if (!jQuery.fn[i]){
                            jQuery.fn[i] = obj[i];
                        }
                    }
                    return this;
            }

            return jQuery;
        })()
        window.$ = window.jQuery = jQuery;
    })( window, undefined )

下边是没有使用jQuery.fn的代码，使用了jQuery.fn的框架更简单，不用函数运行就可以对原型添加方法,也就是这一点,

因为直接jQuery.prototype不能直接添加方法，必须声明！但是jQuery.fn就可以，因为他不是原型而是一个{}object

jQuery.fn = jQuery.prototype = {};

<body>

    <h1>标题1</h1>
    <h1>标题2</h1>
    <h1>标题3</h1>
    <script>

                var jQuery = function( selector, context ){
                    return new jQuery.prototype.init( selector, context );
                }

                jQuery.prototype = {

                    constructor: jQuery,

                    init: function( selector, context ){

                        if ( !selector ) return;
                        var nodeList = ( context || document ).getElementsByTagName( selector ),
                            i = 0,
                            length = nodeList.length;
                        for (; i<length; i+=1){
                            this[i] = nodeList[i]
                        }
                        this.length = nodeList.length;

                        return this
                    }

                }

                jQuery.prototype.init.prototype = jQuery.prototype;
                jQuery.prototype.extend = function( obj ){
                    if ( !obj ) return;
                    for ( var i in obj ){
                        if ( !jQuery.prototype[i] ){
                            jQuery.prototype[i] = obj[i]
                        }
                    }
                }

                jQuery.prototype.extend({
                    changeColor: function( color ){
                        if ( !color ) return;
                        var i = 0,
                        length = this.length;
                        for (; i<length; i+=1){
                            this[i].style.color = color;
                        }
                        return this;
                    }
                });
            jQuery('h1').changeColor('red');
            //标准的写法 jQuery.fn.extend = jQuery.extend
            //因为非标准的没有jQuery.fn 所以不能jQuery.extend()直接添加，必须jQuery.prototype.extend()
            //进行添加,又因为jQuery.fn = jQuery.prototype = {},所以jQuery.fn是一个对象不用函数调用可以直//接添加
    </script>
 </body>