`
zccst
  • 浏览: 3322583 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery源码入口部分解析

阅读更多
作者:zccst


读完JavaScript Pattern后,再读jQuery源码感觉轻松很多,其中要点是:
构造函数
原型对象
new Contruction()的执行过程
封装(立即执行函数)


根据上面的概念,jQuery本质也是一个构造函数,但是从始至终,都没有new jQuery对象new jQuery();而仅仅是调用jQuery构造函数,这样构造函数自身,始终都没有使用jQuery的原型发生关联。

把jQuery构造函数当做普通函数调用,内部返回了一个对象(在其构造函数内部转了一个弯)new了原型对象中的Init方法。此时,新的构造函数变成了init方法。init内部的this属性和方法是实例单独拥有的。(很少,只有5个,分别是this.selector, this.context, this.length, this. )

同时让init.prototype = jquery.prototype;以便使用jQuery的原型对象中的属性和方法。

其中,init方法返回的是一个this对象。
this指代new init构造函数创建的对象,里面既有自己的属性和方法,也有共有的属性和方法。
this是jQuery独有的对象,其中DOM数组部分是一个类数组(array like)。




/**简化后的骨架*/
var jQuery = (function() {
	var jQuery = function( selector, context ) {
			//jQuery对象实际上只是init构造函数“增强”
			// The jQuery object is actually just the init constructor 'enhanced'
			return new jQuery.fn.init( selector, context, rootjQuery );
		};

	jQuery.fn = jQuery.prototype = {
		constructor: jQuery,
		/**
		*  入口
		*  构造函数 function init(){}
		*  原型对象 init.prototype = jQuery.prototype
		*/
		init: function( selector, context, rootjQuery ) {
			return jQuery.makeArray( selector, this );
		},
		selector: "",
		jquery: "1.7.1",
		length: 0,
		size: function() {return this.length;},
		toArray: function() {return slice.call( this, 0 );},
		get: function( num ) {},
		pushStack: function( elems, name, selector ) {},
		each: function( callback, args ) {return jQuery.each( this, callback, args );},
		ready: function( fn ) {},
		eq: function( i ) {},
		first: function() {},
		last: function() {},
		slice: function() {},
		map: function( callback ) {},
		end: function() {return this.prevObject || this.constructor(null);},
		push: push,
		sort: [].sort,
		splice: [].splice
	};

	//让jQuery原型中的init方法中的原型对象指向jQuery的原型
	// Give the init function the jQuery prototype for later instantiation
	jQuery.fn.init.prototype = jQuery.fn;

	//新增静态方法jQuery.extend,新增原型方法jQuery.fn.extend
	jQuery.extend = jQuery.fn.extend = function() {
		return target;
	};

	//绑定一堆静态方法
	jQuery.extend({
		
	});

	return jQuery;

})();



看看具体实例:
$("div.diggit")结果:

1,jQuery对象

0: div.diggit
context: document
length: 1
prevObject: e.fn.e.init[1]
selector: "div.diggit"
__proto__:

2,jQuery对象的原型对象
扩展了N多方法

3,jQuery对象的静态方法哪去了?
分享到:
评论

相关推荐

    jquery源码分析

    jquery源码分析,包括入口技术,选择器入口,以及在选择器使用的时候需要注意的优化思路

    JQuery源码的奥秘逐行分析视频教程

    ### JQuery源码的奥秘逐行分析视频教程 #### JQuery简介 JQuery 是一款轻量级的 JavaScript 库,它极大地简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等操作。JQuery 提供了一个简洁且强大的 API 接口,...

    jQuery源码

    《jQuery源码解析》 jQuery,作为一款广泛应用于前端开发的JavaScript库,因其简洁的API和强大的功能,深受开发者喜爱。本文将深入探讨jQuery 1.12版本的源码,帮助读者理解其核心机制,提升JavaScript技术能力。 ...

    jquery源码好不容易找到的与大家分享

    《jQuery源码解析:深入理解核心机制》 jQuery,这个小巧而强大的JavaScript库,自2006年发布以来,就以其简洁的API和出色的跨浏览器兼容性赢得了开发者们的广泛喜爱。今天,我们有幸深入剖析这份来之不易的jQuery...

    Jquery1.2.6源码分析+源代码

    **jQuery 1.2.6 源码分析** jQuery 是一个广泛使用的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等任务。本篇文章将深入探讨 jQuery 1.2.6 版本的源码,揭示其背后的实现原理,帮助...

    jQuery源码分析之init的详细介绍

    本文将对 jQuery 源码中的重要部分——初始化函数 init 进行详细介绍。 首先,jQuery 的入口函数 jQuery.fn.init 是一个构造器,用于创建新的 jQuery 对象。通过分析这个函数的源码,我们可以理解 jQuery 是如何...

    Jquery1.2.6源码分析

    《jQuery 1.2.6源码分析》 在JavaScript的世界里,jQuery是一个不可或缺的库,它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。本文将深入剖析jQuery 1.2.6版本的源码,揭示其背后的机制与设计理念,帮助...

    jquery 源码分析

    `jQuery源码详解.mht` 和 `jquery-1.2.6源码分析.pdf` 内容可能包含了对源码的深度解析,包括设计模式、性能优化和实现细节。这些资料有助于深入理解 jQuery 的内部工作原理。 8. **版本差异** 虽然我们分析的是 ...

    jquery1.2.6源码分析

    《jQuery 1.2.6 源码分析——揭示JavaScript库的秘密》 jQuery,作为JavaScript最著名的库之一,自2006年发布以来,以其简洁易用的API和强大的功能深受开发者喜爱。本文将深入探讨jQuery 1.2.6版本的源码,帮助我们...

    jQuery源码分析

    《jQuery源码分析》 jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画设计和Ajax交互。对于开发者来说,深入理解jQuery的源码不仅可以提升编程技能,还能帮助我们优化代码,提高网页...

    jquery 源码

    二、jQuery源码解析 1. **$和jQuery的关系**:`$`是jQuery的别名,两者在源码中是同一个函数,通常作为jQuery的入口点。 2. **构造函数**:当你调用`$(...)`时,实际上是创建了一个新的jQuery对象,这个对象包含了...

    Jquery 源码解读

    本文旨在深入解析 jQuery 的核心部分,帮助读者理解其内部机制。 #### 二、整体结构 jQuery 的源码主要封装在一个立即执行的函数表达式(IIFE, Immediately Invoked Function Expression)中。这样的设计有以下...

    jquery基础部分_源码

    二、jQuery源码解析 1. `$`函数:这是jQuery库的入口点,通常用于选择DOM元素。源码中,`$`是一个函数,接收一个CSS选择器或者DOM元素、HTML字符串或jQuery对象作为参数,返回一个jQuery对象。 ```javascript var ...

    jquery源码_详细中文注释.pdf.zip_jquery_js pdf 批注_pdf注释

    《jQuery源码详解——深入解析与注释》 jQuery,作为JavaScript库的杰出代表,以其简洁易用的API和强大的功能赢得了全球开发者的广泛青睐。这份详细的中文注释版jQuery源码,为开发者提供了一个深入了解这个库内部...

    jquery源码

    《jQuery源码解析与经典应用探析》 jQuery,作为一款强大的JavaScript库,自诞生以来就深受开发者喜爱,它的简洁语法、高效的DOM操作以及丰富的插件生态,使得网页动态效果的实现变得轻而易举。本文将深入探讨...

    jQuery权威指南源码

    在源码中,我们可以看到`init`函数是构造器的主要入口,它负责解析参数、初始化对象以及执行相应的操作。 在DOM操作方面,jQuery提供了如`$(selector).html()`、`$(selector).append()`等方法,这些方法在源码中都...

    jquery源码,我上传东西,是为了可以下载东西,oh,mygod

    《jQuery源码解析:深入理解JavaScript库之精髓》 jQuery,作为一款广泛应用于Web开发的JavaScript库,以其简洁、易用的API深受开发者喜爱。它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互等任务,使得...

    jQuery效果源码.rar

    通过对这些源码的解析,我们可以学习到如何优雅地处理DOM元素,如何创建动态效果,以及如何高效地处理用户交互。例如,AddProjData.aspx可能使用了jQuery的form序列化功能来收集表单数据,而Contract.aspx可能利用...

    jQuery砸金蛋抽奖活动源码

    下面将详细解析这个源码的关键组成部分和实现原理。 首先,我们来看`index.html`文件。这是整个应用的入口点,它包含了HTML结构,定义了抽奖界面的布局。页面通常会包含一个金蛋的图片或图形元素,以及用于触发抽奖...

    JQuery登录界面源码

    本篇将深入解析“JQuery登录界面源码”,帮助开发者理解如何利用JQuery实现一个高效且美观的登录界面。 首先,我们来看“JQuery遮罩层登录界面”。这种设计方式可以提供良好的用户体验,当用户点击登录按钮后,整个...

Global site tag (gtag.js) - Google Analytics