`
黄继华
  • 浏览: 44981 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

jQuery解密之----执行过程分析

 
阅读更多

javaScript 是一门基于对象的语言,然而它的对象技术的实现与其他的语言有很大的差异。

在javaScript中,定义一个类的一般采用以下这种模式:

//定义一个构造函数
testClass(param1,param2){
    this.att1=param1;
    this.att2=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", jQuery.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 ) { ... },
     ...
   }
}
分享到:
评论

相关推荐

    jquery-ui-1.8.16

    jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-...

    jquery插件jquery-ui-1.8.2.custom.min.js

    《jQuery UI与jQuery插件深度解析——以jquery-ui-1.8.2.custom.min.js为例》 在Web开发领域,jQuery库以其简洁易用的API和强大的功能深受开发者喜爱。而jQuery UI作为jQuery的一个扩展,提供了丰富的用户界面组件...

    jquery-migrate-1.2.1.js文件

    总之,`jquery-migrate-1.2.1.js` 文件是jQuery生态系统中一个非常实用的工具,它帮助开发者解决版本升级带来的兼容性问题,使得向新版本的迁移过程更加平滑。了解其工作原理和使用方法,对于维护和更新基于jQuery的...

    jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css

    这个压缩包包含两个关键文件:`jquery-ui-1.8.16.custom.min.js` 和 `jquery-ui-1.8.16.custom.css`,这些都是jQuery UI的特定版本,即1.8.16。这个版本在当时是一个广泛使用的稳定版本,提供了丰富的功能和组件。 ...

    jquery插件jquery-ui-1.8.18.custom.min.js及css文件

    在本篇文章中,我们将深入探讨其自定义版本 `jquery-ui-1.8.18.custom.min.js` 和相关的 CSS 文件,以理解它们如何协同工作,为网页带来强大的功能和美观的界面。 首先,`jquery-ui-1.8.18.custom.min.js` 是 ...

    jquery.editable-select

    `jquery.editable-select` 就是建立在 jQuery 之上,因此在使用前需要确保页面中已经引入了 jQuery。 2. **选择器的增强**:在默认情况下,HTML `<select>` 元素的功能相对有限。`jquery.editable-select` 提供了一...

    jquery-ui-datepicker中文版

    jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ ...

    jquery.datepicker-zh-CN.js

    <script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"> $( "#...

    jquery-ui-1.10.2.custom

    在这个主题中,我们将深入探讨的是 `jquery-ui-1.10.2.custom` 版本,这是一个定制化的版本,包含了对 jQuery 1.9.1 的支持。 首先,让我们从 `jquery-ui-1.10.2.custom` 的核心组件开始。这个版本提供了包括但不...

    jquery-easyui-EDT-1.5.2-build1

    jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1

    jquery-1.6.4-vsdoc.js

    压缩包内包含jquery-1.6.4.js jquery-1.6.4.min.js jquery-1.6.4-vsdoc.js 。 【推荐用法】 1、将jquery-1.6.4-vsdoc.js与jquery-1.6.4.js放在同一目录,然后在vs中添加对jquery-1.6.4.js的引用即可; 2、切记:...

    jQuery版本迁移辅助插件jquery-migrate-1.2.1.min.js

    jQuery版本迁移辅助插件,如果您使用的低版本jQuery改为高版本后出现错误,可以试试这个插件。用来检测和恢复在jQuery1.9版本中已删除或已过时的API。jquery-migrate-1.2.1.js,jquery-migrate-1.2.1.min.js

    jquery-ui-1.11.2日期控件datepicker

    ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.css" > ${ctx}/plugins/jquery-ui-1.11.2/external/jquery/jquery.js"> ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.js"> ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui-...

    jquery-migrate-3.0.0.zip

    `jquery-migrate-3.0.0.js` 文件是源码形式,包含了完整的日志记录和修复功能,开发者可以在开发过程中使用,以便更好地理解哪些部分的代码需要进行调整。而`jquery-migrate-3.0.0.min.js` 文件则是经过minify处理的...

    jquery.ba-resize.min

    《jQuery的resize()事件与jquery.ba-resize.min.js插件详解》 在Web开发中,JavaScript库jQuery大大简化了DOM操作,包括事件处理。其中,`resize()`事件用于监听窗口或元素尺寸的变化,但直接使用`$(window).resize...

    jquery-ui-1.10.3.min.js

    jquery-ui-1.10.3.min.js

    jquery-resizable-columns

    "jquery-resizable-columns"正是这样一个jQuery插件,它允许用户通过鼠标拖动来改变表格列宽,从而满足不同场景下的数据查看需求。 一、jQuery可拖动列宽插件介绍 "jquery-resizable-columns"是基于jQuery的一个轻...

    jquery-migrate-1.2.1.min.js

    jquery-migrate-1.2.1.min.js 在网上下载一些 js 插件使用的时候,经常出现这种情况。但是更换低版本 jquery,比如 使用 1.7 版本的 jquery 却不会报错,能正常使用。 经过一番搜索,发现是因为高版本(1.9版本以后)...

    jquery-ui-1.9.2.custom.min.js

    在我们讨论的文件 "jquery-ui-1.9.2.custom.min.js" 中,我们可以看到这是该库的一个特定版本——1.9.2的自定义最小化版本。这个文件的核心在于“定制”和“最小化”,这两个特点使得它在实际项目中更具灵活性和效率...

    jquery-migrate-3.0.1.js jar包

    <script src="path/to/jquery-migrate-3.0.1.js"> ``` 这里的`path/to`应该替换为实际的文件路径。 **四、迁移策略** 使用jQuery Migrate并不是长久之计,它只是一种过渡手段。开发者应根据控制台的警告信息,...

Global site tag (gtag.js) - Google Analytics