jQuery基础框架浅入剖析


Posted in Javascript onDecember 27, 2012

一、原型模式结构

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

Javascript 相关文章推荐
用Javascript 获取页面元素的位置的代码
Sep 25 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
node-red File读取好保存实例讲解
Sep 11 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 #Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 #Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 #Javascript
Three.js源码阅读笔记(光照部分)
Dec 27 #Javascript
通过jQuery源码学习javascript(三)
Dec 27 #Javascript
JS原型对象通俗"唱法"
Dec 27 #Javascript
通过jQuery源码学习javascript(二)
Dec 27 #Javascript
You might like
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
php判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
javascript面向对象之二 命名空间
2011/02/08 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
JsChart组件使用详解
2018/03/04 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
python聊天程序实例代码分享
2013/11/18 Python
Python使用Supervisor来管理进程的方法
2015/05/28 Python
python实现计算倒数的方法
2015/07/11 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
美国时尚女装在线:Missguided
2016/12/03 全球购物
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
如何启动时不需输入用户名与密码
2014/05/09 面试题
请解释virtual关键字的含义
2015/06/17 面试题
酒店总经理工作职责
2013/12/13 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
导游词格式
2015/02/13 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python