现在，当我使用 chrome 开发工具调试 backbone 或 marionette 时，我最终设置了断点和诸如此类的东西，但是一旦代码暂停，就很难判断我正在使用什么类型的对象，因为 chrome 标签一切都是“ child ”。
(我想是因为那是构造函数)

是否有任何简单的方法来更改此声明或确定我正在使用的模型/集合类型。

这让我疯狂到想开始做这样的事情:

MyModel = Backbone.Model.Extend({
    // the $$$ puts it at the top of the inspector, the NAME is just for other devs
    $$$NAME = "MyModel",  
    ...
});

我不太喜欢它，因为它...丑陋，它是一个变量...只有在我检查和扩展变量时它才有帮助...更改 chrome 用于显示的名称会很棒它。

无论如何，有谁知道如何更改名称？还是您使用其他一些更清洁的约定？

谢谢!

马特

最佳答案

背景

看看为什么浏览器使用“child”来在控制台/调试器中显示 Backbone 对象的类型很有趣。

所有 JavaScript 对象都有一个构造函数属性，即对用于创建对象的函数的引用。浏览器使用构造函数在控制台/调试器中显示对象的“类型”。如果不为空，将使用构造函数的 name 属性的值。但是，只有使用命名函数表达式定义的函数才能获得有用的名称属性:

function A() {  }
console.log(A.name); // 'A' 

匿名函数有一个空的名称属性:

var B = function() {  };
console.log(B.name); // ''

那么，匿名函数会发生什么？ Chrome 从函数首次分配给的变量或属性的名称推断匿名函数的名称。以下是一些示例:

// 1. named function expression - objects will show as “a” in the console
function a() { … }

// 2. anonymous function assigned to variable - objects will show as “b” in the console
var b = function(){ … };

// 3. anonymous function assigned to property of object - objects will show as “container.c” in the debugger
var container = {
    c: function() { … }
};

此处提供了更详细的脚本:http://jsfiddle.net/danmalcolm/Xa7ma/6/

浏览器似乎是从源代码中获取这个名称的——没有 JavaScript 功能可以在运行时告诉您函数分配给的第一个变量的名称。其他浏览器支持使用在匿名构造函数上定义的 displayName 属性的约定，但这目前在 Chrome 中不会发生:http://code.google.com/p/chromium/issues/detail?id=17356 .

回到 Backbone，假设您没有使用自定义构造函数(见下文)，您的类型将以匿名构造函数结束，创建于 Backbone's extend function模型、 View 、集合和路由使用如下:

child = function(){ return parent.apply(this, arguments); };

这就是为什么您在控制台/调试器中的 Backbone 对象旁边看到“child”的原因。这是浏览器对对象构造函数的合适名称的最佳猜测。

解决方案

为了给你的对象一个更好的类型名称，你可以在定义你的 Backbone 类型时通过第一个“protoProps”参数提供一个命名构造函数。只需添加一个构造函数属性来包装对“父”构造函数的调用，如下所示:

var Product = Backbone.Model.extend({
    constructor: function Product() {
        Backbone.Model.prototype.constructor.apply(this, arguments);
    }
});

您的产品模型实例现在在调试器中看起来真的很好。

为您定义的每个 View、Model、Collection 和 Route 执行此操作有点麻烦。您可以猴子修补 Backbone 的扩展功能来为您完成工作。

您首先需要建立一个约定来定义您的类型的名称。这里我们使用 __name__ 属性，您可以按如下方式指定它:

var Product = Backbone.Model.extend({
    __name__: 'Product'
    // other props
});

然后，您替换模型、 View 、集合和路由使用的扩展函数来读取此属性，并向您的类型添加命名构造函数。您不需要修改 backbone.js 本身，只需在 backbone.js 之后加载的单独脚本中包含以下内容即可。

(function () {

    function createNamedConstructor(name, constructor) {

        var fn = new Function('constructor', 'return function ' + name + '()\n'
            + '{\n'
            + '    // wrapper function created dynamically for "' + name + '" constructor to allow instances to be identified in the debugger\n'
            + '    constructor.apply(this, arguments);\n'
            + '};');
        return fn(constructor);
    }

    var originalExtend = Backbone.View.extend; // Model, Collection, Router and View shared the same extend function
    var nameProp = '__name__';
    var newExtend = function (protoProps, classProps) {
        if (protoProps && protoProps.hasOwnProperty(nameProp)) {
            // TODO - check that name is a valid identifier
            var name = protoProps[nameProp];
            // wrap constructor from protoProps if supplied or 'this' (the function we are extending)
            var constructor = protoProps.hasOwnProperty('constructor') ? protoProps.constructor : this;
            protoProps = _.extend(protoProps, {
                constructor: createNamedConstructor(name, constructor)
            });
        }
        return originalExtend.call(this, protoProps, classProps);
    };

    Backbone.Model.extend = Backbone.Collection.extend = Backbone.Router.extend = Backbone.View.extend = newExtend;
})();

关于javascript - 调试 Javascript(Backbone 和 Marionette)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14866014/