js拆分字符串？

萬變不離其宗：橫向切割業務/功能，縱向切割技術層。先從功能出發把 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 之外的資源。