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中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
微信小程序 slider 详解及实例代码
Jan 10 Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 Javascript
vue input输入框模糊查询的示例代码
May 22 Javascript
vue和webpack安装命令详解
Jun 15 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
js实现计算器功能
Aug 10 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 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
php下通过POST还是GET来传值
2008/06/05 PHP
PHP分页函数代码(简单实用型)
2010/12/02 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
js 函数性能比较方法
2020/08/24 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
Python切片知识解析
2016/03/06 Python
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
python扫描线填充算法详解
2020/02/19 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
怎样创建、运行java程序
2014/08/01 面试题
J2EE面试题大全
2016/08/06 面试题
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
2014全国两会心得体会
2014/03/17 职场文书
调解协议书
2014/04/16 职场文书
法律顾问服务方案
2014/05/15 职场文书
工会经费申请报告
2015/05/15 职场文书