這次是《元件編碼心得》的最後一篇，第一次我們講到将元件分為兩大類：功能型和控制型；第二篇介紹了功能型元件與控制型元件的編碼上需要注意的地方，最後還提到控制型元件與預制件的組合形成獨立子產品，這次分享我在預制件上編碼、編輯時的一點心得。
1. 預制件與控制元件的關系
簡單梳理一下配套的預制件與控制型元件的關系是：
肉體與靈魂 顯示與控制
預制體由1~n個節點構成，就像人體的骨骼，挂載到各個節點的功能型元件則為血脈、神經以支撐整體子產品的運作，而控制元件就是這個子產品的靈魂。
還有一種更有意思比喻，預制件與控制元件是男朋友與女朋友的關系，到底那男女如何對應大家可以琢磨一下！
2. 控制元件編碼心得
其實前一篇隻介紹了控制元件的對内、對外要點，在編碼上具體要如何去做沒有細說，請看下圖：
上一篇說過，不應該用properties屬性做成員節點、元件通路，他是對外的接口。對界面設計無關的屬性接口不要暴露到元件面闆上，方案是使用引擎API: getChildByName\cc.find等，或者自己包裝過的工具函數，比如：uikiller。
3. 預制件編輯心得
上面講的是控制元件的編寫，我們再來看預制件的編輯，需要注意些什麼：
下面我對圖中的内容做一個簡單的說明：
1. 配套的元件與預制件檔案同名、放在同一路徑是為了友善管理，要走一起走，要留一起留下，天生一對！看下面的例子：
将有關聯的一組預制件與元件腳本放在一個路徑下，成對的命名一至。
2. 将控制元件挂載到預制件的根節點上，最好隻挂載一個元件，由它來統領目前預制件及下面的子節點，看下圖：
上圖中預制體檔案名、預制體根節點名字、元件的名字三者保持一至，當把這個預制執行個體化出來時，在編輯器上直接可看到它的控制元件，請看下圖：
在使用代碼執行個體化預制件時，可以用預制體的名字索引到比對的元件對象，看下面代碼：
cc.Class({
properties: {
//這裡用全大寫命名預制資源變量，代碼中不要修改它
NUMBER_DOT_PREFAB: cc.Prefab,
}
onLoad() {
let node = cc.instantiate(this.NUMBER_DOT_PREFAB);
//使用寫死'NumberDot'擷取元件對象
//let numberDot = node.getComponent('NumberDot');
//元件與預制件檔案同名，
//通過預制對象名，直接取出執行個體化的預制件根節點元件對象
let numberDot = node.getComponent(this.NUMBER_DOT_PREFAB.name);
numberDot.xxx = ...;
}
}) 複制
不論是在編輯器中還是在代碼裡，保持命名統一，代碼也相對更簡潔、靈活。
3. 最後節點命名要有意義、保持清晰層級關系這些是為了讓預制件經後可維護，一套規範化的節點命名規範還是很有必要的。
我習慣以下劃線“_”為字首，在代碼中會擷取這類節點，将規範告訴UI編輯人員，遇到以下劃線”_“開頭的節點不需要随便删除修改，其它非下劃”_“的節點可以随便操作。
保持穩定的UI樹結構是因為控制型元件中會使用到getChildByName、cc.find、getComponent等函數來擷取子節點，是以節點樹不能随意改動，如果要修改同時也需要修改元件代碼。
4. 小結
本篇主是介紹元件與預制體的結合，這也是《元件心得三部曲》的最後一篇分享。單純寫好代碼并不是最重要的，探索如何高效率、高品質産出代碼的方法提升生産力才是關鍵，且更具價值，希望我的一點經驗能起到抛磚引玉的作用，歡迎留言讨論！