`
jj7jj7jj
  • 浏览: 50320 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

躺在jquery石榴裙下

阅读更多
本来准备分析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源码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-3.7.0.min.js(jQuery下载)...

    jquery插件库(jquery.treeview插件库)

    jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....

    jQuery基础.pptx

    JavaScript+jQuery 网页特效设计 jQuery(3.4.1)基础 ...很多大公司都在使用 jQuery, 例如: Google Microsoft IBM Netflix 3、jQuery安装 “jquery-1.10.2.min.js”&gt;&lt;/script&gt;// 需要注意下载的版本 3.1

    jQuery、jQueryUI及jQueryMobile技巧与示例

    资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...

    jQuery1.12.4+jQuery中文手册.rar

    在本压缩包中,我们有两个版本的jQuery核心库文件:`jquery-1.12.4.js` 和 `jquery-1.12.4.min.js`。前者是未压缩的源代码,适合开发调试使用,后者是经过压缩和优化的版本,适用于生产环境,体积更小,加载速度更快...

    jquery上下滚动插件

    在描述中提到,该插件兼容IE7、8、9以及Firefox等浏览器,这意味着它采用了广泛兼容的JavaScript代码,以确保在多种浏览器环境下都能正常工作。这对于前端开发者来说是一项重要的考虑因素,因为不同的浏览器可能对...

    jquery例子大全 jquery demo

    这些插件扩展了jQuery的功能,解决了特定场景下的问题,使得开发更加高效。 ### 七、jQuery 与现代前端框架比较 虽然现在有许多现代化的前端框架,如React、Vue和Angular,jQuery 仍然有其独特的价值。对于简单的...

    jquery精简版jquery-small.js

    jquery 精简版 jquery 精简版 jquery 精简版jquery 精简版 jquery 精简版 jquery 精简版 jquery 精简版

    Jquery实现div左右上下收缩

    在网页开发中,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,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-1.11.3.min开发工具 jquery-...

    最新版JQuery-jquery-3.2.1.min.js

    在本文中,我们将深入探讨最新版的jQuery,即`jquery-3.2.1.min.js`,以及该版本中的一些变化。** ### 1. jQuery 3.x 版本概述 jQuery 3.x 系列是继1.x和2.x后的又一重大更新,它主要关注性能优化、API清理以及对...

    JQuery颜色渐变插件jquery.color.js

    然而,在支持较旧浏览器或需要更复杂动画控制的场景下,`jquery.color.js`仍然是一种可靠的选择。 总的来说,`jquery.color.js`是jQuery生态系统中的一个重要组成部分,它扩展了jQuery的动画功能,使得开发者能够更...

    jquery1.2.3到3.3.1版本都有

    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+实现烟花特效前端+jQuery+实现烟花特效前端+...

    jquery1.7中文手册CHM文档(附jquery1.82chm手册)

    资源名称:jquery1.7 中文手册 CHM文档(附jquery1.82 chm手册)内容简介:因国内jquery中文手册更新太慢了,等了一段时间实在等不下去了,干脆自己动手做一个丰衣足食,时刻更新. 最后感谢Shawphy提供1.4.1版,jehn提供...

    jquery-2.1.1.js 、jquery-2.1.1.min.js 【jquery包 js】

    在这个主题中,我们将深入探讨jQuery 2.1.1版本,包括它的主要特性、功能以及在实际开发中的应用。 首先,让我们了解一下jQuery的核心理念——"Write Less, Do More"。通过封装常见的DOM操作、事件处理、动画效果和...

    jquery-3.0.0.js 、jquery-3.0.0.min.js 【官方jquery包 js】

    2. 代码优化:通过删除注释、合并变量、缩短函数名等手段,`.min.js`在不牺牲功能的前提下,实现了代码最小化,提升了运行效率。 三、jQuery在实际项目中的应用 1. DOM操作:jQuery提供了一系列简便的方法,如`$...

Global site tag (gtag.js) - Google Analytics