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 相关文章推荐
Google Map Api和GOOGLE Search Api整合实现代码
Jul 18 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
js同源策略详解
May 21 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
Python聚类算法之DBSACN实例分析
2015/11/20 Python
python游戏地图最短路径求解
2019/01/16 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
python raise的基本使用
2020/09/10 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
无毒社区工作方案
2014/05/23 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
如何Tomcat中使用ipv6地址
2022/05/06 Servers