Javascript jQuery代码组织和性能

在对这个主题做了一些研究之后，我一直在尝试很多模式来组织我的jQuery代码（例如，Rebecca Murphy在jQuery会议上做了一个关于这方面的实验）

昨天我检查了（显示）模块模式。结果看起来有点像我认为的语法：

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

（John提到他并不反对模块模式“本身”——只是想让你知道：）

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

我不是JavaScript专家，因此在性能测试方面更不是专家。所以首先，我不知道John提到的东西（“频繁访问的函数（返回一个对象），你希望人们与之交互”，很多属性，等等）在多大程度上适用于我的代码。我的代码与之交互的文档并不庞大，包含100或1000个元素。所以也许这根本不是问题

但我想到的一件事是

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

$（'span.email'）。每个（函数（）{
var emailAddress=$（this.html（）.replace（“[@]”，“@”）；
$（this.html（“”）；
});

（在domready函数中），由于使用了模块模式，我创建了两个“额外”函数：模糊和电子邮件。创建附加函数需要一些时间。问题是：在我的情况下，它是否可以测量

我不确定在我上面的例子中是否创建了闭包（在jQuery论坛上的一篇有趣的帖子中，我读到了以下内容：“如果内部函数不引用外部函数的变量对象上的任何内容，是否会创建闭包，这是一场哲学上的辩论……”），但我在实际代码中确实有闭包。即使我不认为这里有任何循环引用，我也不知道这会在多大程度上导致高（er）内存消耗/垃圾收集问题

我真的很想听听你在这方面的意见，也许可以看看你的代码的一些例子。另外，您更喜欢使用哪些工具来获取有关执行时间、内存和CPU使用率的信息

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

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

通过从一个全新的

{name:member}

对象创建每个实例而创建的对象，其效率低于使用

new Class

和

Class.prototype.name=member

创建的对象。在原型情况下，

成员

值是共享的，从而使实例更轻

在您的示例中，

MNS

是一个单例，因此通过原型共享成员没有任何好处

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

是的。即使在外部函数中没有定义变量，仍然会为外部函数创建一个字典环境和范围对象，其中包含

this

和

参数

。一个聪明的JS引擎可能能够优化它，因为每个内部函数都必须用自己的副本隐藏

这个

和

参数

，但我不确定当前的JS实现是否真的做到了这一点

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

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

首先，只需在for循环中执行10000次代码，看看new Date（）的大小。getTime（）可以在尽可能多的不同浏览器上执行多次

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

---

（这应该做什么？现在它将把span的HTML读入一个新的

字符串

，仅将

[@]

的第一个实例替换为

@

，并返回一个新的

字符串

值。它不会改变DOM中的现有内容。）

您有多少Javascript？根据我的经验，在页面上有大量Javascript代码的站点上，性能问题通常来自实际执行任务的代码。一般来说，问题源于试图做太多的事情，或者试图做一些特别糟糕的事情。例如，尝试将处理程序绑定到表行（大表）中的元素，而不是使用“live”之类的东西

---

我的观点是，像模块或函数的组织方式之类的事情几乎肯定不会在页面上造成任何真正的性能问题。是什么促使你这么麻烦？

谢谢你的回答！我将不得不考虑一下它的主要部分，我想：）至于电子邮件功能：你当然是对的。我只是想要一个简单的exmaple，然后复制了一些东西到里面。我现在改变了，所以它会更有意义。谢谢你，尖头。我只是不满意jQuery的domready中有一堆函数。我想要一个模式，使阅读和维护代码更容易，为我自己和其他可能的工作。我对JS编程有一定的了解，知道一些关于jQuery/JS等的性能建议，但是关于模式对性能的影响有多大的问题要深入一些。所以约翰·雷斯格的文章让我好奇。我想我和大多数开发人员一样：我想要进步…：）是的，这很有道理。我在工作中所做的一切

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