[js高手之路] 設計模式系列課程 - jQuery的鏈式調用與靈活的構造函數

一、我們從一個簡單的構造函數+原型程序開始

var G = function(){};
        G.prototype = {
            length : 5,
            size : function(){
                return this.length;
            }
        }

上例是個非常簡單的程序，如果需要調用，我們可以用new的方式

var oG = new G();

console.log( oG.size() ); //5

1、常見的錯誤調用方式1

console.log( G.size() ); //報錯

G.size這種調用，是把size當做靜態方法調用，如果需要正常的調用， 應該把size方法加在函數本身，如:

G.size = function(){

return 10;

}

2、常見的錯誤調用方式2

G().size() //報錯

G()返回的是undefined, undefined.size() 肯定是報錯， size是函數G原型對象上的方法，如果要確保這種方式調用正常，那么我們就要讓G() 返回一個G函數的實例

所以，我們可以這樣做：

        var G = function () {
            if( this instanceof G ) {
                return this;
            }else {
                return new G();
            }
        };

把G的構造函數改造一下，判斷this是否是當前G函數的實例，如果是,直接返回，如果不是，返回new G()  這樣根據原型對象的查找原則，就能確保調用到size方法

完整的代碼:

        var G = function () {
            if( this instanceof G ) {
                return this;
            }else {
                return new G();
            }
        };
        G.prototype = {
            length: 5,
            size: function () {
                return this.length;
            }
        }
        console.log( G().size() );

在jquery框架中，他是怎么做的？

        var G = function () {
            return G.fn;
        };
        G.fn = G.prototype = {
            length: 5,
            size: function () {
                return this.length;
            }
        }
        console.log( G.prototype.size() ); //5
        console.log( G().size() ); //5

在jquery中, 為函數G增加一個屬性fn( 記住：在js中函數是對象，這其實就是給對象增加了一個屬性 )，然后在G函數中返回 G.fn 就是就是返回G.prototype

那么用G().size 其實就是相當於調用 G.prototype.size()

二、在jquery中，這個構造函數一般是用來選擇元素的。

G返回的是G的原型對象，我們要增加選擇元素的功能，自然而然，就是往原型對象上添加：

        var G = function ( id ) {
            return G.fn.init( id );
        };
        G.fn = G.prototype = {
            init : function( id ){
                return document.getElementById( id );
            },
            length: 5,
            size: function () {
                return this.length;
            }
        }

向G的原型對象上添加一個init方法， 然后在構造函數中調用

        window.onload = function(){
            console.log( G( 'box' ) );
            G('box').style.backgroundColor = 'red';
            // G('box').size(); //報錯，無法鏈式調用
        }

    <div id="box">ghost wu tell you how to learn design pattern</div>

雖然通過init方法，能夠選擇到dom元素，但是不能實現鏈式調用, 因為G('box')返回的是一個dom對象， 而在dom對象上是沒有size這個方法的，因為size是G.prototype上的

所以要實現鏈式調用，就要確保init方法返回的是G的實例或者G.prototype,  這個時候，this就可以派上用場了

<script>
        var G = function (id) {
            return G.fn.init(id);
        };
        G.fn = G.prototype = {
            init: function (id) {
                this[0] = document.getElementById(id);
                this.length = 1;
                return this;
            },
            length: 0,
            size: function () {
                return this.length;
            }
        }
        window.onload = function () {
            console.log(G('box'));
            console.log( G('box2').size() );
        }
    </script>

    <div id="box">ghost wu tell you how to learn design pattern</div>
    <div id="box2">id為box2的第二個div</div>

把選擇到的元素放在this中， 這個時候的this指向的是G.fn,G.prototype?

因為在構造函數中，是這樣調用的: G.fn.init( id ), 我把G.fn標成紅色, 也就是相當於G.fn是一個對象，沒錯他確實就是一個對象G.prototype，所以在init中的this指向的就是

init方法前面的對象( G.fn, G.prototype ).

三、this覆蓋

接下來，就會產生一個問題， this共用之后，元素選擇就會產生覆蓋

<script>
        var G = function (id) {
            return G.fn.init(id);
        };
        G.fn = G.prototype = {
            init: function (id) {
                this[0] = document.getElementById(id);
                this.length = 1;
                console.log( this === G.fn, this === G.prototype, this );
                return this;
            },
            length: 0,
            size: function () {
                return this.length;
            }
        }

        window.onload = function(){
            console.log( G( 'box' ) );
            console.log( G( 'box2' ) );
        }
    </script>

    <div id="box">ghost wu tell you how to learn design pattern</div>
    <div id="box2">id為box2的第二個div</div>

調用兩次構造函數G 去獲取元素的時候， this[0] 現在都指向了 id為box2的元素， 把第一次G('box')選擇到的id為box的元素覆蓋了，產生覆蓋的原因是this共用，那么我們

可以通過什么方法把this分開呢？不同的this指向不同的實例？ 用什么？ 恩，對了， 用new，每次new一個構造函數就會生成新的實例

四、解決this覆蓋與鏈式調用

    <script>
        var G = function (id) {
            return new G.fn.init(id);
        };
        G.fn = G.prototype = {
            init: function (id) {
                this[0] = document.getElementById(id);
                this.length = 1;
                return this;
            },
            length: 0,
            size: function () {
                return this.length;
            }
        }
        window.onload = function(){
            console.log( G( 'box' ) );
            console.log( G( 'box2' ) );
        }
    </script>
    <div id="box">ghost wu tell you how to learn design pattern</div>
    <div id="box2">id為box2的第二個div</div>

通過構造函數中new G.fn.init( id ) 的方式，每次生成一個新的實例，但是產生了一個新的問題，不能鏈式調用， 因為init中的this發生了改變，不再指向( G.fn, G.prototype ).

G('box2').size();//報錯,

為了能夠調用到size(), 所以在執行完構造函數之后，我們要確保this指向G的實例，或者G的原型對象，

只需要把init函數的原型對象指向G.fn就可以了

        var G = function (id) {
            return new G.fn.init(id);
        };
        G.fn = G.prototype = {
            init: function (id) {
                this[0] = document.getElementById(id);
                this.length = 1;
                return this;
            },
            length: 0,
            size: function () {
                return this.length;
            }
        }
        G.fn.init.prototype = G.fn;

加上G.fn.init.prototype = G.fn;我們就修正了this的覆蓋與鏈式調用問題

 五、擴展選擇器

上面支持id選擇器，我們只需要在init函數加上其他類型的擴展就可以了，比如，我這里增加了一個標簽選擇器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div,p {
            border:1px solid red;
            margin: 10px;
            padding: 10px;
        }
    </style>
    <script>
        var G = function ( selector, context ) {
            return new G.fn.init( selector, context );
        };
        G.fn = G.prototype = {
            constructor : G,
            init: function ( selector, context ) {
                this.length = 0;
                context = context || document;
                if ( selector.indexOf( '#' ) == 0 ) {
                    this[0] = document.getElementById( selector.substring( 1 ) );
                    this.length = 1;
                }else {
                    var aNode = context.getElementsByTagName( selector );
                    for( var i = 0, len = aNode.length; i < len; i++ ){
                        this[i] = aNode[i];
                    }
                    this.length = len;
                }
                this.selector = selector;
                this.context = context;
                return this;
            },
            length: 0,
            size: function () {
                return this.length;
            }
        }
        G.fn.init.prototype = G.fn;

        window.onload = function(){
            console.log( G('#box')[0] );
            var aP = G('p', G('#box')[0]);
            // var aP = G('p');
            // var aP = G('#p1');
            for( var i = 0, len = aP.size(); i < len; i++ ){
                aP[i].style.backgroundColor = 'blue';
            }
        }
    </script>
</head>

<body>
    <div id="box">
        <p>跟着ghostwu學習設計模式</p>
        <p>跟着ghostwu學習設計模式</p>
        <p>跟着ghostwu學習設計模式</p>
        <p>跟着ghostwu學習設計模式</p>
    </div>
    <p id="p1">跟着ghostwu學習設計模式</p>
    <p>跟着ghostwu學習設計模式</p>
</body>

</html>