• 下面的4張圖，就是我想表達的產(chǎn)品設計思想了
  （詳細的文字說明，在4張圖的后面）

• 【1】
  汽車小零件 => 第三方開源通用組件

• 【2】
  車門 => 二次封裝的產(chǎn)品組件

• 【3】
  一種造車方案 => 一份模板組件

• 【4】
  一種優(yōu)質車型 => 一種業(yè)務界面

產(chǎn)品設計思想說明

• 1、目前前端產(chǎn)品開發(fā)所有3大模板語言vue、react、angular都是通過調用來源于 npm 平臺的第三方開源組件，所以可以說都是在二次封裝或二次開發(fā)組件，從而使得讓產(chǎn)品快速成型；
• 2、所以我們開發(fā)產(chǎn)品的思想，不應該同人家開發(fā)開源組件的思想一樣，頂多借鑒部分可用思想，關鍵一定要舍棄會影響產(chǎn)品關鍵因素的思想；
• 3、產(chǎn)品的關鍵因素：界面設計統(tǒng)一性、用戶操作方式統(tǒng)一性、組件封裝統(tǒng)一性；圍繞這3個統(tǒng)一，來逐步迭代產(chǎn)品，從而提高用戶體驗
• 4、為了更好得說明我的思想，我以生活中比較常見物件為例：汽車 和 組成汽車的零件；
• 4.1、造汽車零件的思想，是一種通用的思想，比如造一顆小螺絲，那思想自然是盡可能讓更多的車輛可以用上，這樣這顆小螺絲才更有價值；
• 4.2、造汽車那就不能像造螺絲一樣的思想了，比如造一輛車的車門，總不能想著這個車門盡可能多的去適用多種車型吧，一種車門自然只能定制化得去適用于一種車型，這樣才能盡可能去提高車輛的外觀，造車門要有高復用、定制化的思想，即一種車門的造就方式要能完全滿足一種車型，那其他的部件如車窗、馬達之類的都是如此，這樣才能實現(xiàn)高效的批量生產(chǎn)一種車型；
• 5、說完了案例，再說回產(chǎn)品，前端產(chǎn)品二次封裝或二次開發(fā)的組件好比造車門的方法，而組件中帶有的第三方開源組件好比通用零件，我們二次封裝或二次開發(fā)的組件不需要像第三方開源組件一樣通用，為了更好得提高產(chǎn)品質量，我們二次封裝或二次開發(fā)的組件更應該關注的是復用性，即這個組件可以盡可能重復使用，且簡化使用方式，然后用二次封裝或二次開發(fā)的組件去組成模板組件，這模板組件就好比一種車型的組裝方案，所以模板組件自然也是只需要針對某幾種界面，一種界面就好比一種車型，當然如果只針對一種頁面自然定制化性能更優(yōu)，好比一種車型的組裝方案，只需要使用幾種車型，如果一種車型的組件方案只針對一種車型進行定制化，那造出的這種車型自然更優(yōu)，畢竟高度高定制化雖然通用性差，但質量更優(yōu)越；
• 6、有了以上思想，那無論開發(fā)什么前端產(chǎn)品，都只有這幾種實現(xiàn)方式了：
• 6.1、子組件封裝多個第三方開源組件，且包含自己特有的功能(即數(shù)據(jù)、函數(shù))，且向外界提供部分接口，來獲取或調用自己內部的功能；
• 6.2、模板組件（即父組件）封裝多個二次封裝的子組件，通過子組件的接口調用子組件內部數(shù)據(jù)和函數(shù)，來封裝自己特有的功能(即數(shù)據(jù)、函數(shù))，提供出業(yè)務接口讓業(yè)務層去具體實現(xiàn)，并為了提高模板復用性，模板組件之間是存在繼承關系的，需高度統(tǒng)一需求的有關子組件和功能，一定封裝在基層模板組件中，一些特有需求的有關子組件和功能封裝到該基層模板組件的子模板組件中，高度封裝模板組件，將UI參數(shù)化；
• 6.3、業(yè)務頁面繼承模板組件，實現(xiàn)部分函數(shù)，并傳遞部分參數(shù)，從而高效批量搭建界面；
• 6.4、最后再在業(yè)務層頁面中抽離出業(yè)務腳本，把對接后臺接口的業(yè)務邏輯獨立起來(比如后臺數(shù)據(jù)的轉化邏輯等)，這樣后續(xù)再需要開發(fā)一個類似的頁面的時候，只需要復制相似的業(yè)務頁面的代碼做些調整，這樣又進一步提高的開發(fā)效率；

結構說明圖