Cocos Creator的核心是組件化，如何編寫出高質量的組件代碼值得程序員們不斷探索，Shawn今天分享一點組件編碼的心得供大家參考：“怎樣纔是一個合格的組件？”。
1. 組件編碼常見問題
Shawn在2年的Cocos Creator項目經驗和案例中總結了兩條組件編碼問題：
- 濫用properties屬性：把暴露到編輯器上的組件屬性當成成員變量的一種實現方式；或將properties屬性當成訪問外部節點、資源的便利的通道。不必要暴露的屬性，爲上層使用者造成負擔。
- 場景樹結構假設：組件代碼中存對場景樹的硬編碼，導致組件只能工作在這種特定的場景樹結構下，失去了重用能力，同時也限制了場景樹不能輕易變量動。
上面兩個問題帶來的後果是：組件與組件、組件與外部節點、組件與資源、組件與場景樹結構形成高度耦合，如下圖所示：
組件與外部對象產生了千線萬縷的關係，這樣的設計讓組件、界面都完全動彈不得，完全背離了組件化開發的本質，陷入了高度耦合的泥沼之中。
2. 合格組件參考標準
怎樣纔算是一個合格的組件？
這個問題困擾Shawn很長一段時間，其實答案近在眼前，那就是：模仿Cocos Creator內置組件，以引擎內置組件爲參考標準。
Cocos Creator的內置組件絕大部分都是可通用的，可以掛載到任意節點，這裏簡單總結三點：
- 簡單易用：程序員要將設計師看見是你的客戶，提供給他簡單好用的組件。
- 複用性強：編寫一次可以在更多的地方使用，解決普遍性問題。
- 易於測試：不管是程序員還是設計師都要能方便的營造組件測試預覽環境。
有了好的參考的標準，就有了行動的指南針，接下來看內置組件給我們的啓發。
3. 組件的類型
之前Shawn的教程中就提到，組件分爲兩類：神器與結界。隨着教程的不斷升級，Shawn也在思考使用更爲貼切的用詞，慶幸得到引擎組大神們的幫助，規範用詞，將兩類組件定義爲：功能型組件與控制型組件，請看下圖：
- 功能型組件：以裝飾宿主節點爲己任，常用的有Sprite、Labe、Widget屬於這類。
- 控制型組件：管理和控制子孫節點，比如：ScreollView、ToggleContainer，它們內部是由多個子孫點節點組合而成。
在編寫自定組件時，需要明確我們是要提供什麼類型的組件去解決問題，比如我們教程Demo中的：節點ZIndex控制、節點可拖動、點擊節點切換圖片，它們都是功能型組件，通常是一個純組件腳本文件。
在項目中，我們做的：提示對話框、玩家頭像、揹包道具，它們通常是由背景、前景、圖片、邊框、文字等等節點構成，我們就需要爲它們使用定製各自的控制型組件腳本。
功能型組件解決 “點” 上的問題，控制型組件解決 “線” 、 “面” 上的問題，它們之間又可以相互嵌套、組合從而解決 “體” 上的問題。
4. 小結
本篇教程主要是分享Shanw在組件編程中發現的問題，思考“怎樣纔是一個合格的組件？”。探索編寫合格組件的指導思想，總結了功能型與控制型兩類組件模型，供大家參考。
下一次我們再繼續這個話題，如何去編寫簡單易用、複用性強、易於測試的組件，具體說明功能型和控制型組件的編碼心得。
編寫高質量的組件的目的是爲了提高開發效率和產品質量，在這條道路上任重道遠，大家一起努、加油！
如果覺得公衆號上的文章對您或您身邊的朋友有幫助，請分享給他們，願我們一起成長！
