2

我正在通过 Javascript 构建一个很大程度上基于浏览器的 Web 应用程序。

当我需要一个位于单独文件中的模块时，我不知道这三种方法中哪一种对于 javascript 引擎占用的内存是最好的：

思路一，在extend方法中赋值变量

function (ContactCollection , ItemCollection, ContactListView) {
    var ContactExample = function (inst) {
         // Wild examples of possible uses :

         this.collections.contact.each(function(model) {
             // do something with each model
         });

         this.collections.item.on('reset', this.resetItems, this);

         this.$el.remove().append(this.view.render().el);
    };

    jQuery.extend(true, ContactExample.prototype, {
        'collections': {
            'contact': ContactCollection,
            'item': ItemCollection
        },
        'view': ContactListView,
        '$el': jQuery('#somediv'),
    }, ContactExample);

    return new ContactExample();
};

思路2，在实例化方法中赋值变量：

function (ContactCollection , ItemCollection, ContactListView) {
    var ContactExample = function (inst) {
         // Wild examples of possible uses :

         inst.collections.contact.each(function(model) {
             // do something with each model
         });

         inst.collections.item.on('reset', this.resetItems, this);

         inst.$el.remove().append(this.view.render().el);
    }

    jQuery.extend(true, ContactExample.prototype, {
        '$el': jQuery('#somediv')
    }, ContactExample);

    return new ContactExample({
        'collections': {
            'contact': ContactCollection,
            'item': ItemCollection
        },
        'view': ContactListView
    });
};

想法3，只需在代码中使用它们，因为它们已经在函数范围内被引用：

function (ContactCollection , ItemCollection, ContactListView) {
    var ContactExample = function (inst) {
         // Wild examples of possible uses :

         ContactCollection.each(function(model) {
             // do something with each model
         });

         ItemCollection.on('reset', this.resetItems, this);

         this.$el.remove().append(ContactListView.render().el);
        }
    });

    jQuery.extend(true, ContactExample.prototype, {
        '$el': jQuery('#somediv')
    }, ContactExample);

    return new ContactExample();
});

什么（以及为什么）是在 javascript 内存引擎中处理变量的最佳方式。

谢谢您的回答

4

3 回答 3

1

您的三个选项的最低内存使用将是使用上下文变量（想法＃3），因为它消除了重复。另外两个将值复制到在该函数内部创建的第二个对象。这是背景：

JavaScript 中的一切都是一个对象，而对象在内部只是将字符串键与对其实际值的引用相关联的哈希图。这包括普通的局部变量；在内部，它们是不可见上下文对象的属性，该函数和其中定义的任何函数都可以访问该对象。使用 $.extend 与直接分配属性没有区别，因为 extend 函数只是围绕 for 循环的语法糖，它将属性从一个对象复制到另一个对象。

由于保留了函数的上下文（局部变量）对象以供其中定义的所有函数使用，因此您的选项的最低内存使用量将是不会将其复制到新的内部对象的选项。但差异会很小。

如果您真的想将内存使用量降至最低水平并编写更易于维护的代码，我建议您摆脱花哨（且难以调试）的上下文包装，并使用老式的 JavaScript OOP 方式对其进行编码: 使用定义在顶层或单个包装函数内的普通构造函数，该函数仅在页面首次加载时运行一次。这摆脱了重复的上下文。使用“new”关键字调用它，并将数据作为分配给“this”的参数传入。在构造函数内部进行初始化，仅此而已。

将所有方法函数放在它的原型上，然后将其用作普通、普通、简洁的 JavaScript 对象。

https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript

于 2013-04-11T05:35:54.680 回答
0

你为什么要使用 $.extend 呢？只需创建一个实例并分配属性：

var c = new ContactExample();
c.$el = $('#somediv');

内存不会成为问题 - 而是专注于对 DOM 元素 (#somediv) 的引用，这可能会在以后引起麻烦。

于 2013-04-08T14:26:37.677 回答
0

  • 常数

    • 如果您在函数范围之外不需要它们，请使用普通变量。

    • 如果您在函数范围之外需要它们，则将它们放在构造函数中。

  • 实例变量（随每个实例而变化）

    • 对于您知道每个实例将具有不同值的属性，请在构造函数中使用正确的类型声明它们，以便可以将它们优化为与构造函数关联的静态类型。

    • 对于在所有对象之间共享的属性（如方法），请使用原型。

    • 对于更有可能保持默认值的属性，如果你想要访问速度，你应该在构造函数中声明它们，但是如果你想使用更少的内存，你应该把默认值放在构造函数上并且只添加一个属性如果它与默认值不同，则传递给该对象。

于 2013-04-10T14:04:32.500 回答