深入理解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 相关文章推荐
一个js封装的不错的选项卡效果代码
Feb 15 Javascript
Javascript中Eval函数的使用
Mar 23 Javascript
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
javascript监听鼠标滚轮事件浅析
Jun 05 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 Javascript
jquery实现垂直手风琴导航栏
Feb 18 jQuery
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的String类代码
2010/04/20 PHP
php长字符串定义方法
2012/07/12 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
深入分析PHP设计模式
2020/06/15 PHP
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
javascript+css3开发打气球小游戏完整代码
2017/11/28 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
对python中的for循环和range内置函数详解
2018/04/17 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
酒店保洁主管岗位职责
2013/11/28 职场文书
网站开发实习生的自我评价
2013/12/11 职场文书
寄语十八大感言
2014/02/07 职场文书
警校毕业生自我评价
2014/04/06 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫