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();
});

最后我有几个模块。有些自然包含“私有成员”，在这种情况下，它意味着变量和/或函数，这些变量和/或函数对于此模块中的其他函数只有重要性，因此不会在返回语句中结束。

我认为将模块中的部分代码（与搜索有关的所有内容）组合在一个模块中是有意义的，给出了整个结构。

但写完这篇文章之后，我读了约翰（Resig）的article，他也写了关于模块模式的性能的文章：

“使用一堆原型属性实例化一个函数是非常非常快的。它完全破坏了模块模式，类似于水中。因此，如果你有一个经常访问的函数（返回一个对象）你希望人们与之交互，那么将对象属性放在原型链中并实例化它对你有利。这里是代码：

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

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

（约翰提到他并不反对模块模式“本身” - 只是为了让你知道:)。

然后我不确定我是否正在使用我的代码进入正确的方向。问题是：我并不是真的需要任何私人成员，我也认为我暂时不需要继承。我现在想要的只是一个可读/可维护的模式。我想这可以归结为个人偏好，但我不想最终得到具有（相当严重）性能问题的可读代码。

我不是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

我也认为我暂时不需要继承

事实上。这并不适用于将模块用作命名空间。它是关于类实例的类比。

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

在您的示例中，MNS是一个单身人士，因此通过原型共享成员没有任何好处。

我不确定在上面的示例中是否创建了闭包

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

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

另外，您更喜欢哪些工具获取有关执行时间，内存和CPU使用率的信息？

开始的地方只是在for循环中执行代码10000次，看看有多大new Date().getTime()已经得到了多少次，在你可以掌握的多个不同浏览器上执行了几次。

$（this）.html（）。replace（'[@]'，'@'）;

（这应该做什么？目前它会将跨度的HTML读入新的String，只用[ @ ]替换@的第一个实例，并且返回一个新的String值。它不会更改DOM中的现有内容。）

Answer 2

你有多少Javascript？根据我的经验，在页面上具有 lot 的Javascript代码的网站上，性能问题通常来自实际做事情的代码。一般来说，问题源于尝试做太多事情，或者试图做一些非常糟糕的事情。一个例子是尝试将诸如绑定处理程序之类的东西用于表行（大表）中的元素，而不是使用像“live”这样的东西。

我的观点是，诸如模块或功能或其他任何组织方式之类的事情几乎肯定不会在您的网页上造成任何形式的真实性能问题。是什么激励你去解决所有这些麻烦？

jQuery代码组织和性能

2 个答案: