深入理解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 相关文章推荐
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
Vue组件通信之Bus的具体使用
Dec 28 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
layer.prompt输入层的例子
Sep 24 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 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 分页类 扩展代码
2009/06/11 PHP
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
JavaScript 基本概念
2015/01/20 Javascript
js获取域名的方法
2015/01/27 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
2019/08/16 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
Cpy和Python的效率对比
2015/03/20 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
flask session组件的使用示例
2018/12/25 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
pyqt5中动画的使用详解
2020/04/01 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
研究生考核个人自我鉴定
2014/03/27 职场文书
红头文件任命书范本
2014/06/05 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP