Javascript和jQuery文件結構

我創建了一個相當大的應用程序JavaScript和jQuery。但是，我的文件結構變得有點混亂！Javascript和jQuery文件結構

目前我有一個大的JS文件，其頂部的if ($('#myDiv').length > 0) {測試只在正確的頁面上執行代碼，這是一個好的做法嗎？

在同一個文件中還有普通JS函數和jQuery擴展的混合，例如$.fn.myFunction = function(e) {。

我也有看起來像這樣的代碼的幾個位：

function Product() { 
    this.sku = ''; 
    this.name = ''; 
    this.price = ''; 
} 
var myProduct = new Product; 

Basket = new Object;

我的問題是關於JavaScript的方面和jQuery項目良好實踐的指針。

來源

2011-03-04 Alan Whitelaw

代碼if ($('#myDiv').length > 0) {不是很好的做法。相反，使頁面特定的JS作爲函數，並在相應的頁面中執行它們。就像這樣：

var T01 = function(){ 
    // JS specific to Template 01 
}; 
var T02 = function(){ 
    // JS specific to Template 02 
};

模板01的HTML頭：

<script type="text/javascript"> $(T01); </script>

來源

2011-03-04 10:28:32 Simeon

由於申報你的身體像

<body class="mcv:controller/action">

並啓動應用程序，我將使用功能容器在未來 – 2011-03-04 16:01:31

是的，它是很好的做法，把儘可能多的代碼到一個單獨的JS文件，因爲這會再之前的傳輸，因此速度被壓縮下載時間。但是，不，你不應該有代碼看起來像

如果（$（ '＃myDiv'）。長度> 0）{

每一頁上。將你的JS代碼分解成可管理的函數，並在需要時將這些函數調用。

我沒有看到在同一個文件中混合使用JS和jQuery函數的問題。

來源

2011-03-04 10:28:34 cusimar9

分割你的代碼多個文件更適合組織，但下載時間更糟糕。每個額外的JavaScript文件都是一個額外的HTTP請求，所以這實際上會增加下載時間。更簡潔的代碼的好處可能大於放慢速度，而且如果出現問題，您總是可以找到將生產中的文件合併的方法。另外，我不認爲多個文件中的代碼可以被縮小得比一個文件中的代碼更多。 – jergason 2011-03-04 10:53:21

當然，你應該結合服務器上的js文件，這裏有很多可用的例子 – cusimar9 2011-03-04 22:33:28

一致性是黃金法則。

你可以來回討論設計模式，但是如果你想要有易於維護的代碼，讓新手進入並快速得到概覽，那麼最重要的部分，無論你選擇哪種設計模式，都應該有一個一致的代碼庫。

這也是最難做的事情 - 保持代碼庫清潔和一致可能是作爲程序員可以做的最困難的事情，尤其是作爲一個團隊。

來源

2011-03-04 10:31:49

當然，我可以給你的第一個技巧是在他們自己的源文件中分開jQuery擴展。您可以隨時使用縮小工具一起提供所有服務，因此您不必擔心性能。

關於代碼優爾一提，它可以簡化爲

var Product = { 
    sku: '', 
    name: '', 
    price: '' 
} 

var myProduct = objectCopy(Product); 
var Basket = {};

提供你寫一個簡單的objectCopy功能，通過對象自身的屬性，只是它們複製到一個新的對象循環（你可以做一個淺或根據您的需要進行深層複製）。

最後，如果你認爲你的代碼開始變得混亂，你可能想學習一些模式來組織JS代碼，如module pattern。或者，如果您熟悉在後端執行此操作，則可能需要按照MVC模式組織應用程序。 個人廣告 - 我自己寫了一個tiny library這有助於以這種方式組織您的代碼。同樣的任務還有很多其他的庫，通常還增加其他功能。

如果你遵循MVC模式，你的網頁實際上對應於一些控制一些動作，並且你可以只在您的文檔的頭部像

<script>someController.someAction()</script>

呼叫啓動它，因此去除需要手動檢查#myDiv。如果你用我的圖書館MCV，這將是足以與

$(document).ready(function() { 
    mcv.autostart(); 
});

來源

2011-03-04 10:37:25 Andrea

Javascript和jQuery文件結構

回答

相關問題