深入理解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 相关文章推荐
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
javascript Deferred和递归次数限制实例
Oct 21 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
分享我对JS插件开发的一些感想和心得
Feb 04 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
JS动态图片的实现方法完整示例
Jan 13 Javascript
canvas 中如何实现物体的框选
Aug 05 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获取网页请求状态程序示例
2014/06/17 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
javascript Array对象基础知识小结
2010/11/16 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
Python递归遍历列表及输出的实现方法
2015/05/19 Python
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
Python3 assert断言实现原理解析
2020/03/02 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
大学军训感言800字
2014/02/27 职场文书
企业文化建设实施方案
2014/03/22 职场文书
中考标语大全
2014/06/05 职场文书
关爱老人标语
2014/06/21 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
紧急迫降观后感
2015/06/15 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
SQL 聚合、分组和排序
2021/11/11 MySQL
python如何为list实现find方法
2022/05/30 Python