碼良組件封裝詳解
最近碼良迎來了一波新功能的上線，並毫無保留地繼續進行了代碼開源-趕忙star關注 。新上線的功能有桌面端頁面製做、」樓層模式「、」正宗「佈局組件（容器組件）的開發能力、組件封裝、word 文檔解析、psd 解析等平臺功能和能力。html
資源可貴趕忙先關注，而後後續學習。git
本文將爲您詳細介紹組件封裝。github
什麼是組件封裝
組件封裝就是對具備上下層級關係的組件進行合併，隱藏內部細節，只保留頂層組件的過程。表如今組件樹中，被封裝的組件只能看到頂層組件，並以「小盒子」圖標進行標識；表如今頁面操做區，被封裝組件的內部組件（子孫組件）不可被點擊選中，只能對頂層組件進行操做。在對封裝組件進行縮放操做的時候，子孫組件的大小被等比縮放、位置被線性變換。服務器
操做方式
右鍵菜單操做
右鍵菜單能夠在組件樹和場景區中在組件上單擊鼠標右鍵呼出，點擊菜單中的"封裝"指令便可對組件及其全部子孫組件進行封裝，相反的，點擊菜單中的「解封」（只有已封裝組件纔有該項）指令便可對該封裝組件進行解除封裝，還原爲本來的樹狀結構。ide
組件樹操做
比起右鍵菜單方式進行封裝操做，組件樹獨有的雙擊操做更加便捷。在組件樹上雙擊待封裝組件能夠快速進行封裝操做；在組件樹上雙擊已封裝組件能夠進行快速解除封裝操做。佈局
使用場景
組件封裝看似簡單，帶來的改變倒是多重的。學習
優化頁面結構
經過對整個組件樹不一樣功能塊合理劃分，而後進行分別封裝，頁面結構變得簡單清晰。優化
功能抽象，配置集中
碼良具備強大的腳本編輯能力，能夠經過腳原本接收用戶配置、控制組件行爲、串聯業務邏輯。可是，若是不能合理使用腳本，尤爲是若是開發者對用戶配置不進行集中管理，會形成使用者面對散落到各個組件的自定義配置無從下手。有了組件封裝功能，開發者在進行模板頁面的開發時，經過合理劃分功能塊，將同屬一個功能的局部組件們進行封裝，同時將自定義用戶配置編寫在該功能塊頂層組件上，內部組件經過「數據總線「來獲取用戶配置參數，實現了功能抽象、配置集中，使用者不用再面對複雜的頁面結構和不知道去哪找的衆多配置項。url
權限控制
實際使用中，還有一種狀況，因爲頁面結構過於複雜，頁面模板使用者（一般是缺少專業技術能力的運營人員）由於缺少足夠的瞭解而隨意增減組件或調整組件位置等，形成頁面功能被破壞，組件封裝事後，一方面，運營經過集中配置對頁面進行配置，下降認知難度。另外一方面，能夠經過禁止解除組件的封裝來阻止對功能塊內部的修改，雖然目前碼良並無實現根據用戶職業角色來禁止解除封裝功能，可是封裝操做仍能使得組件被破壞的難度加大，必定程度上保證了頁面功能的完整性。spa
組合組件
封裝後的組件僅限於當前頁面複用（複製使用），那麼有沒有一種方法使封裝組件變成普通組件同樣，無限制的在其餘頁面使用呢？答案固然是有，組合組件就是專門幹這個的。
如圖，經過相似前面組件封裝的作法，打開右鍵菜單，點擊」另存爲組合組件「指令，按提示而後輸入必要的信息，就能夠將這個組件功能塊存儲到服務器，供他人使用了。
看到這裏你也許會奇怪，組合組件和組件封裝彷佛沒有什麼關聯。實際上，合成組件生成時，會自動進行組件封裝，所以在其餘頁面使用了合成組件之後，在組件樹中會看到一個標有小箱子圖標（封裝的標識）的組件。
支持咱們
開源項目須要的是持續地堅持，而咱們堅持的動力固然也來自於大家的支持 來都來了，加個關注再走吧
項目代碼：https://github.com/ymm-tech/gods-pen
項目代碼(國內鏡像)：https://gitee.com/ymm-tech/gods-pen