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 ) { ... },
...
}
}
整个执行过程分析完毕,这些都是我自己的分析,肯定存在错误,希望大家指出,好共同进步,接下来需要分析一些重要函数了,要深入代码丛林了!
// 定义一个构造函数;
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 ) { ... },
...
}
}
整个执行过程分析完毕,这些都是我自己的分析,肯定存在错误,希望大家指出,好共同进步,接下来需要分析一些重要函数了,要深入代码丛林了!
相关文章推荐
- jQuery解密之----执行过程分析
- jQuery解密之----执行过程分析
- [转]jQuery源码解读---执行过程分析
- js预编译解析执行过程分析
- iOS学习笔记28-JS执行过程分析
- 对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析
- C C++ Java C# JS编译、执行过程的原理入门分析
- 纯js的ajax readyState不返回4,jquery的$.ajax执行error,status200且数据可显示
- 分析MapReduce执行过程
- 面向对象编程(三)——程序执行过程中内存分析
- Java程序执行过程分析(堆栈)
- 反编译C程序为汇编代码,汇编代码执行过程的分析与思考
- jquery插件--ajaxfileupload.js上传文件原理分析
- jQuery滚动插件scrollable.js用法分析
- jquery.pagination.js 分页存储过程--基于ROW_NUMBER() OVER()分页
- hadoop2提交到Yarn: Mapreduce执行过程分析2
- tiny-cnn执行过程分析(MNIST)
- 探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
- 程序执行的过程分析--【sky原创】
- C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断