浅析jQuery基础框架

一、原型模式结构

复制代码
1 // 定义一个jQuery构造函数
2 var jQuery = function() {
3 
4 };
5 
6 // 扩展jQuery原型 
7 jQuery.prototype = {
8 
9 };
复制代码

 

上面是一个原型模式结构,一个jQuery构造函数和jQuery实例化对象的的原型对象,我们一般是这样使用的:

1 var jq = new jQuery(); //变量jq通过new关键字实例化jQuery构造函数后就可以使用原型对象中的方法,但是jQuery并不是这么使用的


二、返回选择器实例 

复制代码
 1 var jQuery = function() {
 2     
 3     // 返回选择器实例
 4     return new jQuery.prototype.init();
 5 };
 6 jQuery.prototype = {
 7 
 8     // 选择器构造函数
 9     init: function() {
10 
11     }
12 }; 
复制代码

 

虽然jQuery不是通过new关键字实例化对象,但是执行jQuery函数仍然得到的是一个通过new关键字实例化init选择器的对象,如:

1 var navCollections = jQuery('.nav');  //变量navCollections保存的是class名为nav的DOM对象集合.


三、访问原型方法 

复制代码
 1 var jQuery = function() {
 2     
 3     // 返回选择器实例
 4     return new jQuery.prototype.init();
 5 };
 6 jQuery.prototype = {
 7 
 8     // 选择器构造函数
 9     init: function() {
10 
11     },
12 
13     // 原型方法
14     toArray: function() {
15 
16     },
17     get: function() {
18 
19     }    
20 };
21 
22 // 共享原型
23 jQuery.prototype.init.prototype = jQuery.prototype; 
复制代码

 

我们一般习惯称jQuery函数中返回的选择器实例对象为jQuery对象,如我们可以这样使用:

1 jQuery('.nav').toArray(); // 将结果集转换为数组

 

为什么可以使用toArray方法呢? 即如何让jQuery对象访问jQuery.prototype对象中的方法?只需将实例化选择器对象的原型对象共享jQuery.prototype对象,上面体现代码为:

1 jQuery.prototype.init.prototype = jQuery.prototype; // 共享原型


四、自执行匿名函数

复制代码
 1 (function(window, undefined) {
 2 
 3     var jQuery = function() {
 4         
 5         // 返回选择器实例
 6         return new jQuery.prototype.init();
 7     };
 8     jQuery.prototype = {
 9 
10         // 选择器构造函数
11         init: function() {
12 
13         },
14 
15         //原型方法
16         toArray: function() {
17 
18         },
19         get: function() {
20 
21         }    
22     };
23     jQuery.prototype.init.prototype = jQuery.prototype;
24 
25     // 局部变量和函数在匿名函数执行完后撤销
26     var a, b, c;
27     function fn() {
28 
29     }
30 
31     // 使jQuery成为全局变量
32     window.jQuery = window.$ = jQuery;
33 
34 })(window); 
复制代码

自执行匿名函数中声明的局部变量和函数在匿名函数执行完毕后撤销,释放内存,对外只保留jQuery全局变量接口。

转载请注明转自博客园浅析jQuery基础框架

posted @   杨君华  阅读(4435)  评论(4编辑  收藏  举报
编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
点击右上角即可分享
微信分享提示