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 相关文章推荐
7个Javascript地图脚本整理
Oct 20 Javascript
JQuery的一些小应用收集
Mar 27 Javascript
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
javascript prototype 原型链
2009/03/12 Javascript
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
Prototype Object对象 学习
2009/07/12 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
python输出指定月份日历的方法
2015/04/23 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
施工安全协议书
2013/12/11 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
保安辞职信范文
2015/02/28 职场文书
自我检讨书怎么写
2015/05/07 职场文书
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
Python socket如何解析HTTP请求内容
2022/02/12 Python
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android