開始使用模塊和模塊化前端開發

每個人都知道並喜歡樂高積木。 當我還是個孩子的時候，我就迷上了樂高積木，今天我仍然喜歡它們。 你可以用各種方式用各種樂高積木組裝你的玩具，一次一件。 然後，您可以重新開始並用這些相同的部件構建不同的玩具。 可能性是無止境。

網站上的模塊很像樂高積木。 將模塊視為樂高積木，使您能夠構建您的網站。 當您以正確的方式將它們連接在一起時，它們就會形成網頁。 要構建像樂高積木這樣的網站，您必須將網站視為獨立模塊的集合。 本文將幫助您在前端開發和設計中做到這一點。

模塊拼貼

當進入一個項目的設計階段時，我傾向於通過組裝設計靈感拼貼和模塊拼貼來開始。 這是一個很像 Dan Mall 的過程，他將這些拼貼畫設計為後壓縮時代的可交付成果。 靈感拼貼是我呈現給客戶的屏幕截圖集合，只是為了大致了解我們前進的視覺方向。它們只是我和客戶都喜歡的網站的屏幕截圖。

一旦我們確認我們在風格方面處於同一頁面上，我就可以進入我的圖形編輯器（我更喜歡 Sketch）並創建模塊拼貼畫。 這些拼貼畫是最常用模塊的集合——按鈕、表單、標題、段落、列表、圖片等。 模塊拼貼讓我可以快速創建網站的外觀和感覺。

這是我最近的一個模塊拼貼的一部分，一個我在項目開始時在 Sketch 中設計的按鈕示例：

也許您想知道靜態合成和向客戶展示像素完美設計何時發揮作用。 他們沒有——我在我的過程中幾乎完全跳過了這些。 跳過這部分過程使我能夠在項目和代碼原型的早期進入代碼（我很快就會得到這些），或者換句話說，在瀏覽器中進行設計。 以下是在瀏覽器中進行設計的一些優點：

• 瀏覽器是網站的自然環境，堅持圖形編輯器中的想法可能會適得其反。 在瀏覽器中測試和做出設計決策是很自然的。 你以前聽過它，你會再次聽到它——這不是關於它的​​外觀，而是關於它是如何工作的。

• 靜態模擬與您在將它們翻譯成代碼後最終在瀏覽器中獲得的內容之間總會存在設計不一致。 為避免這些不一致，請跳入代碼編輯器和瀏覽器來解決實際的設計問題。

• 靜態組合可能無法傳達正確的信息。 一旦你整合了交互性，外觀和感覺就會有很大不同——比如懸停狀態、過渡和動畫。

• 與其花幾個小時為幾個分辨率設計幾個靜態模型，我可以通過儘早編寫代碼來節省大量時間。 調整 CSS 使我能夠在各種設備（智能手機、平板電腦等）上快速向客戶端演示更改和響應方面。

因此，請節省時間並打開您的代碼編輯器和瀏覽器以儘早開始創建 UX。 根據我的經驗，大多數客戶會在我們繼續編碼之前要求一兩個頁面的完整模型，這完全沒問題。 對客戶來說，對未來的設計有一個很好的認識是很重要的。 我通常使用 InVision，它是跟踪早期模型、更改、評論等的好工具。 但是，對於客戶來說，了解 Sketch 和 InVision 不會讓他們走得太遠非常重要。

構建前端開發模塊

一旦客戶對我設計的模塊拼貼和模型感到滿意，我就可以開始編碼並定義這些元素的真實外觀和感覺。

模塊化設計與迭代過程中的模塊化開發交織在一起。 我編寫了一個模塊，然後在瀏覽器中試用它以查看它是如何工作的，然後在需要時進行迭代。 同樣，這個過程很像建造樂高積木——你基本上同時設計和開發，並嘗試不同的變化，直到你感覺良好為止。

我經常從構建一些簡單的東西開始開發模塊，比如一個按鈕。 想像一下，您正在自己構建一個，您需要編寫一個橙色按鈕，通常用於聯繫表格。 以下是您可能想出的：

 .submit-button { background: orange; color: #fff; padding: 10px 20px; font-size: 16px; }

 <a href=“#” class=“submit-button”>A link</a>

很簡單，對吧？ 您將 .submit-button 類應用於您的 HTML，這將解決您當前的問題。 現在，當您需要創建一個新按鈕時會發生什麼，就像那個按鈕一樣，但背景顏色為藍色？ 您可能會復制那個確切的類，然後更改類名和背景顏色。 又快又髒。 現在，假設您需要使用相同的按鈕，但背景為橙色。 你可以看到這是怎麼回事——你最終可能會重複大量的 CSS。 在一個超小的項目上，這可能不會成為一個真正的問題，但在更大的項目上它可能會。 在不知不覺中，您的 CSS 變得臃腫且難以維護。

如果您曾經開發過一個中型到大型項目，那麼您無疑會遇到相當多的頭痛。 這些可能是由以下任何原因引起的：

• 混亂、不一致、難以掃描和理解的代碼。
• 臃腫的代碼和帶有大量重複的 XXL CSS 文件。
• 難以維護的代碼。
• 缺乏結構和皮膚的分離。

別擔心，你並不孤單。 我敢打賭，所有前端開發人員都會不時遇到這些痛苦的問題，而且可能更多。 我可以肯定地說，過去我有很多項目遇到過所有這些典型問題。

避免或最小化這些問題的一種方法是以模塊化方式構建。

模塊化按鈕

如何以模塊化方式編寫該按鈕？ 模塊化方法是編寫可以重用的代碼。 記住那些樂高積木，它們可以重新使用和重複使用。

 .button { padding: 10px 20px; font-size: 16px; } .button-orange { background: orange; color: #fff; }

 <a href=“#” class=“button button-orange”>A link</a>

我們所做的是巧妙地分離樣式。 .button 類包含項目中每個按鈕使用的樣式，因此您不必重複它。 .button-orange 類僅使用與橙色按鈕相關的樣式。 您將對所有其他按鈕執行相同的操作並定義它們的背景和文本顏色。

您的按鈕模塊最終可能由幾個獨立的按鈕組成，隨時可以在需要時使用。

更複雜的東西呢？

您可能需要的每個其他組件都遵循相同的原則。 目的是創建獨立元素的模塊，獨立於其他模塊。 組合後，這些模塊將形成模板，您只需根據需要重複使用這些模塊並努力完成您的設計。

對於模塊化前端開發的進一步閱讀，我強烈推薦 SMACSS，這是我傾向於在所有項目中使用的架構，無論大小。

請記住，模塊化過程都是關於構建、測試和迭代的。 一個模塊首先在您的編輯器中生成，然後在瀏覽器中進行測試，然後在需要時進行迭代。 必要時重複該循環。

讓客戶參與

不要忘記客戶的需求——他們希望隨時了解情況並確認他們的錢物有所值。 這個開發過程的美妙之處在於客戶可以成為您團隊的活躍成員。 您可以安全地向他們展示模塊，他們可以忽略開發過程並隨時投入以使產品更好。 在看到真正的進展之前，他們不必等待靜態組合完成或達到里程碑。 如果您花一些時間向您的客戶解釋模塊的工作方式，他們將對設計過程和構建它們所花費的時間有更好的理解和欣賞。

我通常向客戶展示模塊的方式很像 Bootstrap 的做法——設置一個獨立的模塊及其代碼是讓所有設計人員、開發人員和客戶參與到流程中的好方法。

使用您構建的模塊作為頁面的構建塊。 對於您的索引頁面，您可以將導航模塊放在頂部，然後放置一個英雄模塊，然後放置一些內容模塊，然後將頁腳放在底部。 在不知不覺中，您已經有了一個 HTML 原型頁面。 但究竟什麼是原型？ 我一直很喜歡 Leah Buley 在她的巨著《The User Experience Team of One》中對原型的定義：

一旦實施，設計應該如何表現和操作的功能性或半功能性示例。

通過構建原型，這正是您將在項目的早期階段得到的——一個半功能的網站。 在靜態模型和 InVision 的不足之處，HTML 原型表現出色。 原型為您的客戶提供了完美的響應式交付物。 一旦客戶對您的原型的外觀和感覺感到滿意，您需要做的就是對其進行潤色，直到它按需要的方式工作。 構建、測試、迭代。

重用構建塊

模塊和原型將使您能夠重用當前項目的代碼，但也適用於未來的項目。 調整上一個項目中的模塊可以節省大量時間——每個項目中需要的模塊通常是相似的。 我有一個經常重複使用的大型模塊庫：選項卡、導航菜單、按鈕、麵包屑、表單、表格、分頁、列表等。雖然這些模塊的代碼在所有項目中並不完全相同，但其中有很多可以重複使用，為我節省了大量的開發時間。 我對您的建議是也為自己創建可重用的模塊。 查看 BASSCSS、Pure 和 Refills 以獲得靈感。

如果切換到模塊化設計和開發需要時間，請不要灰心。 當然，如果模塊化原則對您來說是新的，它們將需要對您的設計和開發過程進行調整，但這種改變可能被證明是值得的。

我在本文中介紹的模塊化方法和技術只是皮毛。 儘管如此，我真誠地希望這篇文章對您有所幫助，並激發您深入了解模塊化設計和開發。