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显示选择目录对话框的代码
Nov 10 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
js自定义回调函数
Dec 13 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 Javascript
JS数据类型判断的几种常用方法
Jul 07 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图片验证码代码
2008/03/27 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
ThinkPHP之N方法实例详解
2014/06/20 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
node中Express 动态设置端口的方法
2017/08/04 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
Volcom法国官网:美国冲浪滑板品牌
2017/05/25 全球购物
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
档案保密承诺书
2014/06/03 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
教师师德师风整改措施
2014/10/24 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
廉政党课工作报告案例
2019/06/21 职场文书