DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery基礎框架淺入剖析
jQuery基礎框架淺入剖析
編輯:JQuery特效代碼     

一、原型模式結構
. 代碼如下:
// 定義一個jQuery構造函數
var jQuery = function() {
};
// 擴展jQuery原型
jQuery.prototype = {
};

上面是一個原型模式結構,一個jQuery構造函數和jQuery實例化對象的的原型對象,我們一般是這樣使用的:
. 代碼如下:
var jq = new jQuery(); //變量jq通過new關鍵字實例化jQuery構造函數後就可以使用原型對象中的方法,但是jQuery並不是這麼使用的

二、返回選擇器實例
. 代碼如下:
var jQuery = function() {
// 返回選擇器實例
return new jQuery.prototype.init();
};
jQuery.prototype = {
// 選擇器構造函數
init: function() {
}
};

雖然jQuery不是通過new關鍵字實例化對象,但是執行jQuery函數仍然得到的是一個通過new關鍵字實例化init選擇器的對象,如:
var navCollections = jQuery('.nav'); //變量navCollections保存的是class名為nav的DOM對象集合.
三、訪問原型方法
. 代碼如下:
var jQuery = function() {
// 返回選擇器實例
return new jQuery.prototype.init();
};
jQuery.prototype = {
// 選擇器構造函數
init: function() {
},
// 原型方法
toArray: function() {
},
get: function() {
}
};
// 共享原型
jQuery.prototype.init.prototype = jQuery.prototype;

我們一般習慣稱jQuery函數中返回的選擇器實例對象為jQuery對象,如我們可以這樣使用:
. 代碼如下:
jQuery.('.nav').toArray(); // 將結果集轉換為數組

為什麼可以使用toArray方法呢? 即如何讓jQuery對象訪問jQuery.prototype對象中的方法?只需將實例化選擇器對象的原型對象共享jQuery.prototype對象,上面體現代碼為:
. 代碼如下:
jQuery.prototype.init.prototype = jQuery.prototype; // 共享原型

四、自執行匿名函數
. 代碼如下:
(function(window, undefined) {
var jQuery = function() {
// 返回選擇器實例
return new jQuery.prototype.init();
};
jQuery.prototype = {
// 選擇器構造函數
init: function() {
},
//原型方法
toArray: function() {
},
get: function() {
}
};
jQuery.prototype.init.prototype = jQuery.prototype;
// 局部變量和函數在匿名函數執行完後撤銷
var a, b, c;
function fn() {
}
// 使jQuery成為全局變量
window.jQuery = window.$ = jQuery;
})(window);

自執行匿名函數中聲明的局部變量和函數在匿名函數執行完畢後撤銷,釋放內存,對外只保留jQuery全局變量接口。

來源: http://www.cnblogs.com/yangjunhua/archive/2012/12/27/2835989.html

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved