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 相关文章推荐
使用正则替换变量
May 05 Javascript
在html页面上拖放移动标签
Jan 08 Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 Javascript
JavaScript也谈内存优化
Jun 06 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
jquery实现横向图片轮播特效代码分享
Nov 19 Javascript
js点击文本框弹出可选择的checkbox复选框
Feb 03 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
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
搜索引擎技术核心揭密
2006/10/09 PHP
php判断变量类型常用方法
2012/04/24 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
[06:36]吞吞映像top1
2014/06/20 DOTA
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
Python字符串三种格式化输出
2020/09/17 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
新闻系毕业生推荐信
2013/11/16 职场文书
初中新生军训方案
2014/05/13 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
募捐感谢信
2015/01/22 职场文书
优秀英文求职信范文
2015/03/19 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis