背景介紹
什么是組件？
組件
它的核心意義在于代碼復用。功能相對單一或者獨立，在整個系統的代碼層次上位于最底層，被其他代碼所依賴。
模塊
它的核心意義在于分離職責。它的關注點在于功能劃分。 例如： 視頻通話、語音通話等功能就可以被分為不同的模塊
為什么要做組件庫
傳統開發方式效率低以及維護成本高的主要原因在于很多時候是將一個系統做成了整塊應用，而且往往隨著業務的增長或者變更，系統的復雜度會呈現指數級的增長，經常出現的情況就是一個小小的改動或者一個小功能的增加可能會引起整體邏輯的修改，造成牽一發而動全身。

針對此弊端，其實業界早就有了一些探索，我們希望一個大且復雜的場景能夠被分解成幾個小的部分，這些小的部分彼此之間互不干擾，可以單獨開發，單獨維護，而且他們之間可以隨意的進行組合。就拿電腦主機來說，一臺整機包括CPU，主板，內存，硬盤等等，而這些部件其實都是由不同的公司進行生產的，他們彼此之間根據一套標準分別生產，最后組裝在一起。當某個部件出現問題時，不需要將整臺主機都進行維修，只需要將壞的部件拿下來，維修之后再將其組合上就可以了。這種化繁為簡的思想在后端開發中的體現是微服務，而在前端開發中的體現就是組件化。

組件化的意義
為前端提供了很好的分治策略，可以實現獨立維護，可維護性強
組件具有獨立性，組件之間可以自由組合
頁面只不過是組件的容器，負責組合組件即可形成功能完整的界面
組件開發的原則
標準性
任何一個組件都應該遵守一套標準，可以使得不同區域的開發人員據此標準開發出一套標準統一的組件。
組合性
組件之前應該是可以組合的。我們知道前端頁面的展示都是一些HTML DOM的組合，而組件在最終形態上也可以理解為一個個的HTML片段。那么組成一個完整的界面展示，肯定是要依賴不同組件之間的組合，嵌套以及通信。
重用性
任何一個組件應該都是一個可以獨立的個體，可以使其應用在不同的場景中。
可維護性
任何一個組件應該都具有一套自己的完整的穩定的功能，僅包含自身的，與其它組件無關的邏輯，使其更加的容易理解，使其更加的容易理解，同時大大減少發生bug的幾率。
組件化的方法

我們把一個組件保存為一個文件夾，把相應的HTML, CSS, JS 文件都放在一起。在需要用的時候再引用相應的文檔就可以了。

編碼實戰
十等分的柵格系統

body{margin: 0;padding: 0; }.myrow{margin:0 -15px;&::after{content: "";display: block;clear: both;} }.mycol-sm-1, .mycol-sm-2, .mycol-sm-3, .mycol-sm-4, .mycol-sm-5, .mycol-sm-6, .mycol-sm-7, .mycol-sm-8, .mycol-sm-9, .mycol-sm-10{float: left;padding: 0 15px;box-sizing: border-box; }.mycol-sm-1{width: 10%; } .mycol-sm-2{width: 20%; } .mycol-sm-3{width: 30%; } .mycol-sm-4{width: 40%; } .mycol-sm-5{width: 50%; } .mycol-sm-6{width: 60%; } .mycol-sm-7{width: 70%; } .mycol-sm-8{width: 80%; } .mycol-sm-9{width: 90%; } .mycol-sm-10{width: 100%; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
擴展思考
在一個頁面中引入多個組件，如何防止CSS污染呢？
才HTML中采用BEM命名的方法。

參考文獻
前端為什么要做組件化

前端組件化開發

組件化

總結

以上是生活随笔為你收集整理的为什么要做组件库？的全部內容，希望文章能夠幫你解決所遇到的問題。

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