在目前的程式設計開發的教學中，大家往往關心的是語言、語句、物件等概念和編寫方法，卻往往忽視了開發思想的構建。接下來的文章中，我會向大家介紹一些重要的開發思想。不過，這些思想實際上並不僅僅屬於開發，還屬於其他的方面，所以對於非開發者而言，也很重要。

這個文章中，我將介紹的是：分離與模組化。

從課設報告開始

某一堂課的期末作業是以小組為單位，交一份關於開發管理資訊系統的課程設計報告。宿舍裡面的四個人正好組成一個小組，如何完成這次課程設計報告呢？

大家最容易想到的解決方案就是：每個人負責報告的某部分。比如：A負責寫可行性分析，B負責寫系統分析，C負責寫系統設計，D負責寫系統實施。然後把大家寫的各部分合並起來。當然，這是理想情況，實際上一些部分需要在其他部分完成之後才能進行。

4個部分

這就是團隊合作，是分離與模組化的一個典型的例子。在這裡，我將這兩個詞放在一起，是因為：“分離”如果不能達成模組化，那麼它毫無意義；為了實現“模組化”，分離是必需的。上面的例子中，我們將一份課程設計報告分離成了可行性分析、系統分析、系統設計、系統實施四大模組，每個模組互相獨立，有著自己的功能，卻又是整體的一部分，與其他模組之間存在關聯。

在生活中，這樣的例子十分多見，如：電腦的硬體分成了CPU、主機板、記憶體條、硬碟等可插拔的元件；生產線以模組為單位進行各個工序的處理；一套健身流程由多個子動作按規律裝配而成。

Keep上的某個訓練

人們運用分離與模組化的原因並不是單一的。寫報告中的分離與模組化，是為了平衡工作量、減輕負擔；電腦硬體的分離與模組化，是為了能夠較為方便地更換硬體，方便電腦的組裝、升級與維修，方便個性化定製；生產線中的分離與模組化，是為了方便維修更換，能夠在一個工序出現異常時，將對其他工序的影響降到最低；健身中的分離與模組化，是為了方便教學、充分發揮各子動作的優勢，讓健身更加高效。雖然具體原因各不相同，但是總的來說，無非是為了提高效率、方便安裝、更換與定製、減少單個問題對整體造成的影響。

南京LG化學工廠更換流水線上的裝置

開發中的分離與模組化

在開發中，這個情況更為多見了。

最顯而易見的例子是網頁製作中，內容（HTML）、樣式（CSS）與動作（JS）的分離。

我們的“電子商務網站開發與建設”的課程設計中，由於我底子比較好，就給很多同學提供了幫助。我在寫程式碼的時候比較注重分離的思想，開發出來的網站還算不錯，後期修改起來也挺容易。但是其他同學的就不一樣了，改他們的程式碼對我來說顯得異常艱難。

樣式與內容分離

我看到有很多同學把樣式寫在標籤裡面，如：

（這是我拿自己寫的程式碼改的，那些同學寫的更加慘不忍睹）

這會讓標籤變得非常長，而且對於一些要經常使用的元件也這麼寫，會讓樣式的調整變得相當困難。

解決方法就是：除非確有必要放在標籤裡面，將關於樣式的內容全部從標籤裡面分離開來，放在一起，在原來的位置以對應的class或id屬性替代，當然也可以充分利用CSS的選擇器標識需要應用樣式的元素，如：

至於樣式放在哪裡，有兩種選擇：一是放在放在style標籤中，二是放在一個單獨的CSS檔案中，在HTML中用link標籤引入。

樣式與內容分離的兩個方法

我推薦放在單獨的CSS檔案的做法。為什麼呢？

第一，放在單獨的CSS檔案中，能夠讓程式碼看起來更加簡潔。

第二，如果有不同網頁的一些元件需要使用同樣的樣式，就可以只寫一遍程式碼，而不用每個網頁寫一遍樣式，修改起來也非常方便。

通常情況下，一批網頁中，有樣式相同的地方，有不同的地方。我們將公用的樣式放在一個或多個CSS檔案裡面，將自有的樣式放在另一個CSS檔案裡面，在HTML檔案裡面引用公用的樣式和自有的樣式就可以了。這就是樣式的模組化。

樣式的模組化

動作與內容分離

同樣的情況也可以適用於動作。

我在看同學的程式碼的時候經常見到這樣寫動作：

（這已經非常簡化了，有很多人都是樣式、動作寫在標籤裡面的，程式碼不堪設想）

雖然這樣寫可以執行，但是程式碼的可讀性、可修改性明顯下降了。如果我來寫，會這樣寫：

對了，和樣式類似，最好把動作單獨放到一個JS檔案裡面，在HTML檔案中用script標籤引入。

當然，你也可以這樣寫JS：

如果函式需要重複使用，這種情況顯然更好。

和CSS類似，這樣分開寫的方法，也可以做到模組化。

樣式、動作的模組化

簡而言之，這樣寫的最大的好處就是方便自己看程式碼、寫程式碼、改程式碼，其次還可以方便他人——由於檔案可複用，傳輸的流量也能夠大幅減小。

不僅僅是網頁開發

我們將有著一定功能、需要經常複用的元件從程式中分離出來，就構成了一個模組。我們在寫其他程式的時候，就可以匯入、使用這些模組，而不需要複製冗長的程式碼，不需要考慮重名等頭疼的問題。Python和JS最近發展迅猛，有一個很重要的原因就是有著大量的第三方模組支援，開發者像搭積木一樣寫程式碼，大大提高開發效率，也節省了大量的時間和精力。

Ant Design Pro中一例

學開發的人經常聽到一個架構模式：MVC，即模型（Model）、檢視（View）、控制器（Controller）的分離。還有MVP，即模型、檢視、展示器（Presenter）的分離；MVVM，即模型、檢視、檢視模型（View Model）的分離；還有前後端分離。它們都是開發行業中，分離與模組化的典範，與語言無關，許多語言都可以使用這樣的模式開發專案。

但是，我們往往看不出它們之間的差別，畢竟模式太像了。不過，我們只要記住，它們都是為了方便開發而生的。

我們拿MVC來舉例子。人各有所長，如果一個專案把模型、檢視、控制器都放在一起，不加分離，那麼意味著如果一個小組的所有人都需要精通這三個方面的知識，才能完成、維護專案。如果分離，小組裡面每個人負責自己擅長的部分——有人擅長圖形介面的編輯、有人擅長資料模型的搭建、有人擅長邏輯操作——大家不需要對這三樣事物都精通，只需要精通自己最擅長的一項事物就行了。這樣也能大幅減少學習時間，提高團隊開發效率。其他的模式也差不多，萬變不離其宗。

分離與模組化還有一大優點：不同的開發者可以使用不同的語言完成一個專案。前面也說過，人各有所長，你精通的語言別人可能一竅不通，別人精通的語言可能你也一竅不通。但是，如果讓專案之間各個部分分離，每個人負責特定的模組，不同語言寫的模組使用相同的格式（如JSON）傳遞資料，照樣也能出色地完成任務。

總之一句話，“

上帝的歸上帝，凱撒的歸凱撒

”。不管是在開發中，還是在生活中，分離與模組化都是重要的思想。