JQuery原理及深入解析--转载

总体架构

 

jQuery是个出色的javascript库，最近结合它写javascript，看了下源码。

先从整体、全局的看，jQuery的源码几乎都在下面的代码中：

(function() {

//……

})();

第一个括号里面是个匿名函数，第二个括号表示马上执行第一个括号里面的代码。
首先明白，javascript里面是没有命名空间的，要保证你的javascript函数、对象与其他的不冲突，这里用了javascript的一个技巧：你的所有javascript函数、对象都在一个匿名函数里面定义，确保了所定义的函数、对象的有效范围，起到了命名空间的作用。既然作用范围在这个匿名函数中，怎么被别人使用呢?下面看它的下面代码：

var jQuery = window.jQuery = function(selector, context) {
//……
};

这里让jQuery库中最重要的对象jQuery成为了window对象的一个属性，这样就可以在其他地方像使用document(document也是window的一个属性)一样使用jQuery了。也许使用过jQuery的朋友惊讶－我没有使用jQuery对象，一直使用$的。没错，那是jQuery的同名对象：

window.$ = jQuery;

现在明白了吧。

 

 

执行过程分析

 

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", 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.js的构造函数中，充分利用了JavsScript语言的动态性——对行参的类型和个数没有的严格要求，以至于一个函数可以实现多种功能需求，也为JavaScript语言的多态性提供了基础，在这个构造函数中，提供了六种不同的调用格式（根据官方API文档），具体如下（$ = jQuery）：

　　1、$(String expr)：根据给定的CSS选择符查找匹配的元素，如$("div>p")；
　　2、$(Element elem)：将给定的DOM元素对象转换为jQuery对象，如$(document).find("div>p")；
　　3、$(Array<Element> elems)：如$(myForm.elements).hide()；
　　4、$(Function fn)：是$(document).ready()的简写模式，如：$( function fn(){ ... } )；
　　5、$(jQuery obj)：如：var div = $("div");   $(div).find("p")；
　　6、$(String expr, Element context)：在context中查找expr，如：$("div", xml.responseXML)；

　　另外，jQuery中提到了Chainable Methods的思想，也就是调用jQuery中的方法会返回一个jQuery对象，仍然可以继续调用其中的方法，这样，就形成了一个“链条”，通过“.”一个一个调用下去，这个在构造函数中有具体体现，其中有如下一条语句：

　　if( window == this ) return new jQuery( a, c );

　　这个就是为了返回一个jQuery对象，在首次调用jQuery( a, c )函数时，this是等于window的，所以每次都会创建一个jQuery对象，更详细的代码分析见下：

// jQuery的构造函数；
var jQuery = function( a, c ) {
    // $(document).ready()的简写形式，只有在$(function(){})下才会执行；
    if ( a && typeof a == "function" && jQuery.fn.ready ) return jQuery(document).ready(a);

    // 确保参数a非空，默认值为document；
      a = a || jQuery.context || document;

    // 如果参数a是jQuery对象(a.jquery="1.0.3")，则克隆一个与a相同的jQuery对象；
    if ( a.jquery ) return jQuery( jQuery.merge( a, [] ) );

    // 从给定的参数c(要求c必须是jQuery对象)中查找a；
    if ( c && c.jquery ) return jQuery( c ).find( a );

    // 如果是初次调用$()，因为在window环境下，所以创建一个新的jQuery对象，如果去掉new则循环执行；
    if ( window == this ) return new jQuery(a,c);

    // 分析HTML串，如“div<ul>p”；
    if ( a.constructor == String ) {
        var m = /^[^<]*(<.+>)[^>]*$/.exec( a );
        if ( m ) a = jQuery.clean( [ m[ 1 ] ] );
      }

    // 如果参数a是元素数组，则要执行jQery.merge()，否则要执行jQuery.find()；
    this.get( a.constructor == Array || a.length && !a.nodeType && a[0] != undefined && a[0].nodeType
        ?  // 处理元素数组；
              jQuery.merge( a, [] )
          :  // 查找相匹配的元素并保存；
              jQuery.find( a, c ) );

    // 如果附加了另外的函数，则在每个相匹配的jQuery对象上执行这个函数；
    var fn = arguments[ arguments.length - 1 ];
    if ( fn && typeof fn == "function" ) this.each( fn );

    return this;

}; //jQuery的结束；

 

 

插件扩展机制

 

<SCRIPT LANGUAGE="JavaScript">
<!--
//防止god变量重复定义，测试环境中此句好像没什么作用
if(typeof window.god == "undefined"){

//这里是god的构造函数，这句也可以写成window.god = function(a,c)...，也就是说所有定义的全局变量都是window的属性
    var god = function(a,c){
    if(window==this){
return new god(a,c);//写这句的目的是方便使用，在外部使用god()就可以了，而不用写new god();
    }
    return this;
}

    god.sayHello = function(){
alert("hello in static way.");
    }

//如果$这个命名空间已经被其它JS库暂用，就把其它JS库定义的存到自己的_$属性里边
if(typeof $ != "undefined"){
god._$ = $;  
}

var $ = god;//定义自己的命名空间，以后写god的地方都可以直接写成$

// 给god的prototype增加两个基础方法和一个属性，这些是所有的god对象共有的，其中第２个方法又去调用了扩展的方法；
god.fn=god.prototype={
sayHello:function(){
    alert("hello in non-static way!");
},
sayGoodbyes:function(){
    this.sayGoodbye(); //调用god.fn.extend()中的sayGoodbye方法
    $().sayGoodbye(); //调用god.fn.extend()中的sayGoodbye方法
    $.sayGoodbye();    //调用god.extend()中的sayGoodbye方法,这个是静态方法.
    $.fn.sayGoodbye(); //调用god.fn.extend()中的方sayGoodbye法
},
god:"1.0.0"
}
// 给god的prototype增加一个extend()方法，同时给god增加一个静态的extend()方法。这个两个extend方法都是所有的god对象共有的
//经测试，通过god.extend()扩展的方法都是静态方法,只能用$.someMethod()调用。
//经测试，通过god.fn.extend()扩展的方法都是非静态方法,可以通过this.someMethod(),$().someMethod(),$.fn.someMethod()三种方式调用
god.extend = god.fn.extend = function(){
// 如果extend方法参数多于一个，则对第一个参数表示的对象进行扩展。
var target = arguments[0], a = 1;

if ( arguments.length == 1 ) {//如果extend方法的参数只有一个。那么就是对调用这个方法的类进行扩展
    target = this;
    a = 0;
}
var prop;
while ( (prop = arguments[a++]) != null )
    // 根据第０或第1...n个参数对基类进行扩展
    for ( var i in prop ) target[i] = prop[i];

// 返回经过扩展（或修改）后的对象
return target;
};

//对god.prototype进行扩展，这里边定义的扩展方法或属性可以通过形如this.sayGoodbye()或$.fn.sayGoodbye()的方式来访问
god.fn.extend({
sayGoodbye:function(){
    alert("good bye from god.fn.extend");
}
});

//对god进行扩展，这里边定义的扩展方法或属性可以通过形如$.sayGoodbye()的方式来访问。
god.extend({
sayGoodbye:function(){
    alert("good bye from god.extend");
}
});

}

//以下是模仿对象继承（扩展）,animal是父类,cat是子类
var animal = function(){
this.height = 1;
this.weight = 100;
}
animal.prototype.sayName = function(){alert("i am an animal");}

var cat = function(){
    function init(){
var a = new animal();
var c = cat;
for ( var i in a ){c[i] = a[i]};
return c;
    }
    return init();
}
//~

// main方法
window.onload = function(){
$().sayGoodbyes();
$.sayHello();
$().sayHello();
var c = new cat();
for (prop in c)
{
    alert(prop);
}
}
//
//-->
</SCRIPT>

 

 

 

从零开始写jQuery框架

摘要: 本文由简到繁地介绍了以jQuery作为蓝本的js框架开发步聚, 希望借助本文大家对jQuery这样的框架内部有一个大致的认识。

随着时代发展，javascript阵营里面出现了越来越多的优秀的框架，大大简化了我们的开发工作，在我们使用这些框架的时候是不是也应该饮水思源想想它们都是怎样构建起来的呢？如果你不满足于仅仅是使用一些现成的API，而是深入了解它们内部的实现机制(照某人的说法, API是贬值最快的东西)，最好的办法就是阅读它们的源代码了，前提是你读得懂。

最近两天研究了一下jQuery的源码，在这里将本人一些粗浅认识分享出来，不当之处请各位指正。好了，下面我们就来看看jQuery大概是怎样工作的，我假定你已经具备了一些基本的javascript知识，如果基础不够俺推荐你阅读《JavaScript高级程序设计》和《悟透JavaScript》这两本书。本文不适合对js里面的类、对象、函数、prototype等概念没有了解的朋友。

我们从最开始的说起:
首先构造一个对象给使用者，假定我们这个框架叫 Shaka   ( 俺的名字;) )
var Shaka = function(){}; 这里我们创建了一个空函数，里面什么也没有，这个函数实际上就是我们的构造函数。为了让我们生成的对象能够调用在prototype里定义出来的方法, 我们需要用原型的方式(把Shaka当作是一个类)给Shaka添加一些方法，于是定义：：
Shaka.fn =  Shaka.prototype = {}; 这里的Shaka.fn相当于Shaka.prototype的别名，方便以后使用，它们指向同一个引用。

OK，我们添加一个sayHello的方法, 给Shaka添加一个参数，这样这个框架最基本的样子已经有了，如果它有生命的话那么它现在是1岁, 看代码:


 提示：您可以先修改部分代码再运行

好啦，先别激动, 我们注意到这个框架跟jQuery在使用上是有一些差别的, 比如在jq 中我们可以这样写
jQuery('#myid').someMethod(); 这是怎样做到的呢, 也就是说 jQuery()这个构造函数返回了一个jQuery的对象实例，因此我们可以在上面调用它的方法，所以Shaka的构造函数应该返回一个实例，它看起来应该是这个样子:
var Shaka = function(){ return //返回Shaka的实例; }; 那么我们要如何取得一个Shaka的实例呢, 我们先来回顾一下使用prototype方式来模拟类的时候 var someObj = new  MyClass(); 这个时候实际上是创建一个新对象someObje，把新对象作为this指针，调用 MyClass函数,即类的构造函数, 然后 someObj 就获得了在 MyClass.prototype里面定义的方法, 这些方法内的this指针指当前对象实例。

在jQuery中使用了一个工厂方法来创建一个实例，这个方法位于jQuery.prototype中, 现在我们重新来定义Shaka.prototype, 给它添加一个init方法用于返回一个Shaka的实例, 并且把Shaka的构造函数稍稍改变一下:

var Shaka = function(age) { return new Shaka.fn.init(age); };

Shaka.fn = Shaka.prototype = {
       init: function(age) { this.age = age; return this; },
       sayHello: function() { alert('I am a little baby, my age is ' + this.age + ' years old.'); }
};

Shaka.fn.init.prototype = Shaka.fn;//这里new Shaka.fn.init(age)创建的对象具有init方法的prototype指向对象的方法 , 因此我们将init方法的prototype指向 Shaka的prototype, 这样创建出来的对象就具有了Shaka.prototype里面定义的方法。

OK，现在我们的小宝宝变成大一点的宝宝了，打个招呼先:


 提示：您可以先修改部分代码再运行

嗯，好象有点样子了，但是光这样还不行，来点实际的, 我们在新框架中实现jquery里val()方法的部分功能，这个方法不加参数调用时返回指定ID的input的值，加参数时为设定这个input的值，与jQery一样，我们约定使用id来查找对象时使用"#"符号。把要查找的目标ID作为构造函数的参数传进去，我们给Shaka.prototype添加一个val()方法, 给Shaka添加一个selector的属性用于存储我们要查找的目标。:
Shaka.fn = Shaka.prototype = {
       init: function(selector) { this.selector = selector; return this; },
       val: function(newValue) { //方法实现代码 }
};
var Shaka = function(selector) { return new Shaka.fn.init(selector); };


 提示：您可以先修改部分代码再运行

 

 

 

到目前为止我们已经创建一个可以工作的框架雏形，为了使程序可以更方便地被调用，比如jQuery可以使用$符号来简写，我们也弄一个，在此之前我们先来回顾两个东西:

1. 我们在脚本中可以这样定义变量:
var foo = 'someThing';
bar = 'otherthing';
这样两种写法都是合法的，但是意义完全不同, 第一个语句创建了一个新的变量，而第二个是定义了window对象的一个属性，相当于window.bar = 'otherthing';, 因此我们想使我们的Shaka具有这样的调用方式能力: $.someMethod()；就需要将Shaka设置为window的一个属性, 于是我们的Shaka构造函数就得写成这样:
var Shaka = window.Shaka = window.$ = function(selector) { return new Shaka.fn.init(selector); };

2. javascript的匿名函数.
创建并执行一个匿名函数的基本形式: (function(){ alert('Hello World!'); })(); 为什么要用到匿名函数呢，因为我们不想把Shaka的内部实现暴露出来，这样容易与其它代码冲突，只提供一个单一的入口，我们可以这样测试一下:


 提示：您可以先修改部分代码再运行

然后，还有一个问题需要解决，俺们的框架做出来了但是还很简陋，在这之前我们需要让它与其它的框架协同工作，因此带来一个问题, 如果我们都使用$作为简写形式就会冲突了, 象jQuery一样，我们需要提供一个noConfilit的方法“出让”$的使用权。在我们的程序最开始处加入下面的代码:
var _$ = window.$;
意思是将此前定义的$对象引用放到 _$ 中, 然后我们再给Shaka扩展一个方法出来, 如果其它开发者需要自行扩展的话也可以使用这个方式(jQuery的extend方法提供了更为强大的功能，请大家自行研究):
(function($){ //extend method definition. })(Shaka);
意思是将Shaka作为这个匿名函数的参数来调用这个方法。
前面我们讲过 Shaka.fn 就是 Shaka.prototype 的别名，因此我们要在Shaka.prototype 里面添加新的方法就可以写成这样
(function($){
       $.fn.noConflict = function(){
              window.$ = _$;//把$还给在开始处取得的引用.
       };
})(Shaka);

现在我们来看一个完整的:


 提示：您可以先修改部分代码再运行

现在好象不错了，我们的Shaka baby已经5岁了;) , 当然这还只是个简陋的东西，要实现健壮而强大的功能还需要付出很多努力, 希望诸位爹妈把自己的孩子培养成人才, good luck!

posted @ 2013-09-24 14:36  fang_beny  阅读(673)  评论(0)  编辑  收藏  举报