在$（document）.ready（）函數中生成閉包有什麼作用？

Question

調試我的一個項目我注意到另一個開發者已經改變了$(document).ready()函數來在它自己內部生成閉包。例如。 $(document).ready(function($) { });我很好奇這樣做，以及它的用法。

注：通過從我的代碼再次工作的功能刪除的$。 $(document).ready(function() { })

原始/固定

$(document).ready(function() { 
    var id = //pull session variable from asp session (yuck) 
    var img = $('.photoLink'); 

    $('.photoLink').click(function() { 
     $(this).photoDialog({ 
      id: id, 
      onClose: function() { 
       img.attr('src', img.attr('src') + '&rand=' + (new Date()).getTime()); //prevent caching of image 
      } 
     }); 
    }); 
}); 

修改/斷碼

$(document).ready(function($) { 
    var id = //pull session variable from asp session (yuck) 
    var img = $('.photoLink'); 

    $('.photoLink').click(function() { 
     $(this).photoDialog({ 
      id: id, 
      onClose: function() { 
       img.attr('src', img.attr('src') + '&rand=' + (new Date()).getTime()); //prevent caching of image 
      } 
     }); 
    }); 
}); 

修改後的代碼會產生在Firebug的錯誤，說明我是調用自定義插件功能做不存在。我假設這是因爲$參數是重寫或與試圖使用它的任何jQuery函數衝突。

我真的很困惑，爲什麼有人會改變這一點，在目前的情況下，它沒有任何意義，因爲該插件調用是唯一的頁面上的JavaScript。

有人可以向我解釋爲什麼你會使用它，可能是它的一個例子嗎？

編輯

下面是我的自定義插件代碼，我還修改上面的例子來顯示如何，我叫它：

(function($) { 
    var link = $('<link>'); 
    link.attr({ 
     type: 'text/css', 
     rel: 'stylesheet', 
     href: 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/black-tie/jquery-ui.css' 
    }).appendTo('head'); 

    var script = $('<script>'); 
    script.attr({ 
     type: 'text/javascript', 
     src: 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js' 
    }).appendTo('head'); 

    $.fn.photoDialog = function(options) { 

     var defaults = { 
      autoOpen: false, 
      title: 'Photo Tool', 
      minHeight: 560, 
      minWidth: 540, 
      url: '/photo_form.aspx', 
      onClose: function(){} 
     }; 
     var opts = $.extend(defaults, options); 

     return this.each(function() { 
      $this = $(this); 
      that =$(this); 
      var $dialog = $('<div>') 
       .html('<iframe src="' + opts.url + '?sn=' + opts.id + '" width="' + (opts.minWidth - 20) + '" height="' + (opts.minHeight - 20) + '" style="border: none;" scrolling="no"></iframe>') 
       .dialog({ 
        autoOpen: opts.autoOpen, 
        title: opts.title, 
        minHeight: opts.minHeight, 
        minWidth: opts.minWidth, 
        modal: true, 
        close: function() { 
         opts.onClose.call(that); 
        } 
       }); 

      $this.click(function() { 
       $dialog.dialog('open'); 
       return false; 
      }); 
     }); 
    }; 
})(jQuery); 

Answer 1

當你寫一個jQuery插件，支持noConflict功能，你通常會做：

(function($) { 
    // Plugin code... 
})(jQuery); 

這可以讓你的插件代碼中使用$的別名，jQuery，無論noConflict設置。

也許其他開發者通過反射增加了 $參數。

關於第二個想法，罷工。另一位開發人員可能試圖改善這種情況。

即使傳遞給ready處理程序的參數爲$，您的代碼仍然可以正常工作。你說你調用的自定義插件函數不再存在。你能告訴我們更多關於這個自定義插件嗎？

我懷疑$被調用document.ready()和處理程序的實際執行之間的變化，在你面前正在利用這一點，但你不能再因爲原來$現在傳遞給處理程序。

Answer 2

傳遞給裏面的函數的第一個參數$(document).ready(...是jQuery對象。你只看到了真正的模式是有道理的，如果你有

// outside here, $ could be anything 

jQuery(document).ready(function($) { 
    // $ inside here refers to jQuery 
    $('.element').click(function() { 
     //call custom plugin here 
    }); 
}); 

這將使$別名引用jQuery功能的內部時，DOM已加載到執行，即使window.$不引用jQuery但一些否則，就像另一個JavaScript庫函數一樣。但是，在你的問題中，只要window.$引用jQuery，那麼我希望代碼在沒有問題的情況下工作。

Answer 3

jQuery將對全局「jQuery」的引用傳遞給「ready」處理程序。這就是爲什麼代碼會這樣寫的，實際上應該是沒有問題。我懷疑這個故事比你的問題揭示更多。

編輯 — 這裏有一個可能性：會不會是你的插件是進口的jQuery 單獨副本，它安裝本身是一個，而不是你的嗎？您可以嘗試使用TamperData或Chrome「Network」開發人員工具等工具來觀察所有HTTP請求，並查看是否正在加載jQuery兩次。另外，把該行的「破」代碼之前：

$.banana = "yellow"; 

，然後檢查你的處理程序代碼裏面看到「$」是否具有「香蕉」財產與否。

如果是這種情況，那麼區別在於，您的「Broken」代碼中引用「$」將引用未安裝插件的jQuery副本。當您取出「$」參數時，代碼可以引用庫的正確，更新的副本。