欢迎光临
我们一直在努力

jQuery源码框架分析(一)

每一个框架都有一个核心,所有的结构都是基于这个核心之上,结构建立好了之后,剩下的就是功能的堆砌。

jquery的核心就是从HTML文档中匹配元素并对其操作。

 

就跟一座大楼一样,让我们一步一步了解这座大厦的基石和结构。

 

1.构造函数

2.链式语法

3.选择器

4.扩展性

 一、构造函数

我们知道类是面向对象编程的一个重要概念,它是对事物的最高抽象,它是一个模型。通过实例化一个类,我们可以创建一个实例。

javascript本身没有类的概念,只有原型prototype,prototype是什么呢?它是为构造函数设置的一个属性,这个属性包含一个对象(简称prototype对象)。这个对象中包含了实例对象共享的属性(properties)和方法(methods)。有了这么一个属性,我们就可以让所有的实例共享某些东西,来实现面向对象中类的概念。

下面用一个例子来解释一下,链接--------------

因此jQuery利用原型继承来实现类的

那我们如何调用它吗?

但是jQuery并不是这么调用的,它类似$().jquery 这种形式。

也就是说jQuery没用new实例化,而是直接调用jQuery()函数,然后后面跟jQuery的原型方法。怎么实现呢?

如果按照上面的做法会出错,内存溢出,因为创建实例的时候循环引用导致出错。 

我们需要返回一个实例,我们知道在new一个对象的时候,this指向new的实例,实例获取了prototype的属性方法。

因此我们可以用工厂方法创建一个实例,把这个方法放在jQuery.prototype 的原型对象当中,然后在jQuery函数中返回这个原型方法的调用。

console中会看到this对象是 jQuery的一个实例。

init()方法返回的是this关键字,该关键字引用的是jQuery的实例,如果在init()中继续使用this关键字,也就是将init函数视为一个构造器,this又是如何处理呢?

返回的都是2,可以看到,this关键字引用了init函数作用域所在的对象,此时它访问length属性时,返回的为2。this关键字也能访问上级对象jQuery.fn对象的作用域,所以返回1.7.2,而调用size方法时,返回的是2而不是0。

这种设计思路很容易破坏作用域的独立性,对jQuery框架可能产生消极影响,因此jQuery通过实例化init初始化类型来分割作用域的

这样就可以把init()构造函器中的this和jQuery.fn对象中的this关键字隔离开来。避免混淆。但是这种方法带来的另一个问题是无法访问jQuery.fn 的对象的属性和方法。

Object [object Object] has no method 'size'.

如何做到既能分割初始化构造函数与jQuery原型对象的作用域,又能够在返回实例中访问jQuery原型对象呢?

jQuery框架巧妙地通过原型传递解决了这个问题

 

 

这样 new jQuery.fn.init() 创建的新对象拥有init构造器的prototype原型对象的方法,通过改变prototype指针的指向,使其指向jQuery类的prototype,这样创造出来的对象就继承了jQuery.fn原型对象定义的方法。

 二、扩展性


jQuery 自定义扩展方法用的extend () 函数

在讲源码之前,先说一下什么是拷贝,浅拷贝,深拷贝。

我们知道js 种不同的数据类型

* 基本类型:按值传递 (undefined,NULL,boolean,String,Number)
* 引用类型:传递内存地址 Object

/* 深度拷贝,所有的元素和属性完全clone,并与原引用对象完全独立,克隆后的对象与原对象再也没有任何关系,也就是当你拷贝完成后,原对象值有任何更改,都不会影响到我们克隆后那个对象的值*/

所以我们在进行深拷贝(clone)的时候,注意将复制对象中的每一个值,而不是引用,换句话说,就是采用递归的方法浅拷贝对象。

1.浅拷贝

2.深拷贝

3.jQuery 的实现

注意:虽然jQuery.extend = jQuery.fn.extend 它们是一个方法,但是它们的具体作用是不一样的,因为this的指向不同。

在构造函数那个模块我们看到

jQuery .extend 的 this 是jQuery类本身,在jQuery类上添加(对象,方法)

jQuery.fn.extend 是在jQuery的原型上添加新的(方法,对象),返回的jQuery对象会拥有这个方法。jQuery.fn = jQuery.prototype

 

 

四、来一个简化版的

 

在下一节,介绍jQuery的链式语法。 

 

  • 海报
海报图正在生成中...
赞(0) 打赏
声明:
1、本博客不从事任何主机及服务器租赁业务,不参与任何交易,也绝非中介。博客内容仅记录博主个人感兴趣的服务器测评结果及一些服务器相关的优惠活动,信息均摘自网络或来自服务商主动提供;所以对本博客提及的内容不作直接、间接、法定、约定的保证,博客内容也不具备任何参考价值及引导作用,访问者需自行甄别。
2、访问本博客请务必遵守有关互联网的相关法律、规定与规则;不能利用本博客所提及的内容从事任何违法、违规操作;否则造成的一切后果由访问者自行承担。
3、未成年人及不能独立承担法律责任的个人及群体请勿访问本博客。
4、一旦您访问本博客,即表示您已经知晓并接受了以上声明通告。
文章名称:《jQuery源码框架分析(一)》
文章链接:https://www.456zj.com/20199.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址