一個很好的方式來組織一個小型的JavaScript應用程序

我基本上在尋找的是如果有更好的方式做到這一點，組織這和學習。這是我粘貼在這裏的代碼。想象一下，具有約50個類似綁定的1800行長的JavaScript文件。一個很好的方式來組織一個小型的JavaScript應用程序

我有一個基於Java EE的REST Api，用於基本的單頁應用程序。我使用jQuery，模板下劃線，jQueryUI自動完成和Blueimp的jQuery文件上傳。呈現的JSP是940行，其中包括用於模板的<script id="template"></script>，總共包含約630個DOM元素。

在普通計算機配置中，瀏覽器大約有70個事件是否非常昂貴？我應該重寫所有這些委託給一個容器元素嗎？除此之外，它不會有太大的增長。

在使用JSTL加載之前，jsp文件會與服務器上的大部分內容一起呈現，而不是加載，然後再執行ajax調用，因爲沒有太多動態內容在不斷更新。對於任何重大更新，我刷新頁面，其他明智的只是DOM附加。

我看到人們說10k行代碼被認爲是一個大的應用程序，所以我沒有在哪裏接近。我的所有模板都在<script id="tpl_xxx"></script>代碼內，它們預計會被插入到代碼中。我的假設是它更容易看到它們將被插入的模板，以便將來誰將對這些模板進行更改，而不必去尋找它們。 我應該把它們放在一個外部的.html文件中，然後在運行時加載它嗎？

隨着骨幹等所有這些MVC框架的出現，值得重新編寫這些代碼來坐在其中之一嗎？會有重大的好處嗎？

目前代碼在全局範圍（緩存dom元素，常量，其他緩存）中的一大堆變量相當混亂，它基本上銷燬JSLint，它放棄了大約6％的文件掃描。我意識到這是不好的，但我想知道它是否值得爲不是很大的代碼付出代價。它完全針對IE7 +（客戶端要求）進行了測試，並且工作正常，所以這完全是一個開發/維護/效率/編碼實踐問題。我希望我可以在這裏粘貼代碼，但是我不能，所以即使是我應該瞄準的含糊不清的建議也是很好的幫助。

的代碼基本上是以下X50與用戶的消息，模板名稱，緩存的DOM元素在全球範圍內一噸常數等

$('#contact-form').submit(function(e) { 
    e.preventDefault(); 
    var $frm = $(this); 
    var $submitBtn = $frm.find('a.submit-btn'); 
    var $errorBox = $frm.find('div.error'); 
    var frmSerialized = $frm.serializeObject(); 
    var validStatus = validateContact(frmSerialized); 

    $frm.find('input, select, textarea').bind("keydown change", function() { 
     $errorBox.hide(); 
    }); 

    if (validStatus == true) { 
     busyCursor('show', $submitBtn); 
     var jsonReq = JSON.stringify(frmSerialized); 
     $.post($frm.attr('action'), jsonReq, function(data) { 
      busyCursor('hide', $submitBtn); 
      if (data.status == ResponseStatus.SUCCESS) { 
       $('#contact-form-div').addClass('no-display'); 
       $('#contact-confirm').removeClass('no-display'); 
      } else { 
       if (data.status == ResponseStatus.ERROR) { 
        showError($errorBox, data.message); 
       } else { 
        showError($errorBox, UserMessages.serverException); 
       } 
      } 
     }); 
    } else { 
     showError($errorBox, validStatus); 
    } 
}); 
$('#submit-contact').click(function(e) { 
    e.preventDefault(); 
    $('#contact-form').submit(); 
});

來源

2013-01-13 narak

我不知道重構此代碼是否真的有必要，但是您可以避免使用全局名稱空間，並避免通過創建一些「類」來重複代碼 – aurbano

我用骨幹幾乎所有我的項目，但我會嘗試儘可能保持中立。我想你首先要問自己，你是否有時間和金錢來重寫應用程序？其次，你看到這個應用程序將來會增長嗎？如果您確實看到應用程序在不斷增長並且願意投資重寫，現在可能是最好的時機。

我將骨幹看作是構建我的應用程序的方式，而不是實際的框架。這當然不是自以爲是的，你可以在骨幹中做很多事情。習慣於在骨幹網上編寫應用程序可能需要一些時間和試驗和錯誤。

骨幹也不一定會減少你寫的代碼量。在你的情況下，你可能會發現你最終會寫更多的代碼。但是如果做得對，您將能夠在整個應用程序中重複使用模塊，並且將來您的應用程序將變得更容易維護。它還將提供結構，以便您的應用程序具有增長空間。

所以最後，重寫你的骨幹應用程序不應該掉以輕心。但是，如果您有時間投資學習框架，我認爲您不會失望。如果做得對，你會減輕你上面列出的大部分問題（無賴事件& global vars），再加上你將會看到一個易於維護，成長和引以爲榮的應用程序。

來源

2013-01-14 06:37:09 TYRONEMICHAEL

我要去了解這一點。我可能不需要使用Backbone模型，因爲我沒有太多動態數據被AJAX插入到頁面中，但我可以肯定地使用視圖和路由器。綁定功能使用骨幹路由器哈希URL，然後只有標準鏈接去那些。看起來像一個很好的解耦方法...... sorta。 – narak

一個很好的方式來組織一個小型的JavaScript應用程序

回答

相關問題