• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

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

JavaScript web前端中文站 1年前 (2018-09-08) 669次浏览 已收录 0个评论

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

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

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

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 我走过的坑 技术积累记录之下篇


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:jQuery 脚本执行过程详解 js 执行顺序步骤
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址