jQuery( )方法的构建原理
jQuery中最常用方法的就是jQuery( ),也即$( )。
jQuery( )是一个函数调用,调用的结果是返回了一个jQuery实例对象。
编写组件通常的做法是将组件封装成一个对象,需要用的时候则通过new运算符来创建一个实例。但是jQuery( )无须我们用new手工实例化,它会自动返回一个实例。
要实现这一点,最直接的思路就是定义这样一个函数:

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

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

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

通过init作为中转站,最终return出了一个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( )方法的构建原理的更多相关文章
- .NET Core中间件的注册和管道的构建(1)---- 注册和构建原理
.NET Core中间件的注册和管道的构建(1)---- 注册和构建原理 0x00 问题的产生 管道是.NET Core中非常关键的一个概念,很多重要的组件都以中间件的形式存在,包括权限管理.会话管理 ...
- jQuery源码:从原理到实战
jQuery源码:从原理到实战 jQuery选择器对象 $(".my-class"); document.querySelectorAll*".my-class" ...
- jquery无new构建学习笔记
当我们想要创建一个对象,我们可能使用new方法去构建一个对象,那按道理jquery也是一个对象,应该也是用new jquery()来构建呀为什么我们创建jquery对象不用new jquery()而是 ...
- jQuery方法实现
children 原生JavaScript中,如果希望找到某个元素的子元素,只能通过Node类型上的children方法一步一步获取.如 let li = document.querySelector ...
- 输入框去除默认的文字,jquery方法
需求:所有的输入框获取焦点时,去掉默认的提示文字,失去焦点时如果输入框为空,恢复默认的提示文字. 解决方案:jquery方法,以下有三种,按照利弊,我建议最后一种. 先看html代码: <inp ...
- Webpack探索【16】--- 懒加载构建原理详解(模块如何被组建&如何加载)&源码解读
本文主要说明Webpack懒加载构建和加载的原理,对构建后的源码进行分析. 一 说明 本文以一个简单的示例,通过对构建好的bundle.js源码进行分析,说明Webpack懒加载构建原理. 本文使用的 ...
- Webpack探索【15】--- 基础构建原理详解(模块如何被组建&如何加载)&源码解读
本文主要说明Webpack模块构建和加载的原理,对构建后的源码进行分析. 一 说明 本文以一个简单的示例,通过对构建好的bundle.js源码进行分析,说明Webpack的基础构建原理. 本文使用的W ...
- jsonp协议 java服务端、JQuery客户端 简单实现原理
原文链接:https://blog.csdn.net/Activity_Time/article/details/96440806 1. 概述 Jsonp(JSON with Padding) 是 j ...
- 1.4 jQuery方法,JSON介绍
jQuery方法: jQuery添加元素: append()方法: $("元素").append("追加内容"); prepend()方法: $("元 ...
随机推荐
- nginx 服务器重启命令,关闭
nginx -s reload :修改配置后重新加载生效 nginx -s reopen :重新打开日志文件nginx -t -c /path/to/nginx.conf 测试nginx配置文件是 ...
- Win10环境下安装Vmware+Ubuntu14 注意点
下载相关软件正常安装完成后可能会碰到以下两个问题,这里备注一下,备用 1.Ubuntu的root密码设置 2.Vmware网络连接设成桥接之后,Win10可以ping通Ubuntu,但Ubuntu无法 ...
- nginx error_log 错误日志配置说明
nginx的error_log类型如下(从左到右:debug最详细 crit最少): [ debug | info | notice | warn | error | crit ] 例如:error_ ...
- MySQL 5.6 for Windows 解压缩版配置安装
MySQL安装文件分为两种,一种是msi格式的,一种是zip格式的.如果是msi格式的可以直接点击安装,按照它给出的安装提示进行安装(相信大家的英文可以看懂英文提示),一般MySQL将会安装在C:\P ...
- Linux服务器jps报process information unavailable
在Linux下执行 jps 是快速查看Java程序进程的命令,一般情况下hadoop,hbase,storm等进程都是通过jps查看,有些时候因为进程没有被正常结束,比如资源占用过大时挂掉或者没有结束 ...
- VC++ 制作一个简易的控制台时钟应用
1.下载EasyX Library for C++ (http://www.easyx.cn/) 直接下载:EasyX_20151015(beta) EasyX 绘图库目前支持 Visual C++ ...
- tp5 中 model 的更新方法
// 过滤非数据表字段更新 public function update(Request $request){ $user = model('User'); $result = $user -> ...
- VS2012下X64平台嵌入汇编程序
VS2012在win32平台编译的时候可以很好的支持汇编语言的嵌入.建立一个控制台应用程序,选择空项目.项目建立好之后添加一个.cpp文件.在cpp文件中写入如下代码: #include <io ...
- sd卡脱机烧写系统的方法(测试成功)
一.sd卡烧写系统的基本思路: (1)把uboot.bin烧写到sd卡 (2)把image整个文件夹复制到sd卡 (3)开发板从sd卡启动,就开始自动烧写到nandflash中了. 二.烧写uboot ...
- 函数图象(N=x+y*i)
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...