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 js cookie的存储,获取和删除
Dec 29 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 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
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
php发送邮件的问题详解
2015/06/22 PHP
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
javascript常见操作汇总
2014/09/03 Javascript
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
简单使用Python自动生成文章
2014/12/25 Python
Python二叉树定义与遍历方法实例分析
2018/05/25 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
python五子棋游戏的设计与实现
2019/06/18 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
医学生实习自荐信
2013/10/01 职场文书
低碳生活倡议书
2014/04/14 职场文书
理发店策划方案
2014/06/05 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
《开国大典》教学反思
2016/02/16 职场文书