jQuery基础框架浅入剖析

157 阅读 0 评论 104 点赞

我是靠谱客的博主如意含羞草，最近开发中收集的这篇文章主要介绍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); 