jQuery代碼組織和性能

Question

在對這個主題進行了一些研究之后，我一直在嘗試使用模式來組織我的jQuery代碼（例如，Rebecca Murphy在jQuery會議上做過這方面的演示 ）。

昨天我檢查了（顯示）模塊模式。 結果看起來有點像我認為的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();
});

最后我有幾個模塊。 一些自然包括“私有成員”，在這種情況下，它意味着變量和/或函數，這些變量和/或函數僅對該模塊中的其他函數很重要，因此不會在return語句中結束。

我認為將模塊中的部分連接（與搜索有關的所有內容）組合在一個模塊中是有意義的，給出了整個結構。

但在寫完這篇文章之后，我讀了John（Resig）的一篇文章 ，在那里他還寫了關於模塊模式的性能：

“使用一堆原型屬性實例化一個函數是非常非常快的。它完全破壞了模塊模式，類似於水中。因此，如果你有一個經常訪問的函數（返回一個對象），你想要的人們要與之交互，那么將對象屬性放在原型鏈中並實例化它對你有利。這里是代碼：

// 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}對象創建每個實例而創建的對象效率低於使用具有Class.prototype.name= member new Class創建的對象。 在原型的情況下， member值被共享，從而產生更輕量級的實例。

在您的示例中， MNS是一個單例，因此通過原型共享成員沒有任何好處。

我不確定在上面的例子中是否創建了閉包

是的。 即使外部函數中沒有定義變量，仍然會為外部函數創建一個LexicalEnvironment和scope對象，並在其中綁定this和arguments 。 一個聰明的JS引擎可能能夠優化它，因為每個內部函數必須用自己的副本隱藏this和arguments ，但我不確定任何當前的JS實現是否真的這樣做。

在任何情況下，性能差異都應該是不可檢測的，因為您沒有在參數中添加任何重要內容。 對於一個簡單的模塊模式，我認為沒有任何傷害。

此外，您更喜歡哪些工具獲取有關執行時間，內存和CPU使用情況的信息？

開始的地方只是在for循環中執行代碼10000次，看看有多大的new Date().getTime()已經獲得了多少次，在你可以掌握的多個不同瀏覽器上執行了幾次。

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

（這應該做什么？目前它會將span的HTML讀入一個新的String ，只用@取代[ @ ]的第一個實例，並返回一個新的String值。它不會改變現有的DOM中的內容。）

Answer 2

你有多少Javascript？ 根據我的經驗，在頁面上有大量 Javascript代碼的網站上，性能問題通常來自實際執行操作的代碼。 一般來說，問題源於嘗試做太多事情，或者試圖做一些非常糟糕的事情。 一個例子是嘗試將諸如綁定處理程序之類的東西用於表行（大表）中的元素，而不是使用像“live”這樣的東西。

我的觀點是，諸如模塊或功能或其他任何組織方式之類的事情幾乎肯定不會在您的頁面上造成任何類型的真實性能問題。 是什么激勵你去解決所有這些麻煩？