jQuery 源码分析和使用心得 - core.js

  core是jQuery的核心内容, 包含了最基础的方法, 比如我们常用的 $(selector, context), 用于遍历操作的 each, map, eq, first 识别变量类型的 isArray, isNumeric, type 等 . 这些方法为jQuery后续操作提供最基础的支持.

构造函数 jQuery( selector, context )

  说到jQuery, 大家可能最熟悉的就是 $(selector, context) , 我觉得这也是jQuery受到人们欢迎的很大一部分原因, 因为这个方法非常的强大.

    // Define a local copy of jQuery
    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 );
    },

  这里我们很明显的看到一个关键词就是new ,这说明每一次调用$()就会new一个jQuery对象出来 , 有些人可能不注意这一点就会写出下面的代码, 或者会出现 $("#id") === $("#id")的这种判断 , 这种写法都是不可取的, 我们应该尽量的节省jQuery的获取次数, 重复利用jQuery对象.

if($(".class").hasClass()){
    $(".class").removeClass();
}

静态属性和原型属性

  从core.js中可以看到两类属性( q君: 函数也是属性哦! ), 一类是以jQuery.extend({})定义的静态属性, 一类是通过  jQuery.fn = jQuery.prototype = {} 进行定义的原型属性. 静态属性是jQuery函数的属性, 通过 $调用, 如$.each . 静态属性通常为与页面元素无关的工具方法. 原型属性是拓展jQuery对象的一些功能, 它持有jQuery对象自身(this) , 为处理自身对象之用 调用形式为  var $a = $("a"); $a.each() .( q君: jQuery里面有两个each ,要分清 )

  具体的实现方法都比较简单, 就不再一一叙述. jQuery.extend 是一个很常用的方法, 它可以将几个对象合并成一个对象, 并且支持深拷贝和浅拷贝两种方式 , 在做一些默认配置和实现的时候会经常用到.

jQuery对象创建

  通过查看 jQuery( selector, context )函数, 知道了 jQuery 调用了 new jQuery.fn.init( selector, context ). 在这句话上面有一条注释: Need init if jQuery is called .  我们在 /src/core/目录下找到init.js. 内容大致如下

init = jQuery.fn.init = function( selector, context ) {
    //  ...
    //  ...
    return this;
    // ...
    retrun this.constructor( context ).find( selector );
    // ...
    return ( context || rootjQuery ).find( selector );
    // ...
    return typeof rootjQuery.ready !== "undefined" ?
                rootjQuery.ready( selector ) :
                // Execute immediately if ready is not present
                selector( jQuery );
    // ...
    return jQuery.makeArray( selector, this );

}

// Give the init function the jQuery prototype for later instantiation
init.prototype = jQuery.fn;

  在这个方法里有很多种返回.

    第一种 this, 返回的是init的对象;

    第二种 jquery对象.find(); -> /src/traversing/findFilter.js : find -> return this.pushStack -> return jQuery.merge( this.constructor(), elems ); -> jQuery对象

    第三种 selector(jQuery); 不一定返回jQuery对象

    第四种 rootjQuery.ready( selector ); -> /src/core/ready.js : ready -> return this(rootjQuery) -> jQuery对象

    第五种 jQuery.makeArray( selector, this ); -> var ret = results; return ret; -> jQuery对象

  通过上述观察, 发现jQuery方法只有一种情况下返回的不是jQuery对象: 传入的selector参数为对象, 并且没有加载 /src/core/ready.js 模块. 下面这段代码也会证明这种情况(代码会在附件中, 请及时更新).

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>core</title>
    </head>

    <body>
        <script src="require.js" data-main="main" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            require([‘../src/core/init‘], function(init) {
                var ret = new init(function() {
                    return {
                        name: "not jquery"
                    };
                });
                console.log(ret);
            })
        </script>
    </body>

</html>

  再来看第一种情况, return this返回的是init对象, 并不是jQuery对象, 但是我们在下面看到 init.prototype = jQuery.fn; 所以通过init创建的对象也就是jQuery对象.

jQuery实现伪数组

  我们在用jQuery的过程中很多情况下会把jQuery当做数组去用. 但是我们从上面创建过程来看, jQuery貌似跟数组并没有什么关系. 那么我们来分析一下他的原型看看为什么jQuery可以像数组一样使用.

  在这之前我先介绍一下"鸭子类型(duck typing)" ( q君: 鸭子? 好吃吗? ), 什么是鸭子类型? “当看到一只鸟走起来像鸭子、游泳起来像鸭子、叫起来也像鸭子,那么这只鸟就可以被称为鸭子。” 这是一个非常恰当的描述, 在动态语言中我们不需要管一个对象到底是什么类型, 只要他能执行某个方法, 那么我就可以认为他就是某个类型的对象.

  Javascript就是这样的一种语言. 要实现数组不一定要继承或者使用Array对象. 只要实现了Array对象里面的方法, 就可以认为他是数组. 这里我也发现一个很有趣的事情. 用chrome浏览器进行调试的时候, 我们用console.log输出普通对象和数组的时候输出的格式不一样. 输出对象类似于 " f {length: 0} " , 输出数组类似于 " [1] ". 我们通过下面几行代码做个试验

var f = function(){this.length = 1; this[0] = "a" }
console.log(new f());   //  f {0: "a", length: 1}
var f = function(){this.length = 1;this.splice = function(){};this[0] = "a" }
console.log(new f());   //  ["a"]

  哈, 多么神奇! chrome把他当成数组了! 如果一个对象中length为数字, splice为方法, 这个对象就会被chrome认为是数组. 大家感兴趣的话可以试一下其他的浏览器.

  嗯, 我们回过头看jQuery的prototype, jQuery的prototype中包含了数组中常用的 length属性, push , sort , splice , slice等方法.

  所有jQuery就像一个数组一样使用.

使用建议

  1. 尽量减少重复使用 $()方法获取相同的对象

  2. $() 大部分会返回jQuery对象, 但不排除在极端情况

  3. jQuery可以当做数组使用, 但不完全是数组, pop, shift 等方法不适用于jQuery对象.

附件

  http://yunpan.cn/Q7nKEsZ9cqFby  提取码 3a4a

时间: 2024-10-11 12:08:36

jQuery 源码分析和使用心得 - core.js的相关文章

jQuery 源码分析和使用心得 - 关于源码

说到jQuery, 大家可能直觉的认为jQuery的源码应该就是一个jquery.xx.js这样的一个文件. 但是看到真正的源码的时候, 整个人都思密达了.jQuery的源码做的事远比你想象的多, 为了保证代码的可维护性, 健壮性, 通用性等等, jQuery将各个功能模块独立成单个的js文件, 并通过依赖管理管理模块之间的依赖关系, 在构建的时候通过这种依赖关系将各个模块合并成一个js文件, 最后经过压缩混淆等步骤才会产生我们经常用的jquery.xx.min.js文件( q君:上来就说这些恶

jQuery 源码分析和使用心得 - 序

众所周知, jQuery (个人简称为jq) 在前端开发中占有着非常重要的地位, 可以说jQuery的存在大大降低了学习网页设计和交互的门槛, 他的简单的语法和顺畅的使用逻辑激发了人们强烈的学习兴趣, 甚至出现了"jq狗"一类只会jQuery而不会传统dom的存在. 所以, 我也很想来伸一脚, 搅一搅这块已经快烂了的浑水. 不过, jQuery虽简单, 但是怎么把jQuery用好, 用的恰当, 还是需要一点点时间来学习和总结经验的. 所以呢, 我就希望可以通过对jQuery源码的分析,

jQuery 源码分析和使用心得 - 文档遍历 ( traversing.js )

jQuery之所以这么好用, 首先一点就是$()方法和它强大的选择器. 其中选择器使用的是sizzle引擎, sizzle是jQuery的子项目, 提供高效的选择器查询. 有个好消息告诉大家, 就是sizzle可以独立使用, 如果你觉得jQuery太大但又非常喜欢它的选择器, 那不妨可以用sizzle. 感兴趣的话可以到官方网站了解. 本系列内部不准备解析sizzle的源码, 一是sizzle内容相对独立, 二是内容主要涉及算法, 与整体的代码设计关系不大, 三嘛, 我的实力有限, 遇到算法就退

jQuery源码分析1

写在开头: 昨天开始,我决定要认真的看看jQuery的源码,选择1.7.2,源于公司用的这个版本.由于源码比较长,这将会是一个比较持久的过程,我将要利用业余时间,和偶尔上班不算忙的时间来进行.其实原本是打算对着源码抄一遍,将对其的理解写成注释,这也算是在强行堆代码量了吧(我想我这是有多懒,必须要反省).不过鉴于自己平时比较懒惰的可耻行径,和太多的东西都写在一起有点庞大,我想我还是有必要写成一个专栏,来记录这个过程.其实最根本的原因是:源码里都是有注释的,而且注释写得那么详尽,翻译过来就是了,但是

jQuery源码分析系列(39) : 动画队列

data函数在jQuery中只有短短的300行代码,非常不起点 ,剖析源码的时候你会发现jQuery只要在有需要保存数据的地方无时无刻不依赖这个基础设施 动画会调用队列,队列会调用data数据接口还保存队列里面的的动画数据 所以我们在自习回顾下关于数据缓存 //These may be used throughout the jQuery core codebase //存数据的 //用户使用 data_user = new Data(); //存储对象 //jQuery内部私有 //用来存事件

[转] jQuery源码分析-如何做jQuery源码分析

jQuery源码分析系列(持续更新) jQuery的源码有些晦涩难懂,本文分享一些我看源码的方法,每一个模块我基本按照这样的顺序去学习. 当我读到难度的书或者源码时,会和<如何阅读一本书>结合起来进行学习.推荐读读这本书,你可以从这里和这里下载. 第一部分:检视阅读 1. 收集参考资料:官方文档.书籍.百度/谷歌,专题/博客等,快速的浏览,对涉及的知识点.范围.深度.是否有参考意义等有大致的了解和判断,知道这些文章的作者想要解释或解决什么问题. 第二部分:分析阅读 2. 细读官方文档,官方有非

jQuery源码分析系列(33) : AJAX中的前置过滤器和请求分发器

jQuery1.5以后,AJAX模块提供了三个新的方法用于管理.扩展AJAX请求,分别是: 1.前置过滤器 jQuery. ajaxPrefilter 2.请求分发器 jQuery. ajaxTransport, 3.类型转换器 ajaxConvert 源码结构: jQuery.extend({ /** * 前置过滤器 * @type {[type]} */ ajaxPrefilter: addToPrefiltersOrTransports(prefilters), /** * 请求分发器 *

Jquery源码分析

1.概述 jQuery是一个非常优秀的Js库,与prototype,YUI,Mootools等众多的Js类库相比,它剑走偏锋,从web开发最实用的角度出发,抛除了一些中看但不实用的东西,为开发者提供一个短小精悍的类库.由于其个短小精悍,使用简单方便,性能相对高效.众多的开发者都选择Jquery来进行辅助的web开发. 在使用jquery时开发,我们也会时常碰到许多的问题,但是jquery的代码很晦涩,难起看懂,当开发时出现了问题,看不懂源码,不知道如何去排错. John Resig,Jquery

jquery源码分析(二)——结构

再来复习下整体架构: jQuery源码分析(基于 jQuery 1.11 版本,共计8829行源码) (21,94)                定义了一些变量和函数jQuery=function(){} (96,280)        给jQuery添加一些方法和属性,jQuery.fn=jQuery.prototype(285,347)        extend:        jQuery的一些继承方法        更容易进行后续的扩展