javascript - jQuery 代码组织和性能

Question

在对这个主题做了一些研究之后，我一直在试验很多模式来组织我的 jQuery 代码(例如，Rebecca Murphy 在 jQuery 大会上就此做了 presentation)。

昨天我检查了(揭示)模块模式。结果看起来有点像 YUI我认为的语法:

//global namespace MyNameSpace
if(typeof MNS=="undefined"||!MNS){var MNS={};}

//obfuscate module, just serving as a very simple example
MNS.obfuscate = function(){
    //function to create an email address from obfuscated '@'
    var email = function(){
        $('span.email').each(function(){
            var emailAddress = $(this).html().replace(' [ @ ] ','@');
            $(this).html('<a href="mailto:' + emailAddress + '">' + emailAddress + '</a>');

        });
    };    
    return {
        email: email
    };    
}();

//using the module when the dom's ready
jQuery(document).ready(function($){
    MNS.obfuscate.email();
});

最后我有几个模块。有些自然包含“私有(private)成员”，在这种情况下，这意味着变量和/或函数仅对该模块中的其他函数很重要，因此不会出现在 return 语句中。

我认为将我的代码的连接部分(例如与搜索有关的所有内容)组合在一个模块中是有意义的，给出了整个事物的结构。

但在写完这篇文章后，我读到一篇 article由 John (Resig) 撰写，他还在其中撰写了有关模块模式性能的文章:

“用一堆原型(prototype)属性实例化一个函数非常、非常、快。它完全打破了模块模式，以及类似的模式。因此，如果你有一个经常访问的函数(返回一个对象)您希望人们与之交互，那么将对象属性放在原型(prototype)链中并实例化它对您有利。代码如下:

// Very fast
function User(){}
    User.prototype = { /* Lots of properties ... */ };

// Very slow
function User(){
    return { /* Lots of properties */ };
}

(John 提到他“本身”并不反对模块模式——只是想让你知道:)

然后我不再确定我的代码是否朝着正确的方向发展。问题是:我并不真的需要任何私有(private)成员，而且我认为暂时不需要继承。我现在想要的只是一个可读/可维护的模式。我想这在一定程度上归结为个人偏好，但我不想以具有(相当严重的)性能问题的可读代码结束。

我不是 JavaScript 专家，因此在性能测试方面更不是专家。所以首先，我真的不知道 John 提到的事情(“您希望人们与之交互的经常访问的函数(返回一个对象)”，许多属性等)在多大程度上适用于我的代码。我的代码与之交互的文档并不大，只有 100 或 1000 个元素。所以也许这根本不是问题。

但我想到的一件事是，不仅仅是拥有

$('span.email').each(function(){
    var emailAddress = $(this).html().replace(' [ @ ] ','@');
    $(this).html('<a href="mailto:' + emailAddress + '">' + emailAddress + '</a>');
});

(在 domready 函数内)，由于使用了模块模式，我创建了两个“额外”函数，混淆和电子邮件。创建附加功能需要花费一些时间。问题是:在我的案例中它可以衡量吗？

我不确定在我上面的示例中是否创建了闭包(在 jQuery 论坛上的一篇有趣的帖子中我读到了以下内容:“关于内部函数是否创建闭包存在哲学争论，如果它不在外部函数的变量对象上引用任何内容...")，但我的真实代码中确实有闭包。即使我不认为我在那里有任何循环引用，我也不知道这会在多大程度上导致高(呃)内存消耗/垃圾收集问题。

我真的很想听听您对此的意见，并且可能会看到您的代码示例。此外，您更喜欢使用哪些工具来获取有关执行时间、内存和 CPU 使用率的信息？

Answer 1

I also don't think I need inheritance for the time being

的确如此。这并不真正适用于将模块用作命名空间。这是关于类实例类似物。

通过从全新的 {name: member} 对象创建每个实例来创建的对象比使用 new Class 和 Class 创建的对象效率低。 prototype.name=成员。在原型(prototype)情况下，member 值是共享的，从而产生更轻量级的实例。

在您的示例中，MNS 是单例，因此通过原型(prototype)共享成员没有任何好处。

I'm not sure if a closure is created in my example above

是的，是的。即使在外部函数中没有定义变量，仍然会为外部函数创建 LexicalEnvironment 和作用域对象，其中绑定(bind)了 this 和 arguments。一个聪明的 JS 引擎可能能够优化它，因为每个内部函数都必须用它们自己的副本隐藏 this 和 arguments，但我不确定其中的任何一个当前的 JS 实现实际上是这样做的。

在任何情况下，性能差异都应该是检测不到的，因为您没有在参数中添加任何重要内容。对于简单的模块模式，我认为没有任何害处。

Also, which tools do you prefer to get information on execution time, memory and CPU usage?

开始的地方只是在 for 循环中执行代码 10000 次，然后查看 new Date().getTime() 有多大，在尽可能多的不同对象上执行多次您可以使用的浏览器。

$(this).html().replace(' [ @ ] ','@');

(这是做什么用的？目前它会将 span 的 HTML 读入一个新的 String，仅替换 [ @ ] 的第一个实例用@，并返回一个新的String值。它不会改变DOM中已有的内容。)