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 相关文章推荐
javascript面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
基于jquery实现最简单的选项卡切换效果
May 08 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
JavaScript实现购物车基本功能
Jul 21 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
js 图片懒加载的实现
Oct 21 Javascript
Vue+Element-U实现分页显示效果
Nov 15 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
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
JQuery选择器特辑 详细小结
2012/05/14 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
实现vuex原理的示例
2020/10/21 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
详解python字节码
2018/02/07 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
Tensorflow 实现释放内存
2020/02/03 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
物流司机岗位职责
2013/12/28 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
加多宝凉茶广告词
2014/03/18 职场文书
护士节策划方案
2014/05/19 职场文书
文化产业实施方案
2014/06/07 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
简述Java中throw-throws异常抛出
2021/08/07 Java/Android