开发学院网页设计JavaScript Jquery源码分析---expand (扩展) 阅读

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

 2010-09-14 13:38:59 来源:WEB开发网   
核心提示:9jquery的架构9.1、架构概述前面二篇就jquery 的源码进行了逐一进行了分析,那么我们现在站在一定的高度来分析或看看jquery的源码,Jquery源码分析---expand (扩展),Jquery的源码不同于prototype,mootools,它们是同一个方法,jQuery.extend = jQuer

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;
};

1 2  下一页

Tags:Jquery 源码 分析

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
更多精彩
    赞助商链接

    热点阅读
      焦点图片
        最新推荐
          精彩阅读