手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery基础框架浅入剖析
jQuery基础框架浅入剖析
摘要:一、原型模式结构复制代码代码如下://定义一个jQuery构造函数varjQuery=function(){};//扩展jQuery原型jQ...

一、原型模式结构

复制代码 代码如下:

// 定义一个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

【jQuery基础框架浅入剖析】相关文章:

jQuery实现延迟跳转的方法

JQuery控制Radio选中方法分析

JQuery中DOM加载与事件执行实例分析

jQuery实现返回顶部效果的方法

jQuery实现给页面换肤的方法

Jquery动态添加输入框的方法

jQuery子窗体取得父窗体元素的方法

jQuery构造函数init参数分析续

jQuery实现将页面上HTML标签换成另外标签的方法

jQuery实现在列表的首行添加数据

精品推荐
分类导航