本文翻譯自：Commonly accepted best practices around code organization in JavaScript [closed]
As JavaScript frameworks like jQuery make client side web applications richer and more functional, I've started to notice one problem... 隨着像jQuery這樣的JavaScript框架使客戶端Web應用程序更豐富，更實用，我開始注意到一個問題......
How in the world do you keep this organized? 你是如何保持這種組織的？
- Put all your handlers in one spot and write functions for all the events? 將所有處理程序放在一個位置併爲所有事件編寫函數？
- Create function/classes to wrap all your functionality? 創建函數/類來包裝所有功能？
- Write like crazy and just hope it works out for the best? 寫得像瘋了似的，只希望它能做到最好？
- Give up and get a new career? 放棄並獲得新的職業？
I mention jQuery, but it's really any JavaScript code in general. 我提到了jQuery，但它實際上是任何JavaScript代碼。 I'm finding that as lines upon lines begin to pile up, it gets harder to manage the script files or find what you are looking for. 我發現隨着線條開始堆積起來，管理腳本文件或找到你要找的東西變得更加困難。 Quite possibly the biggest propblems I've found is there are so many ways to do the same thing, it's hard to know which one is the current commonly accepted best practice. 我發現最大的問題可能是有很多方法可以做同樣的事情，很難知道哪一個是目前普遍接受的最佳實踐。
Are there any general recommendations on the best way to keep your .js files as nice and neat as the rest of your application? 是否有關於保持.js文件與應用程序其餘部分一樣美觀和整潔的最佳方法的一般建議？ Or is this just a matter of IDE? 或者這僅僅是IDE的問題？ Is there a better option out there? 那裏有更好的選擇嗎？
EDIT 編輯
This question was intended to be more about code organization and not file organization. 這個問題旨在更多地關注代碼組織而不是文件組織。 There has been some really good examples of merging files or splitting content around. 有一些非常好的合併文件或分割內容的例子。
My question is: what is the current commonly accepted best practice way to organize your actual code? 我的問題是：目前普遍接受的組織實際代碼的最佳實踐方法是什麼？ What is your way, or even a recommended way to interact with page elements and create reuseable code that doesn't conflict with each other? 您的方式是什麼，甚至是推薦的方式與頁面元素交互並創建不會相互衝突的可重用代碼？
Some people have listed namespaces which is a good idea. 有些人列出了名稱空間 ，這是一個好主意。 What are some other ways, more specifically dealing with elements on the page and keeping the code organized and neat? 還有什麼其他方法，更具體地說是處理頁面上的元素並保持代碼整潔有序？
#1樓
參考：https://stackoom.com/question/12JF/JavaScript中代碼組織的普遍接受的最佳實踐-關閉
#2樓
I use Dojo's package management ( dojo.require and dojo.provide ) and class system ( dojo.declare which also allows for simple multiple inheritance) to modularize all of my classes/widgets into separate files. 我使用Dojo的包管理 （ dojo.require和dojo.provide ）和類系統（ dojo.declare ，它也允許簡單的多重繼承）將我的所有類/小部件模塊化爲單獨的文件。 Not only dose this keep your code organized, but it also lets you do lazy/just in time loading of classes/widgets. 這不僅可以使您的代碼保持井井有條，而且還可以讓您懶惰/及時加載類/小部件。
#3樓
Check out JavasciptMVC . 查看JavasciptMVC 。
You can : 您可以 ：
split up your code into model, view and controller layers. 將代碼拆分爲模型，視圖和控制器層。
compress all code into a single production file 將所有代碼壓縮到單個生產文件中
auto-generate code 自動生成代碼
create and run unit tests 創建並運行單元測試
and lots more... 還有更多......
Best of all, it uses jQuery, so you can take advantage of other jQuery plugins too. 最重要的是，它使用jQuery，因此您也可以利用其他jQuery插件。
#4樓
For JavaScript organization been using the following 對於JavaScript組織一直在使用以下內容
- Folder for all your javascript 所有javascript的文件夾
- Page level javascript gets its' own file with the same name of the page. 頁面級別javascript獲取其自己的文件，其頁面名稱相同。 ProductDetail.aspx would be ProductDetail.js ProductDetail.aspx將是ProductDetail.js
- Inside the javascript folder for library files I have a lib folder 在庫文件的javascript文件夾中，我有一個lib文件夾
- Put related library functions in a lib folder that you want to use throughout your application. 將相關庫函數放在要在整個應用程序中使用的lib文件夾中。
- Ajax is the only javascript that I move outside of the javascript folder and gets it's own folder. Ajax是我移動到javascript文件夾之外的唯一的javascript，並獲取它自己的文件夾。 Then I add two sub folders client and server 然後我添加兩個子文件夾客戶端和服務器
- Client folder gets all the .js files while server folder gets all the server side files. 客戶端文件夾獲取所有.js文件，而服務器文件夾獲取所有服務器端文件。
#5樓
您可以將腳本拆分爲單獨的文件進行開發，然後創建一個“發佈”版本，將所有文件一起填入並運行YUI Compressor或其類似的東西。
#6樓
A few days ago, the guys at 37Signals released a RTE control , with a twist. 幾天前，37Signals的人發佈了一個RTE控件 。 They made a library that bundles javascript files using a sort of pre-processor commands. 他們創建了一個庫，使用一種預處理器命令捆綁javascript文件。
I've been using it since to separate my JS files and then in the end merge them as one. 我一直在使用它，因爲我將JS文件分開，最後將它們合併爲一個。 That way I can separate concerns and, in the end, have only one file that goes through the pipe (gzipped, no less). 這樣我可以分開關注點，最後只有一個文件通過管道（gzip，不能少）。
In your templates, check if you're in development mode, and include the separate files, and if in production, include the final one (which you'll have to "build" yourself). 在模板中，檢查您是否處於開發模式，幷包含單獨的文件，如果在生產中，則包括最後一個（您必須自己“構建”）。