您的位置:首页 > Web前端 > JQuery

jQuery.js执行过程分析

2006-11-22 15:19 441 查看
  JavaScript是一门基于对象的语言,而它的对象技术的实现又和其他语言有着很大的差异,在JavaScript中,一个类的定义一般采用下面这种模式(我所看到的):

// 定义一个构造函数;
testClass(param1, param2) {
  this.attr1 = param1;
  this.attr2 = param2;
  ...
}

// 在prototype对象上扩展,加上相应的方法;
testClass.prototype = {
  Method1: function() {...},
  Method2: function() {...},
  ...
}

// 定义一个实例;
var test = new testClass();

  在jQuery.js中,同样也是这种模式,只不过它要复杂很多,而且它还定义了一个jQuery.extend()的静态方法来扩展类的功能,jQuery.js代码执行过程完整分析如下:

// 防止多次载入而进行jQuery对象的判断;
if ( typeof window.jQuery == "undefined" ) {
  window.undefined = window.undefined;

  // jQuery的构造函数;
  var jQuery = function( a, c ) { ... };

  // jQuery的命名空间$;
  if ( typeof $ != "undefined" ) jQuery._$ = $;
  var $ = jQuery;

  // 给jQuery的prototype增加一些基础方法和属性;
  // 其中有些方法是调用下面的扩展方法实现的;
  // 注意下面的jQuery.fn = jQuery.prototype;
  jQuery.fn = jQuery.prototype = {
    each: function( fn, args ) { ... },
    find: function( t ) { ... },
    ...
  };

  // jQuery实现继承的方法;
  jQuery.extend = jQuery.fn.extend = function( obj, prop ) {...};

  // 实现一些基础的函数,有大部分是上面调用;
  jQuery.extend({
    init: function() { ... },
    each: function( obj, fn, args ) { ... },
    find: function( t, context ) { ... },
    ...
  });

  // 浏览器版本的检测;
  new function() {
    jQuery.browser = { safari:..., opera:..., msie:..., mozilla:... };
    ...
  };

  // jQuery.macros扩展,主要用于jQuery.init(),进行jQuery的初始化;
  jQuery.macros = {
    filter: [ ... ],
    attr: { ... },
    each: { ... },
    ...
  };

  // jQuery初始化;
  jQuery.init();

  // 实现jQuery的重要方法ready();
  jQuery.fn.extend({
    ready: function( f ) { ... }
    ...
  };

  // 上面ready()方法的具体实现;
  jQuery.extend({
    ready: function() { ... },
    ...
  };

  // 对浏览器某些事件进行绑定和解绑定;
  new function() {
    ...
    jQuery.event.add( window, "load", jQuer
a221
y.ready );
  };

  // 当IE浏览器关闭时,清除上面绑定的事件,防止内存泄漏;
  if ( jQuery.browser.msie ) jQuery(window).unload( ... );

  // 实现一些浏览器效果;
  jQuery.fn.extend({
    show: function( speed, callback ) { ... },
    hide: function( speed, callback ) { ... },
    ...
  };

  // 上面的一些函数具体实现;
  jQuery.extend( {...} );

  // 以下都是Ajax的实现,这里声明原型,具体实现调用下面的函数;
  jQuery.fn.extend({
    loadIfModified: function(url, params, callback ) { ... },
    ...
  };

  // 针对IE浏览器创建不同的XMLHttpRequest对象;
  if (jQuery.browser.msie && typeof XMLHttpRequest == "undefined") { ... };

  // Ajax函数的绑定;
  new function() {
    var e = "ajaxStart,ajaxStop,ajaxComplete,ajaxError,ajaxSuccess".split(",");
    ...
  };

  // Ajax函数的具体实现;
  jQuery.extend({
    get: function( url, data, callback, type, ifModified ) { ... },
    post: function( url, data, callback, type ) { ... },
    ajax: function( type, url, data, ret, ifModified ) { ... },
    ...
  }
}

  整个执行过程分析完毕,这些都是我自己的分析,肯定存在错误,希望大家指出,好共同进步,接下来需要分析一些重要函数了,要深入代码丛林了!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息