不废话,直接上关键。这个系列中有好些直接借用别人的资料,我将他们整合在自认为比较合理的地方。所以在此先谢谢那些前辈。

注意:后续系列中jQuery实例多用$(...)来表示

1.    初始化与链式调用基础


jQuery之所以能够链式调用在于每次调用返回来jQuery本身。实现关键代码如下。

jQuery = function(selector,context){
return new jQuery.fn.init(selector,context,rootjQuery);
}
...
rootjQuery = jQuery(document);
...
jQuery.fn = jQuery.prototype = {
  constructor: jQuery,
  init: function(selector,context,rootjQuery){
    ...
    return this;
    ...
}
}
...
jQuery.fn.init.prototype = jQuery.fn;
...
window.jQuery = window.$ = jQuery;

需要有几个理解

a.    new的深度理解


var obj = new Base();

这样代码的结果是什么,我们在Javascript引擎中看到的对象模型是:

new操作符具体干了什么呢?其实很简单,就干了三件事情。

var obj = {};

obj.__proto__ = Base.prototype;

Base.call(obj);

第一行,我们创建了一个空对象obj;

第二行,我们将这个空对象的__proto__成员指向了Base函数对象prototype成员对象;

第三行,我们将Base函数对象的this指针替换成obj,然后再调用Base函数,于是我们就给obj对象赋值了一个id(name,根据浏览器决定,chrome是name属性)成员变量,这个成员变量的值是”Base”。

Base函数返回的结果会导致obj的结果不同。

举例(chrome下):

function Base(){
this.name = “test”;
this.a = “f”;
return result;
}

1)     根据new的原理,如果没有返回值或返回值为数字或字符串或布尔类型,即result为null/number/string/bool,则new Base()返回的结果是本身,为

Base {name: "test", a: "f"}

2)     如果返回值为对象(数组或普通对象)或函数,则返回的对象或函数替换了Base本身;

拓展:

new Base() == Base () 返回的结果为false

例如当result为[]的时候,new Base()返回结果和Base()返回结果的都是[],但实际上他们并不相等 , Javascript  对于 Object 和 Function 的比较是基于引用的.

Var m = [],t = []; m == t;//false,并不是同一个引用

Var m = t = []; m == t;//true

b.    jQuery中jQuery.fn为什么表现为数组


jQuery将对象模拟成了数组,而如何让一个对象模拟成数组,jQuery给对象加上了以下几个属性:

{
length: 0,
push: [].push,
sort: [].sort,
splice: [].splice
},

不同的是chrome在给对象添加了length和splice后真的转化成了数组,如$()结果是[],而ie没有转化$()结果是{}。但是无所谓,他们都可以使用length等属性,不影响后续使用。如果$(…)有搜索结果,jQuery会把结果拼接成数组返回,这样jQuery的返回结果看起来总是数组。

总结


  由上面的分析可知jQuery.fn.init.prototype = jQuery.fn目的就是将jQuery.fn上的所有属性都挂在jQuery实例$(...)上,使得实例拥有很多jQuery.fn上定义的函数。比如jQuery.fn.extend函数,实例就可以直接使用:$(...).extend({"name": "chua"})。

  由于每次都是一个新的实例new jQuery.fn.init(selector,context,rootjQuery),所以各个实例是独立的。而jQuery全局的属性直接挂在jQuery上,比如jQuery.extend,这个和jQuery.fn.extend不一样了,因为jQuery.extend是全局的,比如jQuery.extend({"test": "chua"})你可以随时通过jQuery.test就把值给取出来了,而jQuery实例则需要保证同一个实例的情况下才能取到值。比如var ps = $("p").extend({"test": "chua"}),通过ps.test能够取到值,但是你使用$("p").test是取不到的。因为你使用$(...)又新建了一个实例。

  至于jQuery的链式调用很好理解,源码初始化的时候返回了jQuery对象本身:

init: function(selector,context,rootjQuery){
  ...
  return this;
}

  这一节先到这里,待续……

  如果觉得本文不错,请点击右下方【推荐】!

jQuery-1.9.1源码分析系列(一)整体架构的更多相关文章

  1. Bootstrap源码分析系列之整体架构

    作为一名合格的前端工程师,你肯定听说过Bootstarp框架.确实可以说Bootstrap框架是最流行的前端框架之一.可是也有人说Bootstrap是给后端和前端小白用的,我认为只要学习它能给我们前端 ...

  2. 【Seajs源码分析】1. 整体架构

    seajs是一个非常流行的模块开发引擎,目前项目中使用比较多,为了深入了解已经改进seajs我阅读了他的源码,希望对自己的代码生涯能有所启发. 本文说介绍的是指seajs2.3.3版本. 首先seaj ...

  3. jQuery源码分析系列

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...

  4. [转]jQuery源码分析系列

    文章转自:jQuery源码分析系列-Aaron 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAaro ...

  5. jQuery源码分析系列(转载来源Aaron.)

    声明:非本文原创文章,转载来源原文链接Aaron. 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAa ...

  6. jQuery源码分析系列——来自Aaron

    jQuery源码分析系列——来自Aaron 转载地址:http://www.cnblogs.com/aaronjs/p/3279314.html 版本截止到2013.8.24 jQuery官方发布最新 ...

  7. jquery2源码分析系列

    学习jquery的源码对于提高前端的能力很有帮助,下面的系列是我在网上看到的对jquery2的源码的分析.等有时间了好好研究下.我们知道jquery2开始就不支持IE6-8了,从jquery2的源码中 ...

  8. ABP源码分析一:整体项目结构及目录

    ABP是一套非常优秀的web应用程序架构,适合用来搭建集中式架构的web应用程序. 整个Abp的Infrastructure是以Abp这个package为核心模块(core)+15个模块(module ...

  9. jQuery-1.9.1源码分析系列完毕目录整理

    jQuery 1.9.1源码分析已经完毕.目录如下 jQuery-1.9.1源码分析系列(一)整体架构 jQuery-1.9.1源码分析系列(一)整体架构续 jQuery-1.9.1源码分析系列(二) ...

  10. MyCat源码分析系列之——结果合并

    更多MyCat源码分析,请戳MyCat源码分析系列 结果合并 在SQL下发流程和前后端验证流程中介绍过,通过用户验证的后端连接绑定的NIOHandler是MySQLConnectionHandler实 ...

随机推荐

  1. SageCRM 快速获取连接中的SID的方法

    经常需要使用ajax来修改页面的功能,包括联动.动态加载等. SageCRM的页面必须有SID的,所以要方便的获取它. var getKey = function(key,Url) { if(argu ...

  2. OS中atomic的实现解析

    OS中atomic的实现解析 转自:http://my.oschina.net/majiage/blog/267409    摘要 atomic属性线程安全,会增加一定开销,但有些时候必须自定义ato ...

  3. AFNetWorking

    目录: 1.为什么要用AFNetworking 2.AFNetworking的用法 一.为什么要用AFNetworking 在ios开发中,一般情况下,简单的向某个web站点简单的页面提交请求并获取服 ...

  4. The Myths about Transactions (ACID) and NoSQL

    There has been widespread characterization of one of the major distinctions between NoSQL and tradit ...

  5. Linux环境下部署完JDK后运行一个简单的Java程序

    前言 前一篇文章详细讲解了如何在Windows环境下安装虚拟机+Linux系统,并且成功部署了JDK. 不过部署完JDK之后,我们判断部署是否成功的依据是看"java -version&qu ...

  6. [nRF51822] 15、穿戴式设备上电量检测装置的设计及细节技术点(偏专业硬件文章)

    穿戴式 设备如智能手环.智能手表一般采用几百毫安时的锂离子电池来供电.因此,与之配套的充电电路.稳压电路和电池电量检测电路便必不可少!本文主要谈谈该类消费类电子内部电池电量检测的一般方法及其优缺点. ...

  7. CLR via C# 学习计划

    本书是学习c#的人必读书,计划今年完成,读透. 书是在亚马逊买的,虽然有点小贵,但是为了情怀,咬咬牙买了. 需要学习的: CLR基础 (CH1-CH3) 设计类型 (CH4-CH13) 基本类型 (C ...

  8. Mongodb 学习笔记

    Mongo DB NoSql简介 MongoDB简介 在Windows平台下安装Mongo Mongo DB官方文档 MongoDB基本命令 MongoDB的默认安装路径为 C:\Program Fi ...

  9. TODO:Golang UDP连接简单测试慎用Deadline

    TODO:Golang UDP连接简单测试慎用Deadline UDP 是User Datagram Protocol的简称, 中文名是用户数据报协议,是OSI(Open System Interco ...

  10. Atitit 深入理解耦合Coupling的原理与attilax总结

    Atitit 深入理解耦合Coupling的原理与attilax总结     耦合是指两个或两个以上的电路元件或电网络等的输入与输出之间存在紧密配合与相互影响,并通过相互作用从一侧向另一侧传输能量的现 ...