關於平常前端公用組件的封裝

1.前端的組件化開發發展之路

1. 靜態頁面的公共資源封裝 –好比公用的js文件 css文件在多個頁面複用（模塊化思想 交互少）
2. 早期動態頁面 把具備同一類的業務邏輯的頁面單獨組建起來 在頁面動態引入 好比頁面的公用頁頭 頁尾等（頁面級別封裝）
3. 以JQuery-UI， easy-UI，miniUI以及大名鼎鼎的ExtJS表明的DOM封裝–表現炫酷 可是很難維護和修改
4. 前端MV*時期到來 Angular React Vue （自定義組件思想 一切皆組件）

2.組件封裝的優勢

1. 下降系統各個功能的耦合性
2. 提升了功能內部的聚合性
3. 前端工程化
4. 代碼維護難度下降
5. 開發效率以及開發成本的提高

3.組件封裝的原則

一個組件只專一作一件事，且把這件事作好（通用 易用 可組合）

4.組件封裝的難點

1. 怎麼作到最大程度的通用可是又能支持相對的個性化（個性–通用）
2. 組件之間的數據共享
3. 組件之間的事件傳遞
4. ....（開發人員的抽象能力 編碼能力 使用規範 說明文檔 錯誤處理）...

5.項目組件封裝的規劃

1. 並不打算專門去作組件封裝 不須要爲了封裝而封裝 這個涉及到太多東西了 技術選型 組件設計風格 總體的ui風格 業務場景（組件類型）--區別於專業的框架封裝工具組
2. 最好在項目初期根據原型來進行前端公用組件的開發 一開始能夠針對項目的業務場景來設計組件 以後對代碼進行回顧和優化的時候能夠抽離出更加抽象以及通用的組件
3. 前端這邊主要基於Vue+Element和react+Antd 分別完成兩套 不一樣技術選型的 項目開發中經常使用的公用組件開發
4. 須要強調的是使用文檔須要很規範 開發的組件簡單易用 配置項寫清楚 開箱即用
5. 初期用做於提高內部項目前端開發效率以及開發質量 後期能夠考慮製做成一個系列（長期發展收集的過程）

6.既有項目的前端公共組件成果分享

1. 表格組件以及表單搜索組件（npm地址 https://www.npmjs.com/package/avl-components）