`
zccst
  • 浏览: 3293823 次
  • 性别: 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 1.9.1源码分析系列(十五)之动画处理

    jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween ://www.jb51.net/article/75821.htm a.动画入口jQuery.fn.animate函数执行流程详解 ——————————————————————————–  ...

    成品网站源码网站源码后台

    后面会加入数据统计与分析图表,包括菜单分析,文章分析,用户分析等便于更新和完善网站内容。 2、网站前台:主要包括首页,内容页,分类页,搜索页,主要实现文章摘要处理和razor,数据显示HTML处理,还有js ...

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

    在阅读本文之前,相信大家对 jQuery 的总体架构已经了解了,这一篇文章主要来介绍 jQuery 的入口函数 jQuery.fn.init。有需要的朋友可以参考借鉴,下面来一起看看吧。

    基于springboot+bootstrap+jquery的考评系统项目源码+数据库+项目说明(毕设).zip

    1、基于springboot+bootstrap+jquery的考评系统项目源码+数据库+项目说明(毕设).zip 2、该资源包括项目的全部源码,下载可以直接使用! 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和...

    JQuerySource:jQuery原始解读,v3.1.1,从菜鸟到大神之路

    jQuerySource决定你走多远的是基础,jQuery源码分析,向长者膜拜!关于本源码的博客介绍: 。目录目录 - ,后面的学习才好办 -介绍jQuery的入口函数init的构造 -Sizzle再jQuery中的应用 Tokens-介绍Sizzle函数中的...

    jQuery选择器源码解读(一):Sizzle方法

    对jQuery的Sizzle各方法做了深入分析(同时也参考了一些网上资料)后,将结果分享给大家。我将采用连载的方式,对Sizzle使用的一些方法详细解释一下,每篇文章介绍一个方法。 若需要转载,请写明出处,多谢。 /* ...

    姬酱岛入口也可以用必应搜索姬酱岛

    biying 必应搜索永远的神 源码描述: 一、源码特点 ...后面会加入数据统计与分析图表,包括菜单分析,文章分析,用户分析等便于更新和完善网站内容。 2、网站前台:主要包括首页,内容页,分类页,搜索页,主要

    本科毕设基于Javaweb实现的校园疫情防控管理系统源码+项目说明.zip

    本科毕设基于Javaweb实现的校园疫情防控管理系统源码+项目说明.zip 该项目是个人毕设项目,答辩评审分达到95分,代码都经过调试测试,确保可以运行!欢迎下载使用,可用于小白学习、进阶。 该资源主要针对计算机、...

    基于JavaWEB+SSM+mysql框架构建的在线商城系统源码+数据库+项目说明(课程设计).zip

    * 前端仿天猫2017页面,基于原生 CSS(前台)、Bootstrap(后台)、Jquery、Bootstrap Js 构建 * 本项目为 Maven 项目,后端使用 Spring 4 + SpringMVC 4 + Mybatis 3.4 + aspectj 1.8 * 实现了一个 **通用mapper...

    PHP呆错短视频系统 v1.4.5

    呆错短视频系统一套模板自适应电脑、手机、平板多个终端入口,完美适配微信、百度等多种APP浏览器,也可以独立设置移动端与电脑端模板分离。 功能模块 视频模块 分类模块 标签模块 解析模块 聚合模块 SEO模块 采集...

    jmapcms网站开发系统 1.4.zip

    jmapcms网站开发系统所有功能都使用自定义模式,功能开发自由,系统后台操作十分快捷,使用高速静态缓存方式和数组化数据保证网站的稳定运行,使用ajax和jquery方式进行实时提示,提高用户体验度。 jmapcms网站...

Global site tag (gtag.js) - Google Analytics