浅析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最基本的设计模式。