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 相关文章推荐
js动态加载以及确定加载完成的代码
Jul 31 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
Ant design vue中的联动选择取消操作
Oct 31 Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 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可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
jquery蒙版控件实现代码
2010/12/08 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
详解如何使用Python编写vim插件
2017/11/28 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
django 多数据库配置教程
2018/05/30 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
保安公司服务承诺书
2014/05/28 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
公司给客户的感谢信
2015/01/23 职场文书
新教师个人总结
2015/02/06 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书