突然间,我的BackboneJS收藏不见了;当代码被缩小时,无法在Chrome中工作

Suddenly my BackboneJS collections don't work in Chrome when the code is minified

本文关键字:小时 缩小 Chrome 工作 代码 收藏 BackboneJS 我的 不见 突然间      更新时间:2023-09-26

当代码被缩小时,我的BackboneJS集合突然无法在Chrome中工作。我一直在搜索我们代码中的一个错误。但是在修复了一些错误之后,当我使用集合时,应用程序会继续崩溃。如果我更改数组的集合,应用程序就会工作,但执行中的下一个集合将再次中断执行。

我不得不说,我的申请真的很大。我有一个包含大量信息的模型,它有嵌套的集合和模型。

一个带有集合的模型的例子,通常是那些失败的。

    var MyCollection = Backbone.Collection.extend({ model: VinculacionesGrafo });
    var MyParentModel= Backbone.Model.extend({
        defaults: function () {
            return {
                mycollec: new MyCollection,
                finDeCarga: false
            };
        },
        initialize: function () {
            _.bindAll(this);
        },
        ....
        loadData: function () {
                var that = this;
                sendRequest({
                    type: "post",
                    url: ..,
                    dataType: "xml",
                    data: { ... },
                    success: this.success
                });
        },
        success: function(data) {
            model = new ChildModel;
            that.get("mycollec").add(model);
        }

它可以在Firefox、Internet Explorer。。。但有时当代码准备好投入生产时,它在Chrome中会失败。我的意思是当代码被缩小时。一开始,我们认为这是一个同步问题,但在按数组更改所有集合后,它在其他不依赖于加载数据的集合中继续失败。总的来说,错误的行是这样的:this.get("mycollec").add(model);堆栈是下一个:

 TypeError: Cannot read property 'operaciones' of null
     at h.extend.get 
     at h.extend.set 
     at h.extend.add
     at g.Model.extend.addItem 
     at f.extend.cargarNodosIniciales

addItem方法是下一个(与文本错误无关):

addItem: function (item) {
     this.get("nodos").add(item);
},

所有的错误都与它为null的一些数据有关,但堆栈与错误文本无关。当代码被混淆,我们第一次检测到它时,错误是这样的:

无法读取null的属性1。

真正奇怪的是,当我更改数组的集合时(在该代码中,它将是mycollec:[]和push,而不是add。)错误不再出现,执行一直持续到另一个类似的集合指令。

我真的很害怕。这就像骨干集合被破坏了。它们有时工作得很好,在应用程序的其余部分中,它们从不失败。但它同样的部分(加载大量数据并添加大量html)破坏了主干,或者可能存在内存泄漏??

我真的很失落。我很抱歉,因为我第一次写问题时缺少信息。

提前非常感谢。。。我真的需要帮助

问题是您错误地定义了成功函数。您刚刚完成了函数成功,并实际全局定义它,而不是在Backbone.Model.extend参数中定义它

loadData:function(){...},
success:function(data){....},
success: this.success

触发成功回调时。它在视图上查找成功事件作为方法。但你一开始并没有定义它。您刚刚在localData的范围内创建了一个函数。。

应该是这样success : success

loadData: function () {
    var that = this;
    sendRequest({
        type: "post",
        url: ..,
        dataType: "xml",
        data: {...
        },
        success: this.success
    });
},
success: function (data) {
    model = new ChildModel;
    that.get("mycollec").add(model);
}

现在该方法可用于视图。因此success : this.success将适用于这种情况。

终于找到了解决方案@github的philfro已经在Backbone存储库中回答了我的问题https://github.com/jashkenas/backbone/issues/2701

这似乎只发生在chrome的版本28和29(测试版)中。在30版本中(canary)@philfreo说它有效。

他建议我们采取以下3种选择中的任何一种:+使用未优化的Backbonjs+使用Chrome 30代替以前的版本+在缩小之前在Backbonejs代码中应用补丁https://github.com/elasticsales/backbone/commit/ba6e681cb898f2596899c8079d327cdd9c2f33fc

另一种选择是混淆代码,不要缩小它。我把缩小的和模糊的代码做了一个漂亮的,之后我替换了源代码,它就工作了。我不确定谷歌关闭的选项是什么。但这是可能的。

补丁有效(第三种选择)!所以,如果有人犯了这个错误,我希望能帮助他。这是一个非常模糊的错误,可能需要很多时间才能找到解决方案。