jQuery的無new創建方法


一般我們去寫一個框架,會采用什么樣的設計呢?比如設計一個jQuery框架,一般我們會創建一個函數對象

function jQuery(params){
  //構造函數
}
jQuery.prototype.init = function(params){
  //初始化操作
} jQuery.prototype.html
= function(html){   //實現類似設置innerHTML的操作 } var jq = new jQuery("#id"); jq.init(); jq.html("test");

我想這是我們最常見的使用方式,這種方式需要new一個新的實例,然后再進行初始化操作,然后才能繼續操作,很顯然這樣會比較繁瑣而且代碼較多,而jQuery中的使用方法卻非常簡潔

獲取指定元素:$("#id")/$(".class")/$("body").html("test");

創建html片段$("<div></div>").html("test");

設置文檔加載完成后的方法$(function(){XXX});

等等,為何jQuery的使用方法如此簡單,這是因為jQuery設計的是一種無new的創建方法,這是jQuery獨特的設計思路之一。

我們打開jQuery初始化的這塊代碼,發現基本結構是這樣子的(提取主要框架部分源碼):

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

    jQuery.fn = jQuery.prototype = {

        constructor: jQuery,
        init: function( selector, context, rootjQuery ) {

                if ( !selector ) {
                     return this;
                 } 

                if ( typeof selector === "string" ) {
                    if ( match && (match[1] || !context) ) {
                        return this;
                    } else if ( !context || context.jquery ) {
                        return ( context || rootjQuery ).find( selector );
                    } else {
                        return this.constructor( context ).find( selector );
                    }
                } else if ( selector.nodeType ) {
                     return this;

                } else if ( jQuery.isFunction( selector ) ) {
                     return rootjQuery.ready( selector );
                }

                if ( selector.selector !== undefined ) {
                     this.selector = selector.selector;
                     this.context = selector.context;
                 }

                 return jQuery.makeArray( selector, this );

        },
     html:function(value){
      //實現類似innerHTML操作
     } } jQuery.fn.init.prototype
= jQuery.fn;

})( window );

1. 首先把代碼封裝在一個匿名函數里面,防止污染全局環境,然后創建一個對象jQuery,這個對象接受兩個參數selector,context,其中selector就是我們通常傳入的 #id,.class等字符串,這個對象函數里面並沒有做什么邏輯而是直接返回了一個原型上的init方法,然后把參數傳了進去。

2. init方法接受了3個參數,然后在內部進行了各種判斷,根據不同的場景,返回一個不同的實例對象,類似一個工廠方法。

3. 將jQuery.fn.init的原型掛載到jquery的原型上。

4. 將jQuery的constructor還原為jQuery

init方法的內部邏輯我們后面再看,首先看下為何jQuery要這樣做?

首先jQuery在構造函數里面就執行了new方法並執行了init方法,將new和init兩步直接合並成一步,而且自帶new操作,不需要用戶再去進行new的操作,但是為何要使用一個原型上的init方法,而不是在自身自己new出一個對象呢?

想象一下如果jQuery這樣寫

 var jQuery = function( selector, context ) {
     //做上面的各種場景判斷
return new jQuery( selector, context, rootjQuery ); }

這樣寫會存在一個問題,jQuery函數內部new一個新的jQuery,然后會一直這樣new下去無限循環,陷入死循環。為了防止這種情況的出行,jQuery將這部分邏輯放在了原型中的一個init方法,由init方法來進行工廠方法的處理,return new jQuery.fn.init( selector, context, rootjQuery ),這樣就避免了死循環的問題,而且實現了一步到位的初始化。

但是這樣寫還存在一個問題,init方法里面的return this是指向的jQuery的實例對象,那他將無法訪問jQuery的原型對象,比如說jQuery.prototype.html方法,因為html的方法是jQuery.prototype上的所以init方法無法訪問這個函數,為了解決這個問題,我們看到之前的源碼有最后一行:

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

其中jQuery.fn就是jQuery.prototpye,也就等價於

jQuery.prototpye.init.prototype = jQuery.prototpye;

這句話的意思是,把init的方法的原型改為指向jQuery的原型,這樣new init的出來的實例對象也就等價於new jQuery的實例對象,所以也就可以訪問jQuery的原型方法了。

jQuery.prototype.init和jQuery的原型指向的是同一個對象,這樣不管是init還是jQuery去修改原型對象都是等價的,這樣就實現了上面提到的問題。

最后,jQuery再把constructor還願回來到jQuery,防止構造函數指向錯誤,引起調用問題,為何要這樣處理呢?因為我們是把jQuery的prototype直接覆蓋成了一個新的實例對象,所以jQuerty的constructor就變成了{}的構造函數Object,所以需要將constructor還原為真正的jQuery。

對比下兩種原型改寫方式:

//方式1
jQuery.prototype.html = function(value){}
//方式2 jQuery.prototype
= { html:function(value){} }

兩種方式看起來好像沒啥區別,但其實區別很大,第一種是給jQuery的prototype新增一個方法,這種方式是不會影響jQuery的constructor,還是function jQuery(),

而第二種方式是直接覆蓋了jQuery的prototype,這種情況下的constructor會被直接改寫為{html:function(value)}這個實例對象的構造函數,也就是function Object()

所以需要重置一下jQuery的constructor


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM