本来准备分析1.4.3,尽然有接近7000行代码,有些吃不消,所以还是先来1.2.6的,分析完了之后再来1.4.3的
闲话不多说了,go on!
这一节主要分析它的架构
最外层的结构
(function(){})()
闭包+匿名函数,好处就是独立的作用域,加载并立即执行内部的代码。
var _jQuery = window.jQuery,
_$ = window.$;
之所以拟两个变量$ 和 jQuery,是考虑的命名空间的问题,比如和Prototype库一起使用的时候,$就可能会出现冲突的情况,这个时候就可以使用jquery的noConflict,从而避免这种情况的发生。
var jQuery = window.jQuery = window.$ = function(selector, context) {
return new jQuery.fn.init(selector, context);
};
这个是jquery函数的总入口,当我们使用$(..)返回的实际上是jQuery.fn.init实例(所以jQuery对象实际上是jQuery.fn.init对象),并不是返回一个很纯粹的jquery实例,这是为什么呢?其目的就是为了避免在生成实例的时候使用new运算符,可以将 $()理解为是工厂方法。
在后面的代码会发现下面这一段:
jQuery.fn = jQuery.prototype (约 33行) //1 式
jQuery.fn.init.prototype = jQuery.fn; (约 529行) //2 式
jQuery.extend = jQuery.fn.extend = function(){..}(约 550行) //3 式
由1式和2式可得出:
jQuery.fn.init.prototype=jQuery.prototype,jQuery.fn.init.prototype是$()实例的原型,jQuery.prototype是$函数的原型,两者是有区别,简单的说就是一个是jQuery.fn.init的原型,一个是$的原型。
jQuery.fn = jQuery.prototype这里直接理解为jQuery.fn是$的原型
jQuery.extend给$加方法,jQuery.fn.extend是给的$.fn.init原型加方法,写插件的时候,这个时要区分开的,如果是全局功能用jQuery.extend,如果是jQuery对象的功能用jQuery.fn.extend,
从3式可以看出,John用这种方式,统一了不同接口的同一种实现。
var quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#(\w+)$/,
isSimple = /^.[^:#\[\.]*$/,
undefined;
先从undefined开始讲起,undefined的作用是为了加速,为什么能加速了,是因为原来undefined是window上的一个属性,这样就会遍历window,然后将其属性进行赋值,这样就会加快后面的运行速度
再来看quickExpr,从"|"后面的#(\w+)开始,这个是用来判断id的,假设用exec(我认为最强大的函数),假设匹配的话那么返回回来数组的第一个字符串就会"#idname",第二字符串就是"idname";"[^<]*(<(.|\s)+>)[^>]*"匹配诸如这样"skdfjj<asdfw>sdjfk"的字符串,当取数组里面下标为1的元素,那就取到得是"<asdfw>"
在jQuery.prototype.init函数里面就用到quickExpr
var match = quickExpr.exec(selector);
match[1]取到得就是标签
match[2]标签名
match[3]取到的就是id
再来看isSimple英文注解上说Is it a simple selector,/^.[^:#\[\.]*$/这个正则很简单,基本涵盖几种简单的选择器,比如#id,.class,element,*,select1,select2
由此可以看出前面那一个.的含义甚多,而后面的那个*号也是恰到好处,就这样很完美的处理这几种情况。
John说过正则一直是人们所忽略的一块,jquery之所以这么通用,处理问题这么优雅,很大程度上是因为js语法和正则的变化时无穷无尽的。
下一节 分析jquery 20-500行
分析源码是提升水平最快的方式,并且看似好几千行的代码,随着逐步分析,会理解和熟悉他的运作方式和原理,最后真正要拿出来分析的会越来越少,以短时间来获取别人好几年的技艺结晶,是相当值的,特别是面试的时候,这些东西能让你讲出入骨三分的花样来,会让面试官对你刮目相看。希望进来的朋友多提提意见
分享到:
相关推荐
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
JavaScript+jQuery 网页特效设计 jQuery(3.4.1)基础 ...很多大公司都在使用 jQuery, 例如: Google Microsoft IBM Netflix 3、jQuery安装 “jquery-1.10.2.min.js”></script>// 需要注意下载的版本 3.1
资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...
在本压缩包中,我们有两个版本的jQuery核心库文件:`jquery-1.12.4.js` 和 `jquery-1.12.4.min.js`。前者是未压缩的源代码,适合开发调试使用,后者是经过压缩和优化的版本,适用于生产环境,体积更小,加载速度更快...
在描述中提到,该插件兼容IE7、8、9以及Firefox等浏览器,这意味着它采用了广泛兼容的JavaScript代码,以确保在多种浏览器环境下都能正常工作。这对于前端开发者来说是一项重要的考虑因素,因为不同的浏览器可能对...
这些插件扩展了jQuery的功能,解决了特定场景下的问题,使得开发更加高效。 ### 七、jQuery 与现代前端框架比较 虽然现在有许多现代化的前端框架,如React、Vue和Angular,jQuery 仍然有其独特的价值。对于简单的...
jquery 精简版 jquery 精简版 jquery 精简版jquery 精简版 jquery 精简版 jquery 精简版 jquery 精简版
在网页开发中,jQuery 是一个非常流行的 JavaScript 库,它简化了 DOM 操作、事件处理、动画效果等任务。标题“Jquery实现div左右上下收缩”涉及到的是使用 jQuery 创建动态的 CSS 效果,使 `div` 元素能够根据用户...
jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,jquery,...
然而,在没有库或框架的支持下,编写复杂的 DOM 操作和 AJAX 调用等任务可能相当繁琐且容易出错。JQuery 作为一种轻量级的 JavaScript 库,极大地简化了这些操作,使开发者能够更高效地进行前端开发。 - **跨浏览器...
开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-...
在本文中,我们将深入探讨最新版的jQuery,即`jquery-3.2.1.min.js`,以及该版本中的一些变化。** ### 1. jQuery 3.x 版本概述 jQuery 3.x 系列是继1.x和2.x后的又一重大更新,它主要关注性能优化、API清理以及对...
然而,在支持较旧浏览器或需要更复杂动画控制的场景下,`jquery.color.js`仍然是一种可靠的选择。 总的来说,`jquery.color.js`是jQuery生态系统中的一个重要组成部分,它扩展了jQuery的动画功能,使得开发者能够更...
jquery1.2.3到3.3.1版本都有: jquery-1.10.2.min.js jquery-1.11.1.min.js jquery-1.11.3.min.js jquery-1.2.3.min.js jquery-1.3.2.min.js jquery-1.4.2.min.js jquery-1.4.4.min.js jquery-1.5.2.min.js jquery-...
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
资源名称:jquery1.7 中文手册 CHM文档(附jquery1.82 chm手册)内容简介:因国内jquery中文手册更新太慢了,等了一段时间实在等不下去了,干脆自己动手做一个丰衣足食,时刻更新. 最后感谢Shawphy提供1.4.1版,jehn提供...
在这个主题中,我们将深入探讨jQuery 2.1.1版本,包括它的主要特性、功能以及在实际开发中的应用。 首先,让我们了解一下jQuery的核心理念——"Write Less, Do More"。通过封装常见的DOM操作、事件处理、动画效果和...
2. 代码优化:通过删除注释、合并变量、缩短函数名等手段,`.min.js`在不牺牲功能的前提下,实现了代码最小化,提升了运行效率。 三、jQuery在实际项目中的应用 1. DOM操作:jQuery提供了一系列简便的方法,如`$...