Jquery中文網 www.4271936.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 jquery源碼入口部分解析

jquery源碼入口部分解析

發布時間:2016-09-17   編輯:www.4271936.live
jquery中文網為您提供jquery源碼入口部分解析等資源,歡迎您收藏本站,我們將為您提供最新的jquery源碼入口部分解析資源

讀完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中的$(document).ready()與window.onload的區別
jQuery的運行機制和設計理念分析
提取jquery的ready()方法單獨使用示例
通過jQuery源碼學習javascript(一)
Android中資源文件(非代碼部分)的使用概覽
JS獲取屏幕、瀏覽器窗口大小、網頁高度寬度的方法詳解
jQuery源碼分析-01總體架構分析
使用jquery實現以post打開新窗口
jQuery 源碼分析筆記(6) jQuery.data

[關閉]
微信下载APP完成任务如何赚钱 股票指数计算方法优劣 河南22选5技巧 河南泳坛夺金481开奖结果 广东好彩1技巧 双面盘怎么看走势图 内蒙古快3app 陕西11选五前三组遗漏 湖北体彩11选五走势图l 体彩7位数开奖结果 星城汇娱乐