深入理解jQuery()方法的构建原理


Posted in Javascript onDecember 05, 2016

前言

虽然JQuery相对简单,但要全面掌握,且快速灵活的使用它也并不那么容易,它提供了很多方法,包含了网页开发的各个知识面,所以要全面掌握这些知识点,个人认为还是需要对jquery有深入的理解,对这些知识点做分类整理记忆,这样你才能面对一些JQuery代码的时候不会感到迷惑,才会知道采用何种方式实现某个特效是最佳实践,才能快速的采用JQuery来进行项目开发。

jQuery中最常用方法的就是jQuery( ) ,也即$( )

jQuery( )是一个函数调用,调用的结果是返回了一个jQuery实例对象。

编写组件通常的做法是将组件封装成一个对象,需要用的时候则通过new运算符来创建一个实例。但是jQuery( )无须我们用new手工实例化,它会自动返回一个实例。

要实现这一点,最直接的思路就是定义这样一个函数:

深入理解jQuery()方法的构建原理

这么做的问题是出现了死循环:

深入理解jQuery()方法的构建原理

最简单的解决办法是借助另一个构造函数:

深入理解jQuery()方法的构建原理

这么做技术上并没有什么问题,但是jQuery的作者并没有这么做,可能是出于某种技术洁癖或者我暂时不清楚的原因,init被定义在了jQuery函数的原型中:

深入理解jQuery()方法的构建原理

通过init作为中转站,最终return出了一个jQuery实例。看上去更“雅致”,更有“技术范”。

将上述代码写在一个自执行函数内(形成私有作用域,避免命名空间污染),就构成了jQuery的核心框架(简化版):

深入理解jQuery()方法的构建原理

要理解上述结构的工作原理,必须理解JavaScript基于构造函数和原型的继承模式。

当函数调用表达式前出现了关键字new,这个函数就成了构造函数,此时会依次发生四件事:

     1、首先一个空对象(又称实例)被创建出来了。

     2、该空对象继承构造函数的原型中的属性和方法。这也是为什么要把方法都写在构造函数的prototype里。

     3、该空对象被赋值给构造函数内部的this对象。

     4、执行构造函数。如果构造函数中显式的返回了一个对象,那么new出的就不再是新创建的空对象,而是return指定的对象。否则一律返回新建空对象。

具体参见阮一峰教程:http://javascript.ruanyifeng.com/oop/basic.html

于是jQuery( )的构造原理就很清晰了:每次调用jQuery( )都返回由构造函数init指定返回的this对象,而this对象已经被赋值为那个新创建的空对象。由于把jQuery.prototype都赋给了init.prototype,所以新创建的空对象继承所有jQuery的方法。

构造函数init里面的return this其实删掉也无妨,至于作者为啥要加这句,呃,可能是因为知道的太多。

总结

以上就是jQuery()方法构建原理的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
Javascript 函数中的参数使用分析
Mar 27 Javascript
js播放wav文件(源码)
Apr 22 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
Vue中使用的EventBus有生命周期
Jul 12 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 #Javascript
浅析Ajax语法
Dec 05 #Javascript
jQuery的事件预绑定
Dec 05 #Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 #Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 #Javascript
微信小程序 底部导航栏目开发资料
Dec 05 #Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 #Javascript
You might like
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
比较完整的微信开发php代码
2016/08/02 PHP
php实现socket推送技术的示例
2017/12/20 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
vue.js项目打包上线的图文教程
2017/11/16 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
Django中的用户身份验证示例详解
2019/08/07 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
python中Django文件上传方法详解
2020/08/05 Python
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
清洁工岗位职责
2014/01/29 职场文书
市场营销方案范文
2014/03/11 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
护士辞职信怎么写
2015/02/27 职场文书
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS