學過網頁的朋友都知道，制作一個網頁離不開HTML、CSS和JavaScript技術。對于初學者來來說，掌握這3門技術就已經很不容易了，為什么前端為什么又要搞出來一個“組件化”開發的概念呢？組件化開發到底有什么好處，它具體又是如何實現的呢？

為了搞懂這些問題，我們來看看在近幾年中，前端技術是怎么發展的。

1.前端的崛起之路

在傳統的開發模式中，往往是把前端的網頁代碼和后端的程序代碼混合在一起，借助某種模板技術（如JSP、ASP、PHP）來在服務器端動態生成HTML頁面。

在這種開發模式下，網頁的每次改動都需要前后端人員共同參與才能完成，網站前后端的開發人員需要很大的溝通成本、協調成本。企業招人的時候，也不得不招一些既懂前端又懂后端程序員，來減少前后端開發人員的沖突。

例如，下面是一段JSP代碼，我們可以看到，前后端語言是混在一起的：

在這段代碼中，Java工程師不得不面對前端的HTML代碼，前端工程師也不得不面對JSP的<%@ %>、<jsp>這些語法。

那有沒有一種辦法讓前端和后端的代碼徹底分開呢？那就得依靠前端技術的進步了。現在流行的前后端分離的開發模式，就是讓后端只負責給前端提供數據，由前端負責整個頁面的模板渲染、數據填充以及交互邏輯。

前后端分離之后，人們發現前端已經不再是傳統意義上的網頁了，它甚至還可以做成一個手機應用，或者做成是微信小程序那樣的小型應用，它更接近于傳統的B/S（客戶端/服務器）架構，且仍然具備網頁輕量級、無需下載和安裝的優勢。

2.前端為什么要組件化開發

組件化的目的，是為了讓頁面中的各個部分可以被復用，以減少重復的代碼。另一方面，也可以更好地使團隊分工協作，讓不同的人負責編寫不同的組件。

前端頁面可以借助某種框架（如Vue.js、Angular、React）來實現組件化開發，使代碼更容易復用。此時，一個網頁不再是由一個個獨立的HTML、CSS和JavaScript文件組成的了，而是按照組件的思想將網頁劃分成一個個組件，如輪播圖組件、列表組件、導航欄組件等。將這些組件拼裝在一起，就形成一個完整的網頁了。

我們以京東商城首頁為例，它的頁面的各部分組件劃分如下圖所示。

3.傳統開發 VS 組件化開發

我們來對比一下“傳統開發”和“組件化開發”的區別。

在傳統開發中，項目的目錄結構一般是把HTML文件放在最外層，把CSS文件、JavaScript文件放在單獨的目錄中，如下圖所示：

組件化開發是需要借助某一種框架來實現的，這里我們以Vue.js框架為例。Vue.js把項目劃分成dist目錄和src目錄，其作用如下：

01

src目錄表示源碼目錄，它存放編譯前的代碼；

02

dist目錄表示編譯結果目錄，它存放最終生成出來的網頁。編譯這個過程是由前端的自動化構建工具來實現的。

下面我們來看一下某個Vue.js項目的目錄結構圖：

需要注意的是，src目錄下存放的是一些組件，這些組件的代碼不能被瀏覽器識別，它必須被前端構建工具編譯到dist目錄下才能被瀏覽器識別，如下圖所示。

dist目錄下的結構和傳統開發的目錄結構很像，外層有個index.html文件，樣式和邏輯代碼分別放在了css和js目錄中。

dist目錄下的文件都是由程序自動生成出來的，里面的代碼都經過了壓縮處理，以確保瀏覽器能正確識別并執行。但dist目錄中的代碼不具有可讀性，如果用編輯器打開里面的文件，會發現里面的代碼是難以閱讀的，它只保證代碼能被瀏覽器執行：

開發人員編寫的代碼保存在src目錄下，這里面存放的是一些單文件組件，這些組件才是我們要重點關注的內容。

4.組件代碼解析

使用Vue.js框架編寫的單文件組件，以“vue”作為文件擴展名。當我們打開某個組件的文件后，會發現里面的代碼主要分為3部分，即“模板代碼”“邏輯代碼”和“樣式代碼”，分別對應HTML結構、JavaScript邏輯和CSS樣式，如下所示。

<template>模板代碼 </template><script>邏輯代碼 </script><style>樣式代碼 </style>

單文件組件中的這些代碼，最終將被編譯后放入一個完整的HTML頁面中，這樣就實現了把傳統的一個完整的網頁拆分成若干個組件，每個組件都有自己的HTML、CSS、JavaScript代碼，當用到哪個組件時，只需在頁面中引用哪個組件即可。

每一個項目都有一個最外層的模板index.html和最外層的組件App.vue，它們在項目中所處的位置如下所示：

最外層組件App.vue里面的代碼在編譯時會經過Vue.js的處理，它會被渲染到index.html中的一個id為app的<div>標簽中，在index.html中我們可以找到這個標簽：

頁面中的組件是具有嵌套關系的，在最外層組件App.vue中，我們可以看到里面用到了一些子組件，這些子組件就是頁面中的各個部分。App.vue代碼如下。

在上圖中，<mt-header>是頁面頭部組件，<mt-button>是按鈕組件，<tabbar>是TAB欄組件，這些組件都以標簽的形式來使用，標簽的屬性可以用來傳遞參數、綁定事件。

每個子組件都有自己的結構、邏輯和樣式代碼，子組件結構代碼會被渲染到父組件對應的標簽下，用來將子組件顯示到頁面中。

5.總結

到這里，我們就對前端組件化開發有了一個比較清晰的認識。前端技術的發展，就是從網頁制作變成了網頁應用的開發，網頁不再是一個只用來展示的頁面，而是一個應用程序。組件化開發是為了提高代碼的可復用性，以及方便團隊分工協作開發。

對于初學者來說，剛接觸前端組件化開發時，會覺得前端現在變得好復雜，要學習的東西也變得很多。但是對于需要開發復雜的大型應用的企業來說，組件化開發能極大地提高開發效率，它讓前端開發團隊能高效地完成工作，是一個非常有用的技術。

總結

以上是生活随笔為你收集整理的组件化开发实战_一篇文章搞懂什么是前端“组件化”开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。