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 相关文章推荐
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
JavaScript程序中的流程控制语句用法总结
May 23 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
vue.js单文件组件中非父子组件的传值实例
Sep 13 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
239军机修复记
2021/03/02 无线电
WordPress中Gravatar头像缓存到本地及相关优化的技巧
2015/12/19 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
Javascript 解疑
2009/11/11 Javascript
jquery 问答知识整理
2010/02/11 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
JS常见算法详解
2017/02/28 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
Python 代码性能优化技巧分享
2012/08/07 Python
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
医院护士求职自荐信格式
2013/09/21 职场文书
优秀士兵个人事迹材料
2014/01/19 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
实习证明格式范文
2014/10/14 职场文书