如何在項目中組織JavaScript代碼以實現可維護性？

我主要是一名PHP開發人員，但最近我一直在玩大量的JavaScript，主要是在jQuery中。如何在項目中組織JavaScript代碼以實現可維護性？

問題是代碼變得越來越難以調試，這使得更難，因爲我有事件監聽器橫跨HTML。

該代碼處理AJAX調用和DOM操作。

2011-09-24 MrFoh

1）不要把內聯事件處理程序 – William

@Lime我也有與前$不工作常規的JavaScript的問題（文件）。就緒（） – MrFoh

這意味着你有三種類型的文件，HTML，CSS和JS的。

您不要混合任何HTML，CSS或JS。它們中的每一個都在它自己的文件中。

僅僅通過保持一切分離和從來沒有使用內嵌JavaScript或內聯CSS，你可以解決大部分代碼組織問題。

另一種技術是打包機和縮小器。

我所選擇的包的人browserify（JS）和less（CSS）

包裝商的意思是你把所有的代碼通過良好的設計分成多個文件/模塊。然後，因爲發送許多小文件很貴，所以使用構建時包裝程序將所有js轉換爲一個js文件，並將所有css轉換爲一個css文件。

至於JS本身，我傾向於更進一步並使用模塊加載器。 Browserify既是一個包裝器，也是一個模塊加載器。

模塊加載器意味着您可以定義小型模塊，並在需要時和需要時加載/需要它們。

我還實現事件驅動架構和mediator模式，以保持我的代碼高度鬆散耦合。人們可以進一步實施諸如blackboard system之類的東西，但我沒有親自嘗試過。

2011-09-24 22:54:19 Raynos

是的，這就是我跟隨，雖然我傾向於包括直接HTML成PHP文件，如果需要。 –

@ ProjectV1我不能說PHP，但直覺是這是不好的做法。 – Raynos

是的，它不是，也許我應該開始寫一些指導 –

您可能會考慮使用CommonJS「require」在許多文件中分隔javascript代碼，然後使用browserify或Webpack。另一種選擇是Cor，這是一種編譯爲專注於組織，清潔和開發體驗的JavaScript的語言。

2015-11-11 20:06:21

回答