JQUERY脚本执行过程详解 JS执行顺序步骤

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

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

原文：https://www.lisa33xiaoq.net/1350.html