什麼是「var dialogs = {};」意味着在jQuery/JavaScript？

Question

對不起，打擾你在這裏，但我仍然想了解更多關於我正在工作的一些JavaScript代碼。我剛剛問了一個關於dialogs [id] = $（）的問題;現在我進一步查看代碼並查看其他我不熟悉的內容。

有人可以解釋「var dialogs = {}」的目的是在這種情況下。謝謝，

$(function() { 
// Cache for dialogs 
var dialogs = {}; 

var getValidationSummaryErrors = function ($form) { 
    // We verify if we created it beforehand 
    var errorSummary = $form.data('validation-summary-errors'); 
    if (!errorSummary) { 
     errorSummary = $('<div class="validation-summary-errors"><span>Please correct the errors and try again.</span><ul></ul></div>') 
      .insertBefore($form); 

     // Remember that we created it 
     $form.data('validation-summary-errors', errorSummary); 
    } 

    return errorSummary; 
}; 

var formSubmitHandler = function (e) { 
    var $form = $(this); 

    // We check if jQuery.validator exists on the form 
    if (!$form.valid || $form.valid()) { 
     $.post($form.attr('action'), $form.serializeArray()) 
      .done(function (json) { 
       json = json || {}; 

       // In case of success, we redirect to the provided URL or the same page. 
       if (json.success) { 
        location = json.redirect || location.href; 
       } else if (json.errors) { 
        var errorSummary = getValidationSummaryErrors($form); 

        var items = $.map(json.errors, function (error) { 
         return '<li>' + error + '</li>'; 
        }).join(''); 

        var ul = errorSummary 
         .find('ul') 
         .empty() 
         .append(items); 
       } 
      }); 
    } 

    // Prevent the normal behavior since we opened the dialog 
    e.preventDefault(); 
}; 

var loadAndShowDialog = function (id, link, url) { 
    var separator = url.indexOf('?') >= 0 ? '&' : '?'; 

    // Save an empty jQuery in our cache for now. 
    dialogs[id] = $(); 

    // Load the dialog with the content=1 QueryString in order to get a PartialView 
    $.get(url + separator + 'content=1') 
     .done(function (content) { 
      dialogs[id] = $('<div class="modal-popup">' + content + '</div>') 
       .hide() // Hide the dialog for now so we prevent flicker 
       .appendTo(document.body) 
       .filter('div') // Filter for the div tag only, script tags could surface 
       .dialog({ // Create the jQuery UI dialog 
        title: link.data('dialog-title'), 
        modal: true, 
        resizable: true, 
        draggable: true, 
        width: link.data('dialog-width') || 300 
       }) 
       .find('form') // Attach logic on forms 
        .submit(formSubmitHandler) 
       .end(); 
     }); 
}; 

// List of link ids to have an ajax dialog 
var links = ['logonLink', 'registerLink']; 

$.each(links, function (i, id) { 
    $('#' + id).click(function (e) { 
     var link = $(this), 
      url = link.attr('href'); 

     if (!dialogs[id]) { 
      loadAndShowDialog(id, link, url); 
     } else { 
      dialogs[id].dialog('open'); 
     } 

     // Prevent the normal behavior since we use a dialog 
     e.preventDefault(); 
    }); 
}); 

}）;

請注意，這是完整的JavaScript。沒有什麼比這裏沒有顯示的更多。

另外：是否需要？

Answer 1

它實例化一個新的Object沒有任何自己的屬性或方法。基本上話說

var dialogs = new Object(); 

的{}符號一樣被稱爲object literal。

---

這是需要在這個代碼。變量dialogs用於跟蹤現有的（已創建的）對話框，因此不必在每次打開時都創建它們。如果仔細觀察，幾條線會引用此變量。 dialogs被聲明在頂部（var dialogs = {}），因此同一級別的其他所有函數都可以使用它（詳見variable scope）。

當使用dialogs對象時，我標記了代碼中的位置。不要讓dialogs[id]表示法愚弄你 - dialogs不是數組（Javascript沒有關聯數組），而是一個對象，所以它相當於dialogs.id。

$(function() { //this is used not to pollute the global scope 

var dialogs = {}; //HERE - dialogs is declared in this local scope 

... 

var loadAndShowDialog = function (id, link, url) { 
    var separator = url.indexOf('?') >= 0 ? '&' : '?'; 

    dialogs[id] = $(); //HERE - dialogs.id will be an empty jQuery object 

    $.get(url + separator + 'content=1') 
     .done(function (content) { 
      //HERE - dialogs.id becomes a (jQuery-wrapped) div 
      //with the appropriate content 
      dialogs[id] = $('<div class="modal-popup">' + content + '</div>') 
       ... 
     }); 
}; 

... 
$.each(links, function (i, id) { 
    $('#' + id).click(function (e) { 
     ... 
     if (!dialogs[id]) { //HERE - if a dialog with this id does not exist 
      loadAndShowDialog(id, link, url); //load a new one 
     } else { //otherwise 
      dialogs[id].dialog('open'); //HERE - open the existing dialog 
     } 
     ... 
    }); 
}); 

}); 

Answer 2

它聲明一個空的Javascript對象，然後可以將屬性動態地添加到它的存儲。

編輯：請注意，有兩種方式訪問​​Javascript中的對象的屬性。第一種是使用「點符號」，即object.property。

第二種是使用括號，例如， object['property']。他們或多或少是同一件事。另外，因爲Javascript是一種動態語言，如果您設置了該對象上不存在的屬性，它將爲您創建它，然後設置它。

鑑於此，您應該能夠發現在代碼中使用此對象的位置。提示：它使用後面的符號。 :-)

Answer 3

{}爲創建新對象的快捷方式（像[]爲陣列），所以var dialogs = {}沒有任何屬性只是創建一個空對象。