对象键中的@符号

Question

我不知道发布此问题的适当位置，但我正在阅读Marionette文档，并在描述时看到以下代码

Marionette.Behaviors：

var MyView = Marionette.ItemView.extend({
    ui: {
        "destroy": ".destroy-btn"
    },

    events: {
        "click @ui.destroy": "warnBeforeDestroy"
    }

之前我从未在对象键中看到@符号。 @是否意味着什么，或者它只是字符串的一部分而没有什么特别之处？

Answer 1

TL; DR 在Backbone.Marionette视图中，事件对象的属性名称中以@符号开头的字符串由Marionette解析。 Marionette将匹配@ui.之后的字符串，并将其替换为该视图的ui哈希值中的相应值。在您的示例中，"click @ui.destroy"变为"click .destroy-btn"。

---

木偶ui

Marionette增强了一点语法糖，以帮助您更好地组织视图中的DOM依赖项。换句话说，木偶视图可以在视图中使用ui哈希，该哈希保存对该视图el内的DOM元素的引用。在您的示例中，您可以设置

ui: {
  "destroy": ".destroy-btn"
}

这假设您的视图模板至少包含一个类.destroy-btn的元素。呈现视图后，Marionette将调用view.bindUIElements，并且将使用jQuery对象填充ui哈希的每个成员，该jQuery对象表示与传递给{{1}的选择器匹配的元素对象。

因此，在您的视图中，ui将返回视图this.ui.destroy内选择器.destroy-btn 的jQuery对象。

Marionette解析el哈希

Marionette将为您做的另一件事，这是您提出问题的地方，解析您的events哈希值。如果它找到包含events前缀的任何events属性，它将在@ui.之后捕获字符串，并返回存储在.哈希中的选择器。

所以，如果你有

ui

Marionette将向Backbone发送一个events: { "click @ui.destroy": "warnBeforeDestroy" } 哈希，其外观如下：

events

进一步参考

参见Marionette events 和bindUIElements

Answer 2

这些只是普通的对象键。没什么特别的。

var events = {
    "click @ui.destroy": "warnBeforeDestroy"
};

events["click @ui.destroy"]; // 'warnBeforeDestroy'

看起来这些在Marionette的背景下可能是特殊的，但这与JSON无关。

Answer 3

JSON是一种用于将对象描述为文本数据的格式，因此没有JSON对象......只有JSON字符串，如"[1,2,3]"，它是三个元素数组的JSON表示。

你展示的是一个Javascript对象，他们可以使用任何字符串作为键，字符@实际上并不特别。

如果您尝试使用非字符串作为键的内容，则无论如何首先将其转换为字符串... ...例如：

var obj1 = {};
obj1[12] = 99;
console.log(obj1["12"]);

请注意，如果您想将Javascript对象用作通用存储的字典，则可能会遇到继承属性的问题...例如：

var obj2 = {};
if (obj2["constructor"]) { console.log("What? not empty?"); }

然而，您可以使用hasOwnProperty检测某个键是继承的还是特定对象实例的一部分。