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 document.images实例
May 27 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 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
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
网页自动跳转代码收集
2009/09/27 Javascript
JS 显示当前日期与时间的代码
2010/03/24 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
JavaScript实现的拼图算法分析
2019/02/13 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
python实现八大排序算法(2)
2017/09/14 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
物理教育专业毕业生推荐信
2013/11/03 职场文书
办公室前台的岗位职责
2013/12/20 职场文书
人民调解协议书范本
2014/10/11 职场文书
物业公司管理制度
2015/08/05 职场文书
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python