javascript - 大括号后跟事件，这在 javascript 模块中意味着什么？

Question

目前我正在研究 javascript 模块。我遇到了这个文件，它让我对大括号的使用和它后面的单击事件位置感到困惑。虽然我可以猜测这可能意味着，

if the element (inside curly braces) clicked do this..

我想确认一下并知道这样绑定(bind)的原因。

$(document).on("click.es.reports.link", "[data-reports-link]", function(){

        var button = $(this);
        var props = "url,extension,uid,type,object,title,description".split(",");
        var data = {};

        $.each(props, function(i, prop){
            data[prop] = button.data(prop);
        });

        FunSocial.dialog({

            content: FunSocial.ajax("site/views/reports/confirmReport", {
                    title: data.title,
                    description: data.description
            }),
            selectors: {
                "{message}": "[data-reports-message]",
                "{reportButton}": "[data-report-button]",
                "{cancelButton}": "[data-cancel-button]"
            },
            bindings: {

                "{reportButton} click": function() {

                    ..code removed for brevity...
                },

                "{cancelButton} click": function() {
                    ..code removed for brevity...
                }       
            }   
        });
    });

从上面的代码中，

这是什么意思:

"{message}": "[data-reports-message]",

这意味着什么:

"{reportButton} click": function() {
    ..code removed for brevity...
    },

Answer 1

两者

"{message}": "[data-reports-message]",

和

"{reportButton} click": function() {
    ..code removed for brevity...
    },

...位于对象初始值设定项中；他们使用完全相同的名称创建属性:

var obj = {
  "{message}": "[data-reports-message]"
};
console.log(obj);

{} 部分看起来像是 FunSocial.dialog 用来执行某些操作的占位符。例如，在您的第二个示例中:

"{reportButton} click": function() {
    ..code removed for brevity...
    },

...我怀疑它采用该名称，用必要的选择器替换 {reportButton} 来识别“报告按钮”，然后在该按钮上设置一个事件处理程序。