組件化開發的思考

經歷過不少場面試，以及對本身所作項目的思考與積累。對於組件化的開發有了一點點理解。 其實開發一個項目，就相似與作一個樂高玩具。樂高由不一樣的積木塊拼成，每一個積木塊能夠和不一樣的積木塊鏈接。 並且積木塊與積木塊之間沒有影響。一個蘿蔔一個坑，只要這個坑你能填進去，你就適合。 而咱們開發一個項目的時候，就要規劃好那些功能.在前端來講，就是哪些標籤，哪些CSS，哪些JS可以抽象成一個積木塊。 在編程開始後，再不斷的改進這個積木塊所須要用到的數據，事件。積木塊之間的影響如何儘可能的解耦。 父組件子組件的數據若是傳遞和更改。

如何實現組件化

組件在spa的實現

1. 經過jsx或者template,在文件中定義好css,js。
2. 此組件須要那些屬性。屬性是經過props由上級傳過來，仍是直接定義在data，又或者是定義在狀態管理中。
3. 數據是否須要持久化，緩存？由於spa在一次刷新以後，會初始化（根據你寫的代碼）數據狀態，因此咱們須要記錄這些數據， 這些數據是存在 localstorage仍是cookie，使用storage時是否須要考慮到向後兼容。
4. 數據的改變，是提交至狀態管理，仍是經過子組件事件提交，父組件監聽相應的事件去改變這個數據。
5. 某個功能是否有必要將它抽象成組件，主要看複用需求，由於轉換成組件，每每須要改變不少頁面的結構，以及數據，事件。
6. 組件的可拓展性，若是須要這個組件完成新加的須要，改動最小。

組件在JQuery中的實現

1. 先寫好這個組件的樣式，以及功能。
2. 建立一個構造函數，包含組件實例的建立，將1中的html代碼轉成字符串進行拼接。或者DocumentFragment對象。
3. 綁定事件。
4. 將須要用到的數據，用過事件的參數傳遞。
5. 插入到指定的位置，append。

面向對象開發

在進行組件化的開發時，其實就已經有面向對象開發的思想，你就能用到構造函數、prototype、繼承等面向對象開發的特性。 可是這個步驟不須要強制的使用到全部的場景，由於有時候抽象組件時你花費的時間，以及組件的健壯性都不能讓你滿意。 按照需求去敲代碼，思考。纔是最適合開發者的方式。 並且，一種開發思想的創建，是須要代碼量，須要自我驅動的思考。