文档章节

jQuery源码分析(一)

spilledyear
 spilledyear
发布于 2017/09/08 14:30
字数 1095
阅读 6
收藏 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
粉丝 1
博文 8
码字总数 4806
作品 0
私信 提问
从零实现一个简易的jQuery框架之二—核心思路详解

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

余大彬
08/08
0
0
分享26本关于Jquery的学习书籍(免费下载)

分享26本关于Jquery的学习书籍(免费下载) 1、精通JavaScript+jQuery 2、网友small6分享锋利的jQuery实例源码 3、网友small6分享jQuery权威指南配套源代码 4、犀利开发jQuery内核详解与实践...

邓剑彬
2012/11/30
3.3K
8
7 款风格各异的jQuery图片展示效果

在网页中,图片的展示方式多种多样,当然所要达到的目的也各不相同,本文就是要通过jQuery来实现各种不同的图片展示方式,有jQuery焦点图、图片缩放、图片滚动等效果。如果你喜欢这些小效果,...

yykj
2013/11/08
2.6K
1
20+功能强大的jQuery/CSS3图片特效插件

以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3。 1、jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有弹跳...

ruby_chen
2013/10/14
24.6K
5
9款开发者值得一试的jQuery全新应用

jQuery是一个非常给力的JS框架,也因其使用方便而诞生了无数的jQuery应用插件,今天向大家分享9款全新的jQuery插件,前段开发者应该会比较喜欢。 1、jQuery图标选项卡上下滑动切换 这是一款非...

yykj
2013/10/28
808
5

没有更多内容

加载失败,请刷新页面

加载更多

EOS docker开发环境

使用eos docker镜像是部署本地EOS开发环境的最轻松愉快的方法。使用官方提供的eos docker镜像,你可以快速建立一个eos开发环境,可以迅速启动开发节点和钱包服务器、创建账户、编写智能合约....

汇智网教程
今天
10
0
《唐史原来超有趣》的读后感优秀范文3700字

《唐史原来超有趣》的读后感优秀范文3700字: 作者:花若离。我今天分享的内容《唐史原来超有趣》这本书的读后感,我将这本书看了一遍之后就束之高阁了,不过里面的内容一直在在脑海中回放,...

原创小博客
今天
16
0
IC-CAD Methodology知识图谱

CAD (Computer Aided Design),计算机辅助设计,指利用计算机及其图形设备帮助设计人员进行设计工作,这个定义同样可以用来近似描述IC公司CAD工程师这个岗位的工作。 早期IC公司的CAD岗位最初...

李艳青1987
今天
15
0
CompletableFuture get方法一直阻塞或抛出TimeoutException

问题描述 最近刚刚上线的服务突然抛出大量的TimeoutException,查询后发现是使用了CompletableFuture,并且在执行future.get(5, TimeUnit.SECONDS);时抛出了TimeoutException异常,导致接口响...

xiaolyuh
今天
8
0
dubbo 搭建与使用

官网:http://dubbo.apache.org/en-us/ 一,安装监控中心(可以不安装) admin管理控制台,monitor监控中心 下载 bubbo ops 这个是新版的,需要node.js环境,我没有就用老版的了...

小兵胖胖
今天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部