Jquery源码分析---expand(扩展)

9 jquery的架构

9.1、架构概述

前面二篇就jquery 的源码进 行了逐一进行了分析。那么我们现在站在一定的高度来分析或看看jquery的源码 。

Jquery的源码不同于prototype,mootools,它们对 Array,String,Event,Hash都进行了大量的扩展,然后才对element,form之类的 dom元素提供了方便及兼容的操作。

Jqueryr 源码也不同于YUI,采用组 件的方式按照java面向对象的中规中律地去构建类库,向用户提供方便地操作。

Jquery仅仅是一个对象,类数组的对象。它没有对js的原始对象进行扩 展。它没有分层分级去形成这样那样的继承方式(Ext中是这样)。它仅仅是把 它认为自己所需要的操作都融合在jquery的对象中。为了代码的简洁,它采用方 法链编程的风格(起源起hibernate)。

从代码的角度来看,jquery的代 码分成两部分,一部分是实例方法,也就是最常的那一组,通过$()来构建的实 例。第二部分是静态方法。通过jQuery的命名空间变量来访问。如jQuery.attr ()。它一般都在在静态方法中完成具体的任务。之后如果实例方法需要就使用它 来代理。

9.2、extend

有人批评(好像是fins)prototype,说它 是一个extend支撑半边天。对于Jquery而言,也是一个extend支持了一边天。 Jquery提供了extend对jquery进行扩展。jQuery.fn.extend是对jquery对象进行 扩展。jQuery.extend是对jquery的静态方法进行扩展。它们是同一个方法。

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

  var target = arguments[0] || {}, // 第一个参数是目标
  i = 1, length = arguments.length, deep = false, options;

   if (target.constructor == Boolean) {// 第一个参数是bool型的
     deep = target;// 深度copy
    target = arguments[1] || {};// target指向第二个参数
    i = 2;
  }

   // target 是string 型的或?
  if (typeof target != "object" && typeof target != "function")
    target = {};

  if (length == i) {// 只有一个 参数?或deep copy 时,两个参数
    target = this;// 目标为 this
    --i;
  }

  for (;i < length; i++)
    if ((options = arguments[i]) != null)

       for (var name in options) {
       var src = target[name], copy = options[name];
       if (target === copy)// 防止死循环
         continue;
        // 深度copy处理,最深为元素
       if (deep && copy && typeof copy == "object" && ! copy.nodeType)
         target[name] = jQuery.extend (deep, src
             || (copy.length != null ? [] : {}), copy);
       else if (copy !== undefined)// 直接 copy
         target[name] = copy;

      }

  return target;
};

Jquery.extend怎么 说也比prototype1.4的extend强。它不但支持深度clone,还能支持多个参数的 对象clone到一个指定对象,而不是jquery中。比起Ext的继承,觉得在jquery中 这样的继承足够用了。

时间: 2024-09-27 13:12:10

Jquery源码分析---expand(扩展)的相关文章

jQuery源码分析-03构造jQuery对象-工具函数_jquery

作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 读读写写,不对的地方请告诉我,多多交流共同进步,本章的的PDF等本章写完了发布. jQuery源码分析系列的目录请查看 http://nuysoft.iteye.com/blog/1177451,想系统的好好写写,目前还是从我感兴趣的部分开始,如果大家有对哪个模块感兴趣的,建议优先分析的,可以告诉我,一起学习. 3.4 其他静态工具函数

jQuery源码分析之jQuery.fn.each与jQuery.each用法_jquery

本文实例讲述了jQuery源码分析之jQuery.fn.each与jQuery.each用法.分享给大家供大家参考.具体分析如下: 先上例子,下面代码的作用是:对每个选中的div元素,都给它们添加一个red类 复制代码 代码如下: $('div').each(function(index, elem){       $(this).addClass('red'); } }); 上面用的的.each,即jQuery.fn.each,其内部是通过jQuery.each实现的 复制代码 代码如下: j

Jquery源码分析---导言

jQuery是一个非常优秀的JS库,与Prototype,YUI,Mootools等众多的Js类库 相比,它剑走偏锋,从web开发的实用角度出发,抛除了其它Lib中一些中看但不 实用的东西,为开发者提供了优美短小而精悍的类库.其使用简单,文档丰富, 而且性能高效,能极大地提高web系统的开发效率.因此可以说是web应用开发中 最佳的Js辅助类库之一.大部分开发者正在抛弃Prototype,而选择Jquery做为 他们进行web开发的JS库. 如是开发人员仅仅只知道文档中的简单的使用 方法,却不明

Jquery源码分析---概述

jQuery是一个非常优秀的JS库,与Prototype,YUI,Mootools等众多的Js类库 相比,它剑走偏锋,从web开发实用的角度出发,抛除了其它Lib中一些不实用的 东西,为开发者提供了短小精悍的类库.其短小精悍,使用简单方便,性能高效 ,能极大地提高开发效率,是开发web应用的最佳的辅助工具之一.因此大部分 开发者在抛弃Prototype而选择Jquery来进行web开发. 一些开发人员在使用jquery时,由于仅仅只知道Jquery文档中的使用方法, 不明白Jquery的运行原理

jQuery源码分析之jQuery中的循环技巧详解_jquery

jQuery的源码中有很多值得学习借鉴的技巧,本文即收集了jQuery中出现的各种遍历技巧和场景.具体分析如下: // 简单的for-in(事件) for ( type in events ) { } // 缓存length属性,避免每次都去查找length属性,稍微提升遍历速度 // 但是如果遍历HTMLCollection时,性能提升非常明显,因为每次访问HTMLCollection的属性,HTMLCollection都会内部匹配一次所有的节点 for ( var j = 0, l = ha

jQuery源码分析-01总体架构分析_jquery

1. 总体架构 1.1 自调用匿名函数 self-invoking anonymous function 打开jQuery源码,首先你会看到这样的代码结构: 复制代码 代码如下: (function( window, undefined ) { // jquery code })(window); 1. 这是一个自调用匿名函数.什么东东呢?在第一个括号内,创建一个匿名函数:第二个括号,立即执行 2. 为什么要创建这样一个"自调用匿名函数"呢? 通过定义一个匿名函数,创建了一个"

jQuery 源码分析 CSS 操作原理

jquery.fn.css获取当前jQuery所匹配的元素中第一个元素的属性值[$(-).css(cssName),注意这个cssName可以是数组]或给当前jQuery所匹配的每个元素设置样式值[$(-).css(cssname,value) / $(-).css(obj)]; 可以看见函数内部直接调用了jquery.access来处理.access将当前多个元素组成的jQuery对象所匹配的元素分解成单一元素逐个调用第二个参数中的回调function( elem, name, value )

jQuery源码分析之Callbacks详解

 这篇文章主要分为以下知识:什么是Callbacks.Callbacks模型.基本模块实现.once和auto(memory).源码和源码下载,十分的细致全面,这里推荐给大家,有需要的小伙伴参考下吧.     代码的本质突出顺序.有序这一概念,尤其在javascript--毕竟javascript是单线程引擎. javascript拥有函数式编程的特性,而又因为javascript单线程引擎,我们的函数总是需要有序的执行.优秀代码常常 把函数切割成各自的模块,然后在某一特定条件下执行,既然这些函

Jquery源码分析---jQuery类数组的分析

4.1.类数组构建 从上节可以看出jquery构建函数完成了查找或转换 或其它的功能,其结果就是查找到元素.Dom树查找,html转换成Dom元素,还是 直接传入Dom元素都不过是方式而已.找到这些元素就得找个地方去存储起来. 存储有序数据的地方(集合)在JS中最好的当然是数组.那么又如何在 jQuery内面实现数组呢?可以采用如下的方式: jQuery.fn.prototype=new Array(); 在上一节中 的this.setArray(arr)函数中加上 Array.apply (t