文档章节

jQuery源码分析(一)

spilledyear
 spilledyear
发布于 2017/09/08 14:30
字数 1095
阅读 4
收藏 0
点赞 0
评论 0

jQuery.fn.init.prototype = jQuery.fn

网上搜了很多的JQuery源码分析之类的文章,下面这段代码应该是出现次数最多的一段,也是非常重要的一段。一开始看源码的时候,完全一脸懵逼,本来js的很多高级语法就不会。但也没什么,不会就去学,这可能和每个人的学习方式不一样有关。每天有一些收获就好了,不会的少了,会的就多了。 在普通情况下我们要用原生类、或者自定义类创建实例要用new运算符,但是我们在使用jQuery时从来没有使用过new,他是不是用其他方法来生成实例呢?是不是没有使用prototype属性呢?事实上他都有使用,只是内部处理的非常巧妙。先看一下源码,这里引用的js版本是3.1.1

// Define a local copy of jQuery  (第 93 行)
jQuery = function( selector, context ) {

		// The jQuery object is actually just the init constructor 'enhanced'
		// Need init if jQuery is called (just allow error to be thrown if not included)
		return new jQuery.fn.init( selector, context );
	},


//(第 114 行)
jQuery.fn = jQuery.prototype = {

	// The current version of jQuery being used
	jquery: version,


// A central reference to the root jQuery(document)  (第 2950 行)
var rootjQuery,

	// A simple way to check for HTML strings
	// Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
	// Strict HTML recognition (#11290: must start with <)
	// Shortcut simple #id case for speed
	rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/,

	init = jQuery.fn.init = function( selector, context, root ) {
		var match, elem;

		// HANDLE: $(""), $(null), $(undefined), $(false)
		if ( !selector ) {
			return this;
		}

// Give the init function the jQuery prototype for later instantiation  (第 3095 行)
init.prototype = jQuery.fn;

把几行关键的代码提取出来再进行分析:

  • return new jQuery.fn.init( selector, context );
  • jQuery.fn = jQuery.prototype
  • init = jQuery.fn.init
  • init.prototype = jQuery.fn;

就这样讲,prototype是为了实现继承。 由 jQuery.fn = jQuery.prototype 、init.prototype = jQuery.fn; 可以得到,init.prototype = jQuery.prototype,也就是说,init继承了jQuery的所有方法。也就是说,假如这时候我们要创建一个jQuery对象,直接new一个init对象就可以,是这样吗?然后又因为 init = jQuery.fn.init ,所以我们如果要创建一个jQuery对象,可以直接这样写 new jQuery.fn.init( );,这样有问题吗?好吧,其实这个地方我有些不解,init是jQuery的孩子,将父亲(jQuery)所有的功能都赋值给孩子(init),那这个时候呢?孩子是不是就类似父亲了?那是不是可以这样写 jQuery.fn.init = init.fn.init ? 好吧,我不明白,我还要好好学习。

$(function() {})、$(document).ready(function(){ }) 与 (function($) {})(jQuery) 的区别

$(function() {}) 是$(document).ready(function(){ }) 的简写,在页面内容都加载完后执行,而(function($) {})(jQuery)是一个匿名函数,也就是函数定义完之后,立即执行。就相当于function A(jQuery){} A(jQuery);,我还是觉得这样说比较通俗易懂一些。对于$(function() {})、$(document).ready(function(){ }) 这个地方,我其实有很多疑惑,为什么是这样呢?这个简写是怎么来的呢?而我的疑问好像并不是大多数人的疑问,我在网上找了很多文章,可大部分都没有提到这个我问题。要了解这个问题,你必须对jQuery有一定的了解,比如jQuery方法有哪些、每个方法实现的方式有什么不一样的地方。当然以我目前的的水平,是解释不清这些问题,很多东西都不知道怎么说清楚,我自己也不明白,好好学习。

© 著作权归作者所有

共有 人打赏支持
spilledyear
粉丝 0
博文 8
码字总数 4806
作品 0
JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒
05/10
0
0
炫酷实用 7款jQuery/HTML5图片应用

jQuery非常强大,我们这里有很多关于jQuery焦点图的插件,今天我们精选了7款利用jQuery和HTML5实现的超炫酷图片特效应用,有些也是焦点图插件,一起来看看吧。 1、HTML5 3D衣服摆动特效 超酷...

老鸟的空间
2014/07/05
0
0
JQuery.extend函数使用详解 $.extend

jQuery为开发插件提供了两个方法,分别是: 1. jQuery.fn.extend():给jQuery对象提供方法。 2. jQuery.extend():为扩展jQuery类本身添加方法。 先看源码是怎么实现的,截取自JQuery-1.11.0...

Josean_Luo
2014/04/11
0
1
开发中遇到的jQuery 事件处理机制的问题

前段时间遇到dom绑定click事件,触发时会重复执行绑定的函数,探究下jQuery事件绑定机制。基于jQuery-1.10.2。 起因:(对原始问题的一个抽象案例) 问题描述 点击click[1-5]中的任意一个,接...

MrMign
2013/11/27
0
9
jquery form元素操作

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("o......

remainvitality
2013/10/25
0
0
jQuery零基础入门——(一)初识jQuery

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,补充了个人的理解和日常遇到的点,主干出处来自廖雪峰老师的技术分享。 大家好,欢迎来到我们新的课程。应部分读者的要求,为满足...

JandenMa
06/29
0
0
Zepto 使用中的一些注意点(转)

前段时间完成了公司一个产品的 HTML5 触屏版,开发中使用了 Zepto 这个著名的 DOM 操作库。 为什么不是 jQuery 呢?因为 jQuery 的目标是兼容所有主流浏览器,这就意味着它的大量代码对移动端...

leqianlong
2014/04/23
0
0
咀嚼jQuery.noConflict()

jQuery = window.jQuery, // Map over the $ in case of overwrite$ = window.$, }

陈纪年
2013/06/02
0
3
谈谈 jQuery 中的防冲突(noConflict)机制

许多的 JS 框架类库都选择使用 $ 符号作为函数或变量名,jQuery 是其中最为典型的一个。在 jQuery 中,$ 符号只是 window.jQuery 对象的一个引用,因此即使 $ 被删除,window.jQuery 依然是保...

i33
2013/03/13
0
0
Zepto 使用中的一些注意点

前段时间完成了公司一个产品的 HTML5 触屏版,开发中使用了 Zepto 这个著名的 DOM 操作库。 为什么不是 jQuery 呢?因为 jQuery 的目标是兼容所有主流浏览器,这就意味着它的大量代码对移动端...

panpanhtai
2014/06/24
0
3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

20位活跃在Github上的国内技术大牛 leij 何小鹏 亚信

本文列举了20位在Github上非常活跃的国内大牛,看看其中是不是很多熟悉的面孔? 1. lifesinger(玉伯) Github主页: https://github.com/lifesinger 微博:@ 玉伯也叫射雕 玉伯(王保平),...

海博1600
2分钟前
0
0
高性能服务器本质论

一 服务器分类 从软件性能角度,高性能服务器分:cpu密集型服务器/IO密集型服务器 (1)CPU密集型:该类服务器没有对io的访问/没有同步点,性能瓶颈在于对cpu的充分利用。 典型的如转发服务器/...

码代码的小司机
3分钟前
0
0
Mybatis收集配置

一、Mybatis取Clob数据 1、Mapper.xml配置 <resultMap type="com.test.User" id="user"> <result column="id" property="id"/> <result column="json_data" property="jsonData" ......

星痕2018
29分钟前
0
0
centos7设置以多用户模式启动

1、旧版本linux系统修改inittab文件,在新版本执行vi /etc/inittab 会有以下提示 # inittab is no longer used when using systemd. # # ADDING CONFIGURATION HERE WILL HAVE NO EFFECT ON......

haha360
今天
0
0
OSChina 周日乱弹 —— 局长:怕你不爱我

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ andonny :分享周二珂的单曲《孤独她呀》 《孤独她呀》- 周二珂 手机党少年们想听歌,请使劲儿戳(这里) @孤星闵月 :没事干,看一遍红楼梦...

小小编辑
今天
158
9
Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式 Factory工厂模式 Singleton单例模式 Delegate委派模式 Strategy策略模式 Prototype原型模式 Template模板模式 Spring5 beans 接口实例化 代理Bean操作 ...

小致dad
今天
0
0
SpringBoot | 第十章:Swagger2的集成和使用

前言 前一章节介绍了mybatisPlus的集成和简单使用,本章节开始接着上一章节的用户表,进行Swagger2的集成。现在都奉行前后端分离开发和微服务大行其道,分微服务及前后端分离后,前后端开发的...

oKong
今天
10
0
Python 最小二乘法 拟合 二次曲线

Python 二次拟合 随机生成数据,并且加上噪声干扰 构造需要拟合的函数形式,使用最小二乘法进行拟合 输出拟合后的参数 将拟合后的函数与原始数据绘图后进行对比 import numpy as npimport...

阿豪boy
今天
17
0
云拿 无人便利店

附近(上海市-航南路)开了家无人便利店.特意进去体验了一下.下面把自己看到的跟大家分享下. 经得现场工作人员同意后拍了几张照片.从外面看是这样.店门口的指导里强调:不要一次扫码多个人进入....

周翔
昨天
1
0
Java设计模式学习之工厂模式

在Java(或者叫做面向对象语言)的世界中,工厂模式被广泛应用于项目中,也许你并没有听说过,不过也许你已经在使用了。 简单来说,工厂模式的出现源于增加程序序的可扩展性,降低耦合度。之...

路小磊
昨天
248
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部