什么是“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 = {}没有任何属性只是创建一个空对象。