淺析jQuery的基礎設計模式

jQuery雖說已不像之前如此流行，但是jQuery本身的精髓卻是每個前端人都需要去領悟的。

今天，後生也想嘗試着去理解jQuery整套框架的設計模式和精要。那麼就先從jQuery的設計模式開始說起吧。

使用jQuery非常方便，我們可以這樣做
$(‘#id’).html();
還可以這樣做
$(‘#id’).html().css();

從上面兩個非常簡單的例子裏，我們需要思考的是：jQuery是怎麼實現構造的，jQuery又是如何實現鏈式調用的。因爲，jQuery就是在這麼一個模式下建立起來的。

剔除掉其他一些代碼，實現上面功能de代碼片段其實很簡潔，但卻不簡單。

var
jQuery = function( selector, context ){
    return new jQuery.fn.init( selector, context );
}

jQuery.fn = jQuery.prototype = {};

jQuery.fn.init = function(selector, context){ return this; };

jQuery.fn.init.prototype = jQuery.fn;

乍一看，完全不知道在幹嘛。我們還是得通過一步一步的分析來理解它。

首先，寫個小例子。

var Kingsley = function(){
    this.name =“Kingsley”;
    this.age = 23;
}
Kingsley.prototype.sayHello = function(){
    console.log(“PHP is the best programming language in the world”);
}
var kings = new Kingsley();
console.log(kings.name);

上面無非就是用JS實現了一個構造函數。通過構造函數來創建一個實例。
那麼，要實現像jQuery一樣，不通過new就實例化了一個對象，可以嘗試通過直接返回的方式來達到目的。

於是又寫了個小例子

var Kingsley = function(){
    return new Kingsley();
};

OMG~難產了。死循環。
那咋整呢？

於是又思考了下，通過在原型上添加一個init函數，每次new的時候給它一個新的對象。OK，試試看。。。

var Kingsley = function(){
    return new Kingsley.prototype.init();
}

Kingsley.prototype.init = function(){
    this.name = “Kingsley”;
    return this;
}

Kingsley.prototype.sayHello = function(){
    console.log("PHP is the best programming language in the world");
}

var kings = Kingsley();

console.log(kings.name);//Kingsley

kings.sayHello();//error

出事故了。。。取到了name,卻沒有取到原型上的sayHello。非常明顯，現在this的指向並不是Kingsley的實例而是init的實例對象。那麼要怎麼才能又能訪問init作用域又能訪問原型作用域呢？

那就是，

Kingsley.prototype.init.prototype = Kingsley.prototype;

吆喝，這可真夠繞的呢。

最後看看最終版本：

var jQuery = function( selector, context ){

    return new jQuery.fn.init( selector, context );

}

jQuery.fn = jQuery.prototype = {
    
    init : function( selector, context){
        this.name = "PHP";
        return this;
    },

    sayHello:function(){
        console.log("PHP is the best programming language in the world");
        return this; //鏈式調用

    },

    sayGoogBye:function(){
        console.log("Hello World");
        return this;
    }

    
}
//MOST IMPORTANT
jQuery.fn.init.prototype = jQuery.fn;
//Object { init: init(), sayHello: sayHello(), sayGoogBye: sayGoogBye() }

var jquery = jQuery();
console.log(jquery.name);//PHP
jquery.sayHello();//PHP is the best programming language in the world
jquery.sayHello().sayGoogBye();

每次return this 相當於又返回了自身對象，這也就是爲什麼能夠實現鏈式調用的原理。

到這裏，加上之前的文章介紹過的extend方法和noconflict方法，也就構成了jQuery最基本的設計模式。