前端開發流程與組件化

1組件化開發

組件分開發是很是重要的工程優手段。也是react開發必備技能。前端光有JS/CSS的模塊化仍是不夠的。對於UI組件一樣迫切的需求

前端組件化開發理念：

 

 

如上圖所示這就是前端組件開發理念，下面咱們來總結一下

一、頁面上的每一個獨立的可視。可交互區域視爲做一個組件;

二、每一個組件對應一個工程目錄，組件所需的各類資源(JS、Image、CSS)都在這個目錄下就近維護;

三、因爲組件具備獨立性，所以組件與組件之間能夠，自由組合;

四、頁面只不過是組件的容器，負責組合組件造成功能完整的界面;

五、當不須要某個組件或者想要替換組件時，能夠整個目錄刪除/替換

 

注：每二項中就近維護原則是工程化的體現。每一個開發者都清楚知道，本身所開發維護的功能模塊。由於代碼必須存在於對應的組件目錄，當前目錄包函 CSS、JS、HTML、Image

 

根據上述描述咱們將構造一個項目的基本流程

項目初期前端靜態頁面只包函CSS、HTML

 

目錄名稱：frontEnd

less文件結構對應生成css文件