深入理解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 相关文章推荐
JavaScript 计算当天是本年本月的第几周
Mar 22 Javascript
JS画5角星方法介绍
Sep 17 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 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 miniBB中文乱码问题解决方法
2008/11/25 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
python解析模块(ConfigParser)使用方法
2013/12/10 Python
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
介绍Python中的fabs()方法的使用
2015/05/14 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
python3转换code128条形码的方法
2019/04/17 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
Python如何对齐字符串
2020/07/30 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
企业演讲稿范文大全
2014/05/20 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书