萬變不離其宗：橫向切割業務/功能，縱向切割技術層。先從功能出發把 site.js 分成多個獨立的模組：如果 site.js 只用在一個頁面上，就按照頁面上的功能拆分成模組；又或者 site.js 用在多個頁面中，可以將 site.js 拆分成一對一頁面的入口小模組，這些頁面之間可能有相似的模組，這些模組也單獨拆出來，入口模組放置每個頁面單獨的邏輯，並組織共享的模組。以一個聊天工具為例，可以拆解為：

雖然是平行放置的，但元件是有層次的，小元件功能獨立，大元件負責初始化和組合小元件。再從技術架構的角度將程式碼劃分為多個層次：注意，並不是所有的專案都需要劃分層次，可以按照專案的大小和複雜程度劃分層次。專案越複雜就越需要注意將程式碼劃分成不同的層次，而簡單的專案就沒有必要了，甚至程式碼都不用放在不同的檔案。技術分層的方案就是 MVC，不管你或者流行的框架如何解讀 MVC，MVC 是一種以不變應萬變的架構。例如：components 就放著 View + Controller，View 和 Controller 相對來說聯絡是比較緊密的，可以放在一起：chat.js 主要用來初始化其他模組，繫結事件，處理事件，充當 Controllerstyle.css 樣式，沒什麼可說的view.html 放著模板，業務簡單的話，也可以去掉 view.html 直接在 chat.js 中拼接字串model：如果專案簡單這裡放的就是和伺服器端進行資料互動的部分，比如 Ajax 請求等。如果專案複雜的話，可以分成兩層 Ajax 請求和 Model（View Model 或者資料集中管理的地方）。這部分很可能在很多 component 都會用到，所以可以獨立。router：不多說，如果你的專案複雜到一定程度，有 router 的話，這是單獨放置的。單獨說說 component：一個模組基礎組成：config：配置，來自源全域性，或者來自於父元件state：自身的狀態，比如是聊天是通暢還是短線了，其他方法執行的過程中需要這些狀態來判斷進一步的操作bindEvents：可以把大堆大堆的 $ 選擇繫結事件的程式碼都放在這裡eventHandler：很多事件處理器modifyView：很多對檢視更改每個層都會有很多模組，這些模組又是按照業務/功能切分的。工具篇：切分原則都有了，工具的選擇也沒什麼難的。專案不復雜，不重要，模組拆下來之後也不多，那可以用像 RequireJS，Sea.js 這樣的載入器。主要就是處理下 JS 的模組化。直接擼了之後，壓縮下，也不用合併，就在線上跑著也沒啥問題。專案複雜，重要，模組多，那可以用用 browserify，使用 CommonJS，來組織程式碼（也可以繼續使用 RequireJS，生態和工具還可以）。上線的時透過工具做好合並壓縮。如果你採用的非常標準的模組化開發，即每個模組都有獨自的模板、Controller、樣式、圖片，那用 webpack 吧，webpack 的優勢就如它的名字一樣，不是 js bundle，不是js loader，是 webpack，即其他資源也可以幫你打包處理好，這對於全模組化開發來講就爽多了。不用想該怎麼組織除了 JS 之外的資源。