jQuery脚本执行过程详解 js执行顺序步骤

关于前端的一门语言—JavaScript,百度百科有这么一段话描述定义:JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

更多精彩内容请看web前端中文站
www.lisa33xiaoq.net 可按Ctrl + D 进行收藏

JavaScript作为一门基于对象的语言,它的对象技术的实现又较具独特性。下面我们来详细讲解下jQuery.js脚本执行的过程,剖析其中的原理和实现。

定义构造函数

jQuery中,定义构造函数通过以下表达方法表示:

testClass(param1,param2){
this.attr1=param1;
this.attr2=param2;
...
}

prototype对象扩展

testClass.prototype={
Method1:function(){...},
Method2:function(){...},
...
}

定义实例

var test = new testClass();

jQuery代码执行过程

在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){...},
...
}
}

至此,整个执行过程结束。其中有不少重要的函数,大家可以各抒己见,一起探讨分享!

有关JavaScript的一些经验分享,大家可以去看看,可以少走很多弯路《JAVASCRIPT我走过的坑 技术积累记录之上篇》和《JAVASCRIPT我走过的坑 技术积累记录之下篇

2
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到