jQuery的框架介绍


Posted in Javascript onMay 11, 2016

jQuery使用有一段时间了,但是有一些API的实现实在想不通。小编参考相关资料源码,现在把我的学习过程和收获分享给大家。

下面将使用简化的代码来介绍,主要关注jQuery的实现思想~>_<~

//匿名立即执行函数
//.防止污染全局空间
//.选择性保护内部变量
(function(window, undefined){
//第二参数undefined设置而不传的原因:
// 外部发生这种情况:var undefined = 时,undefined会被篡改
// 设置第二参数而不传,则undefined就会被重置回原来值
function jQuery(sel){
return new jQuery.prototype.init(sel);
}
jQuery.prototype = {
constructor: jQuery,
init: function(sel){
if(typeof sel === 'string'){
var that = this;
//jQuery内部使用的是Sizzle,这里使用querySelectorAll替代
var nodeList = document.querySelectorAll(sel);
Array.prototype.forEach.call(nodeList, function(val, i){
that[i] = val;
})
this.selector = sel;
this.length = nodeList.length;
}
}
}
jQuery.prototype.init.prototype = jQuery.prototype;
//对外暴露jQuery:将jQuery绑定在window上面
window.$ = jQuery;
})(window);

--------------------------

jQuery一开始使用匿名立即执行函数包裹其内部,并在第5行对外暴露;

所谓的匿名立即执行函数即这个函数是匿名的(没有名字)、定义完后立即调用的;

当我们在外部调用$("div")时,其实调用的就是内部的jQuery("div");

(function(window, undefined){
//内部变量
//对外暴露jQuery:将jQuery绑定在window上面
window.$ = jQuery;
})(window);
$("div")

--------------------------

好,接下来稍复杂点,下面的代码主要实现如图的互相引用:

以$('div')调用为例:

jQuery的框架介绍

从第2行代码可以看出,jQuery使用jQuery.prototype.init来实例化jQuery对象,但这会带来一个问题:

实例化的对象只能访问到init下的变量,而不能访问到jQuery.prototype(jQuery对外提供的API绑定在该对象下)。

于是乎,补写第21行代码,将init.prototype指向jQuery.prototype即可。

这样就完成了,使用init来实例化,且可以在init作用域下访问到jQuery.prototype。

function jQuery(sel){
return new jQuery.prototype.init(sel);
}
jQuery.prototype = {
constructor: jQuery,
init: function(sel){
if(typeof sel === 'string'){
var that = this;
//jQuery内部使用的是Sizzle,这里使用querySelectorAll替代
var nodeList = document.querySelectorAll(sel);
Array.prototype.forEach.call(nodeList, function(val, i){
that[i] = val;
})
this.selector = sel;
this.length = nodeList.length;
}
}
}
jQuery.prototype.init.prototype = jQuery.prototype;

为什么使用jQuery.prototype.init来实例化对象,而不直接使用jQuery函数呢?

假设使用jQuery函数来实例化对象,这样对象之间的引用的确可以简化为 jQuery-->jQuery.prototype。

但是调用会变得繁琐起来:new $('div'),所以基于这个考虑(猜测(⊙0⊙)),在内部使用较为复杂的实现,来简化调用。

--------------------------

好,最后,再来看一下init的实现。同样也简化了代码,只实现了最常用的一种情况。

jQuery会把获取到的nodeList处理成数组(方便后续使用),并在其下挂载一些变量,如length,selector。

jQuery的框架介绍

init: function(sel){
if(typeof sel === 'string'){
var that = this;
//jQuery内部使用的是Sizzle,这里使用querySelectorAll替代
var nodeList = document.querySelectorAll(sel);
Array.prototype.forEach.call(nodeList, function(val, i){
that[i] = val;
})
this.selector = sel;
this.length = nodeList.length;
}
}

本文所述到此结束,下篇文章将给大家介绍jQuery链式调用与show知识浅析,欲了解更多资讯敬请关注三水点靠木网站!

Javascript 相关文章推荐
基于jquery的模态div层弹出效果
Aug 21 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 Javascript
jQuery链式调用与show知识浅析
May 11 #Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 #Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 #Javascript
javascript简单判断输入内容是否合法的方法
May 11 #Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 #Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
May 10 #Javascript
JavaScript中的原型prototype完全解析
May 10 #Javascript
You might like
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
PHP的FTP学习(三)
2006/10/09 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
jquery获得keycode的示例代码
2013/12/30 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
python实现class对象转换成json/字典的方法
2016/03/11 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
手机配件第一品牌:ZAGG
2017/05/28 全球购物
泰国网上购物:Shopee泰国
2018/09/14 全球购物
EJB3.1都有哪些改进
2012/11/17 面试题
精彩自我鉴定
2014/01/16 职场文书
外贸专业求职信
2014/03/09 职场文书
《锄禾》教学反思
2014/04/08 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
学校花圃的标语
2014/06/18 职场文书
机电一体化专业求职信
2014/07/22 职场文书
人大代表选举标语
2014/10/07 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
刘胡兰观后感
2015/06/16 职场文书
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫