A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 郝永亮 黑马粉丝团   /  2017-11-5 23:01  /  1354 人查看  /  3 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

相信很多童鞋都用过jquery,但是对于jquery源码了解的并不是很多。接下来我将带大家了解下jquery源码设计思想。
首先我们要先知道jquery对外暴露了两个变量,$和jQuery,这两变量指向同一函数
$()传入任何参数,jq会做不同的处理,但是都会得到jq对象
jq对象实例会以下标的形式存储数据,还有length属性,说明jq是一个伪数组


那接下来我们思考:jquery为什么这么设计首先个人认为jquery的设计原则是内存共享,设计的时候所有的对象,构造方法,原型都访问同一块内存,就是jQuery.prototype

想想我们在每次$('div')的时候是不是重新创建了一个对象.所以在jquery内部帮我们new一个对象,而new的操作是由一个工厂函数完成的,这个工厂函数就是jQuery.

ok,我们现在已经可以通过jquery函数创建对象了,但是如果要是想要访问jQuery的原型还是很麻烦必须通过jQuery.prototype访问,为了方便访问,这个时候我们重新定义一个变量fn,并且置换原型,jQuery.fn =  jQuery.prototype = {constructor:jQuery}

现在还有一个问题我们通过jQuery.prototype或者jQuery.fn是没有办法找到构造函数的,换句话说构造函数和jQuery没有产生关系,为了让他们产生关系,通过jQuery.fn可以找到init构造函数,我们将init构造函数添加到原型上jQuery.fn.init = function(){}

至此,已经接近尾声,我们的构造函数如何访问jQuery.fn上的内容呢?只需要让构造函数的原型指向工厂函数的原型即可jQuery.fn.init.prototype = jQuery.fn;







(function (window) {
    var jQuery = function (selector) {
        return new jQuery.fn.init(selector);
    }
    jQuery.fn = jQuery.prototype = {
      constructor:jQuery
    };
    var init = jQuery.fn.init = function (selector) {

    }
    init.prototype = jQuery.fn;

    window.jQuery = window.$ = jQuery;
}(window));














































3 个回复

倒序浏览
回复 使用道具 举报
谢谢分享,非常感谢
回复 使用道具 举报
亮哥威武
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马