文档章节

jQuery源码分析(一)

spilledyear
 spilledyear
发布于 2017/09/08 14:30
字数 1095
阅读 5
收藏 0

jQuery.fn.init.prototype = jQuery.fn

网上搜了很多的JQuery源码分析之类的文章,下面这段代码应该是出现次数最多的一段,也是非常重要的一段。一开始看源码的时候,完全一脸懵逼,本来js的很多高级语法就不会。但也没什么,不会就去学,这可能和每个人的学习方式不一样有关。每天有一些收获就好了,不会的少了,会的就多了。 在普通情况下我们要用原生类、或者自定义类创建实例要用new运算符,但是我们在使用jQuery时从来没有使用过new,他是不是用其他方法来生成实例呢?是不是没有使用prototype属性呢?事实上他都有使用,只是内部处理的非常巧妙。先看一下源码,这里引用的js版本是3.1.1

// Define a local copy of jQuery  (第 93 行)
jQuery = function( selector, context ) {

		// The jQuery object is actually just the init constructor 'enhanced'
		// Need init if jQuery is called (just allow error to be thrown if not included)
		return new jQuery.fn.init( selector, context );
	},


//(第 114 行)
jQuery.fn = jQuery.prototype = {

	// The current version of jQuery being used
	jquery: version,


// A central reference to the root jQuery(document)  (第 2950 行)
var rootjQuery,

	// A simple way to check for HTML strings
	// Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
	// Strict HTML recognition (#11290: must start with <)
	// Shortcut simple #id case for speed
	rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/,

	init = jQuery.fn.init = function( selector, context, root ) {
		var match, elem;

		// HANDLE: $(""), $(null), $(undefined), $(false)
		if ( !selector ) {
			return this;
		}

// Give the init function the jQuery prototype for later instantiation  (第 3095 行)
init.prototype = jQuery.fn;

把几行关键的代码提取出来再进行分析:

  • return new jQuery.fn.init( selector, context );
  • jQuery.fn = jQuery.prototype
  • init = jQuery.fn.init
  • init.prototype = jQuery.fn;

就这样讲,prototype是为了实现继承。 由 jQuery.fn = jQuery.prototype 、init.prototype = jQuery.fn; 可以得到,init.prototype = jQuery.prototype,也就是说,init继承了jQuery的所有方法。也就是说,假如这时候我们要创建一个jQuery对象,直接new一个init对象就可以,是这样吗?然后又因为 init = jQuery.fn.init ,所以我们如果要创建一个jQuery对象,可以直接这样写 new jQuery.fn.init( );,这样有问题吗?好吧,其实这个地方我有些不解,init是jQuery的孩子,将父亲(jQuery)所有的功能都赋值给孩子(init),那这个时候呢?孩子是不是就类似父亲了?那是不是可以这样写 jQuery.fn.init = init.fn.init ? 好吧,我不明白,我还要好好学习。

$(function() {})、$(document).ready(function(){ }) 与 (function($) {})(jQuery) 的区别

$(function() {}) 是$(document).ready(function(){ }) 的简写,在页面内容都加载完后执行,而(function($) {})(jQuery)是一个匿名函数,也就是函数定义完之后,立即执行。就相当于function A(jQuery){} A(jQuery);,我还是觉得这样说比较通俗易懂一些。对于$(function() {})、$(document).ready(function(){ }) 这个地方,我其实有很多疑惑,为什么是这样呢?这个简写是怎么来的呢?而我的疑问好像并不是大多数人的疑问,我在网上找了很多文章,可大部分都没有提到这个我问题。要了解这个问题,你必须对jQuery有一定的了解,比如jQuery方法有哪些、每个方法实现的方式有什么不一样的地方。当然以我目前的的水平,是解释不清这些问题,很多东西都不知道怎么说清楚,我自己也不明白,好好学习。

© 著作权归作者所有

共有 人打赏支持
spilledyear
粉丝 0
博文 8
码字总数 4806
作品 0
从零实现一个简易的jQuery框架之二—核心思路详解

如何读源码 整体框架甚是复杂,也不易读懂。但是若想要在前端的路上走得更远、更好,研究分析前端的框架无疑是进阶路上必经之路。但是庞大的源码往往让我们不知道从何处开始下手。在很长的时...

余大彬
08/08
0
0
JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒
05/10
0
0
从零玩转jQuery-初识jQuery

课前须知: 学习jQuery前必须先掌握JavaScript jQuery虽然属于前端技术, 但是对于后端人员(诸如Java、PHP等,也需要掌握) jQuery是什么? jQuery是一款优秀的JavaScript库,从命名可以看出jQu...

极客江南
04/20
0
0
炫酷实用 7款jQuery/HTML5图片应用

jQuery非常强大,我们这里有很多关于jQuery焦点图的插件,今天我们精选了7款利用jQuery和HTML5实现的超炫酷图片特效应用,有些也是焦点图插件,一起来看看吧。 1、HTML5 3D衣服摆动特效 超酷...

老鸟的空间
2014/07/05
0
0
JQuery.extend函数使用详解 $.extend

jQuery为开发插件提供了两个方法,分别是: 1. jQuery.fn.extend():给jQuery对象提供方法。 2. jQuery.extend():为扩展jQuery类本身添加方法。 先看源码是怎么实现的,截取自JQuery-1.11.0...

Josean_Luo
2014/04/11
0
1

没有更多内容

加载失败,请刷新页面

加载更多

什么是集群、分布式、集中式、伪分布式

1. 集中式 将项目等部署到同一台机器上,对机器性能要求比较高,一般会用多台机器备份,否则,如果机器出现死机等状况,整个项目将不能运行。 eg:就好比你要盖一座房子,你房子就给一个人盖...

吴伟祥
30分钟前
0
0
微服务写的最全的一篇文章

今年有人提出了2018年微服务将疯狂至死,可见微服务的争论从未停止过。在这我将自己对微服务的理解整理了一下,希望对大家有所帮助。 1.什么是微服务 1)一组小的服务(大小没有特别的标准,...

Java烂猪皮
31分钟前
0
0
Java 并发编程原理

为什么要使用多线程? 通过多线程提高吞吐量 伸缩性比较好,可以增加 CPU 核心来提高程序性能 什么场景下使用多线程? 如:tomcat BIO Java 如何实现多线程? Thread、Runnable、ExecutorSer...

aelchao
46分钟前
2
0
谨慎的覆盖clone方法

说在前面 有些专家级程序员干脆从来不去覆盖clone方法,也从来不去调用它,除非拷贝数组。 其他方式 可以提供一个构造函数或者工厂去实现clone功能。 相比于clone,它们有如下优势: 不依赖于...

XuePeng77
46分钟前
1
0
什么是最适合云数据库的架构设计?

分布式数据库技术发展多年,但是在应用、业务的驱动下,分布式数据库的架构一直在不断发展和演进。 开源金融级分布式数据库SequoiaDB,经过6年的研发,坚持从零开始打造数据库核心引擎。在技...

巨杉数据库
55分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部