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 相关文章推荐
js 验证密码强弱的小例子
Mar 21 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
React Form组件的实现封装杂谈
May 07 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
JavaScript实现点击切换功能
Jan 27 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学习之数组值的操作
2011/04/17 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
Python用GET方法上传文件
2015/03/10 Python
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
python发送邮件功能实现代码
2016/07/15 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
python 字符串只保留汉字的方法
2018/11/16 Python
Python中Numpy mat的使用详解
2019/05/24 Python
python 瀑布线指标编写实例
2020/06/03 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
实习教师自我鉴定
2013/12/09 职场文书
目标管理责任书
2014/04/15 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
办公室卫生管理制度
2015/08/04 职场文书