整体架构

整体架构

整体架构
jQuery框架的核心就是从HTML文档中匹配元素并对其执行操作、

$().find().css()
$().hide().html('....').hide().

从上面的写法上至少可以发现2个问题：
1、 jQuery对象的构建方式
2、jQuery方法的调用方式

_{分析一：jQuery的无new构建}
按照jQuery的抒写方式

$().ready() 
$().noConflict()

要实现这样,那么jQuery就要看成一个类，那么$()应该是返回类的实例才对。
在javascript中实例this只跟原型有关系。
那么可以把jQuery类当作一个工厂方法来创建实例，把这个方法放到jQuery.prototye原型中

工厂模式定义一个用于创建对象的接口，这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。

实现的关键点
通过原型传递解决问题，把jQuery的原型传递给jQuery.prototype.init.prototype
换句话说jQuery的原型对象覆盖了init构造器的原型对象
因为是引用传递所以不需要担心这个循环引用的性能问题

var aQuery = function(selector, context) {
    debugger
    return new aQuery.prototype.init();
}
aQuery.prototype = {
    init: function() {
        return this;
    },
    name: function() {
        return this.age;
    },
    age: 20
}
aQuery.prototype.init.prototype = aQuery.prototype;
console.log(aQuery().name());//20

_{分析二：链式调用}
DOM链式调用的处理：
1.节约JS代码.
2.所返回的都是同一个对象，可以提高代码的效率
通过简单扩展原型方法并通过return this的形式来实现跨浏览器的链式调用。
利用JS下的简单工厂模式，来将所有对于同一个DOM对象的操作指定同一个实例。

aQuery.prototype = {
    init: function() {
        return this;
    },
    name: function() {
        return this
    }
}

所以我们在需要链式的方法访问this就可以了，因为返回当前实例的this,从而又可以访问自己的原型了

aQuery.init().name()

_{分析三：插件接口}
jQuery的主体框架就是这样，但是根据一般设计者的习惯，如果要为jQuery或者jQuery prototype添加属性方法，同样如果要提供给开发者对方法的扩展，从封装的角度讲是不是应该提供一个接口才对，字面就能看懂是对函数扩展，而不是看上去直接修改prototype.友好的用户接口，
jQuery支持自己扩展属性，这个对外提供了一个接口，jQuery.fn.extend()来对对象增加方法
从jQuery的源码中可以看到，jQuery.extend和jQuery.fn.extend其实是同指向同一方法的不同引用

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

jQuery.extend 对jQuery本身的属性和方法进行了扩展
jQuery.fn.extend 对jQuery.fn的属性和方法进行了扩展

通过extend()函数可以方便快速的扩展功能，不会破坏jQuery的原型结构
jQuery.extend = jQuery.fn.extend = function(){...}; 这个是连等，也就是2个指向同一个函数，怎么会实现不同的功能呢？这就是this 力量了！
针对fn与jQuery其实是2个不同的对象，在之前有讲述：
jQuery.extend 调用的时候，this是指向jQuery对象的(jQuery是函数，也是对象！)，所以这里扩展在jQuery上。
而jQuery.fn.extend 调用的时候，this指向fn对象，jQuery.fn 和jQuery.prototype指向同一对象，扩展fn就是扩展jQuery.prototype原型对象。
这里增加的是原型方法，也就是对象方法了。所以jQuery的api中提供了以上2中扩展函数。

<label><input type="checkbox" name="foo"> Foo</label>
<label><input type="checkbox" name="bar"> Bar</label>
<script>
$(function () { 
    $.fn.extend({
        check: function() {
            return this.each(function() {
                this.checked = true;
            });
        },
        uncheck: function() {
            return this.each(function() {
                this.checked = false;
            });
        }
    });
    // 使用新创建的.check() 方法
    $( "input[type='checkbox']" ).check();
})
</script>

_总结：

通过new jQuery.fn.init() 构建一个新的对象，拥有init构造器的prototype原型对象的方法
通过改变prorotype指针的指向，让这个新的对象也指向了jQuery类的原型prototype
所以这样构建出来的对象就继续了jQuery.fn原型定义的所有方法了

推荐阅读更多精彩内容