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的大众点评,分类导航实现代码
Aug 23 Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
jQuery弹出(alert)select选择的值
Apr 21 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
Dec 27 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 Javascript
Seajs源码详解分析
Apr 02 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
ES6实现图片切换特效代码
Jan 14 Javascript
Vue的props父传子的示例代码
May 20 Javascript
一篇文章学会Vue中间件管道
Jun 20 Vue.js
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
PHP 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
curl和libcurl的区别简介
2015/07/01 PHP
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
jQuery JSON的解析方式分享
2011/04/05 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
机器学习10大经典算法详解
2017/12/07 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
Python新手如何理解循环加载模块
2020/05/29 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
python绘制汉诺塔
2021/03/01 Python
公司道歉信范文
2014/01/09 职场文书
摄影助理岗位职责
2014/02/07 职场文书
医院工作检讨书范文
2014/02/10 职场文书
暑期社会实践感言
2014/02/25 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
爱晚亭导游词
2015/02/09 职场文书
教师辞职书范文
2015/02/26 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书