jQuery-1.9.1源码分析系列(一)整体架构续

这一节主要是jQuery中最基础的几个东东

2.    jQuery的几个基础属性和函数

a. jQuery.noConflict函数详解



在jQuery初始化的时候保存了外部的$和jQuery

  _jQuery = window.jQuery,

  _$ = window.$,

noConflict函数

  noConflict: function( deep ) {

    if ( window.$ === jQuery ) {

    window.$ = _$;

    }

    if ( deep && window.jQuery === jQuery ) {

      window.jQuery = _jQuery;

    }

    return jQuery;

  }

调用noConflict将$甚至jQuery的使用权让渡出去。返回的jQuery保存为自定义的变量。如

  var myJq = $.noConflict();

然后就可以将myJq当成jQuery来使用。

  var ps = myJq("p");//得到所有p标签的元素集合。

  

b. jQuery.extend = jQuery.fn.extend函数详解



用户再使用jQuery的时候可能需要对jQuery和jQuery.prototype(jQuery.fn/jQuery(...))进行拓展(添加属性或方法),这个时候使用到extend。

  jQuery.extend = jQuery.fn.extend = function(){…}

jQuery.extend是对jQuery本身的拓展;jQuery.fn.extend是对jQuery.fn的拓展,也就是对jQuery.prototype的拓展,最终表现为对jQuery实例$(...)的拓展。

源码分析:源码比较简单,这里不做分析,不过在其中有一个技术点

在使用extend的时候要注意,根据js规则对象变量只有一份的原则,如果浅拷贝中某个属性是通过对象变量获取的值,如果在外部改变了该对象变量,那么拷贝结果也会随着改变。

eg:

  var hd = {name: ‘hard’};

  var pc = {soft: ‘soft’,hdwe:hd};

  var tt = {td: ‘test’};

  var val = $.extend(tt,pc);// {td: "test", soft: "soft", hdwe: { name: ‘hard’}}

  hd.name = ‘chenhua‘;

  //此时val的值为{td: "test", soft: "soft", hdwe: { name: ‘chenhua’ }}

c. jQuery.type函数用来识别对象类型



JavaScript也自带有一个typeof运算符,可以确定数据的类型。不过,对于绝大多数对象而言,typeof运算符都返回"object",无法区分具体的类型。jQuery.type()可以更加精确地确定JS内置对象的类型。 

  class2type = {} ,

  core_toString = class2type.toString, 

  type: function( obj ) {

if ( obj == null ) {

return String( obj );

}

return typeof obj === "object" || typeof obj === "function" ?

class2type[ core_toString.call(obj) ] || "object" :

typeof obj;

}

  

  jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
    class2type[ "[object " + name + "]" ] = name.toLowerCase();
  });

代码core_toString.call(obj)使用对象的toString来处理obj得到JS内置对象的类型,得到的结果都是类似"[object Object]"、"[object Function]"、"[object Array]"等样式,最终得到JS内置对象的类型的完全小写形式。

  

jQuery.type( undefined ); // "undefined"jQuery.type( null ); // "null"

jQuery.type( true ); // "boolean"jQuery.type( new Boolean(true) ); // "boolean"

jQuery.type( 3 ); // "number"jQuery.type( new Number(3) ); // "number"

jQuery.type( "test" ); // "string"jQuery.type( new String("test") ); // "string"

jQuery.type( function(){} ); // "function"jQuery.type( new Function() ); // "function"

jQuery.type( [] ); // "array"jQuery.type( new Array() ); // "array"

jQuery.type( new Date() ); // "date"

jQuery.type( new Error() ); // "error" // jQuery 1.9 新增支持

jQuery.type( /test/ ); // "regexp"jQuery.type( new RegExp("\\d+") ); // "regexp"

/* 除上述类型的对象外,其他对象一律返回"object" */

jQuery.type( {} ); // "object"function User() { }jQuery.type( new User() ); // "object"

d. jQuery.function和jQuery.fn.function



有的函数是直接绑定到jQuery上的,这种方法只能使用jQuery.function()来调用。而又的方法是绑定到jQuery.fn上的,这种方法一般有两种调用方式jQuery.fn.function()或是jQuery(...).function。

根据jQuery初始化函数jQuery = function(selector,context){

return new jQuery.fn.init(selector,context,rootjQuery);

}应该是易于理解的。jQuery(...)最终返回的上下文环境是jQuery.fn,所以绑定在jQuery.fn的函数最终都是可以通过jQuery(selector,context).function()来调用

时间: 2024-10-16 16:53:48

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

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

seajs是一个非常流行的模块开发引擎,目前项目中使用比较多,为了深入了解已经改进seajs我阅读了他的源码,希望对自己的代码生涯能有所启发. 本文说介绍的是指seajs2.3.3版本. 首先seajs的源编码结构如下: intro.js 闭包结构的前半部分(类似于左括号) sea.js 版本和全局变量 util-lang.js 类型语言增强 util-events.js  自定义事件 util-deps.js 依赖提取 util-path.js 路径处理 util-request.js url

[转]jQuery源码分析系列

文章转自:jQuery源码分析系列-Aaron 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAaron/jQuery 正在编写的书 - jQuery架构设计与实现 本人在慕课网的教程(完结) jQuery源码解析(架构与依赖模块) 64课时 jQuery源码解析(DOM与核心模块)64课时 jQuery源码分析目录(完结) jQuery源码分析系列(01) : 整体架构 jQuery源码分析系列(

jquery2源码分析系列目录

学习jquery的源码对于提高前端的能力很有帮助,下面的系列是我在网上看到的对jquery2的源码的分析.等有时间了好好研究下.我们知道jquery2开始就不支持IE6-8了,从jquery2的源码中可以学到很多w3c新的标准( 如html5,css3,ECMAScript).原文地址是:http://www.cnblogs.com/aaronjs/p/3279314.html 关于1.x.x版的jquery源码分析系列,本博客也转载了一个地址http://www.cnblogs.com/jav

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

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

jQuery源码分析系列(38) : 队列操作

Queue队列,如同data数据缓存与Deferred异步模型一样,都是jQuery库的内部实现的基础设施 Queue队列是animate动画依赖的基础设施,整个jQuery中队列仅供给动画使用 Queue队列 队列是一种特殊的线性表,只允许在表的前端(队头)进行删除操作(出队),在表的后端(队尾)进行插入操作(入队).队列的特点是先进先出(FIFO-first in first out),即最先插入的元素最先被删除. 为什么要引入队列? 我们知道代码的执行流有异步与同步之分,例如 var a

jQuery源码分析系列(36) : Ajax - 类型转化器

什么是类型转化器? jQuery支持不同格式的数据返回形式,比如dataType为 xml, json,jsonp,script, or html 但是浏览器的XMLHttpRequest对象对数据的响应只有 responseText与responseXML 二种 所以现在我要定义dataType为jsonp,那么所得的最终数据是一个json的键值对,所以jQuery内部就会默认帮你完成这个转化工作 jQuery为了处理这种执行后数据的转化,就引入了类型转化器,如果没有指定类型就依据响应头Con

jQuery源码分析系列(34) : Ajax - 预处理jsonp

上一章大概讲了前置过滤器和请求分发器的作用,这一章主要是具体分析每种对应的处理方式 $.ajax()调用不同类型的响应,被传递到成功处理函数之前,会经过不同种类的预处理(prefilters). 预处理的类型取决于由更加接近默认的Content-Type响应,但可以明确使用dataType选项进行设置.如果提供了dataType选项, 响应的Content-Type头信息将被忽略. 有效的数据类型是text, html, xml, json,jsonp,和 script. dataType:预期

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

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

jQuery源码分析系列(35) : Ajax - jsonp的实现与原理

ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本 json核心就是:允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了. jquery ext dojo这类库的实现手段其实大同小异 在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img.iframe.s

jQuery源码分析系列(37) : Ajax 总结

综合前面的分析,我们总结如下3大块: jQuery1.5以后,AJAX模块提供了三个新的方法用于管理.扩展AJAX请求 前置过滤器 jQuery. ajaxPrefilter 请求分发器 jQuery. ajaxTransport 类型转换器 ajaxConvert 为了整体性与扩展性考虑,把整个结构通过Deferred实现异步链式模型,Promise对象可以轻易的绑定成功.失败.进行中三种状态的回调函数,然后通过在状态码在来回调不同的函数就行了 出于同源策略考虑,存在跨域问题,所以ajax内部