組件開發

在前端項目開發中，組件開發佔據着舉足輕重的地位。通過組件封裝，能夠將公共業務或 UI 交互進行統一整合，有效避免重複開發，極大地提高開發效率。

JOKER 開發平台展現出卓越的優勢，它支持在線進行組件開發，且開發完成的組件無需經過編譯，即可在平台內直接引用並渲染。這得益於 JOKER 開發平台自主研發的渲染與沙箱機制，實現了框架層面的高度靈活性。

一個完整的組件主要由以下幾大功能點構成：

• 狀態數據：此部分用於維護組件的數據，涵蓋傳入參數、響應式數據以及內部私有變量。傳入參數讓組件可接收外部傳遞的數據，提升組件的通用性；響應式數據能實時響應數據變化，確保組件界面及時更新；內部私有變量用於組件內部邏輯處理，保障數據的安全性與獨立性。
• 生命週期：組件從創建到銷燬的過程中，會提供不同階段的鈎子函數。開發者可藉助這些鈎子函數，在組件生命週期的各個階段執行特定的業務邏輯。比如，在組件創建時進行數據初始化，在銷燬時清理相關資源，以此確保組件正常運行和資源合理管理。組件生命週期
• 方法邏輯：開發者可在此創建公開或私有方法。公開方法可供外部調用，便於其他組件或模塊與該組件交互，實現功能的複用與擴展；私有方法用於組件內部邏輯處理，保證組件內部邏輯的封裝性與獨立性。
• 事件處理：事件主要分為組件/元素事件和組件內部事件兩種類型。組件/元素事件用於響應用户對組件或元素的操作，如點擊、鼠標移動等；組件內部事件用於組件內部各部分之間的通信與交互，確保組件內部邏輯的連貫性與協同性。
• 組件佈局：開發者能夠通過可視化拖拽的方式管理組件佈局，同時可配置組件的屬性、區塊以及事件。此外，平台提供的大綱樹功能，能以更直觀的方式幫助開發者查看和管理組件結構，讓組件佈局的設計與調整更加便捷高效。

若您希望深入瞭解組件開發的底層細節，可查閲核心框架文檔。

狀態數據

當打開一個組件或頁面文件時，工作台左側菜單中會顯示組件數據菜單，點擊後即可打開組件數據面板。

從數據使用的角度出發，可將其分為以下幾類：

• 傳入參數（props）：這是當前組件所需要的參數。這些參數具有響應式特點，一旦外部使用者傳遞的參數發生變化，會立即通知並更新組件內部的 DOM 節點。這意味着，組件能夠實時響應外部傳入數據的變動，從而動態調整自身的顯示與行為，大大增強了組件的靈活性與複用性。例如，一個按鈕組件可能通過 props 接收按鈕的文本內容、顏色等參數，當外部傳入的文本或顏色改變時，按鈕能立刻呈現相應的變化。
• 響應數據（model）：這是組件內部的響應數據。在組件裝載開始前，該屬性會被“劫持”，進而具備數據響應能力。也就是説，當這個內部數據發生改變時，與之相關聯的組件部分會自動更新。比如在一個購物車組件中，商品數量作為響應數據，當數量改變時，購物車的總價顯示、商品列表的渲染等相關部分會自動更新，為用户提供實時反饋。

• 內部私有屬性：這類屬性既不支持外部調用，也不具備響應式能力，僅作為組件內部臨時使用的變量。在這裏，你可以聲明內部動態數據變量，方便在多個方法中使用。例如，在一個複雜的表單組件中，可能需要一個臨時變量來記錄表單填寫的步驟狀態，這個變量只在組件內部的方法中使用，無需對外暴露，也不需要對其變化做出響應式更新。

  生命週期

  我們可以在組件數據面板中的邏輯/事件 - 生命週期中來管理我們的組件生命週期。當我們生命週期右側的加號按鈕後，可以添加生命週期函數。添加後，我們即可在這裏維護我們的生命週期邏輯了。（邏輯編排幫助文檔可以在這裏中查看。）
  

一個組件或者頁面，從創建到銷燬是由完整的一套生命週期函數的，我們可以通過這些函數來實現在不同節點中的業務處理。組件生命週期

方法邏輯

我們能夠在組件數據面板的邏輯/事件 - 組件方法區域對組件方法進行管理。

在創建方法時，可依據具體使用場景決定該方法是否對外開放：

• 私有方法：僅供組件內部使用，主要用於處理組件內部的業務邏輯。它就像組件內部的“秘密武器”，專注於完成組件內部特定的任務，不會對外暴露接口，保證了組件內部邏輯的封裝性和獨立性。
• 公共方法：既可以在組件內部使用，也能對外提供調用能力。這使得組件之間能夠進行有效的交互和協作，增強了組件的複用性和擴展性。

當我們將某個方法設置為對外公開後，可以通過ref的方式調用該方法。這裏僅作簡單演示，若想了解詳細內容，可查看組件方法、組件佈局

值得一提的是，平台會自動分析公開方法的參數類型和返回類型，並提供可視化的方法調用界面，極大地提升了開發的便捷性，讓開發者能夠更輕鬆地使用和管理組件方法。

事件處理

我們可以在組件數據面板的邏輯/事件 - 對外事件/內部事件區域對組件事件進行管理，同時，這裏也是查看組件事件相關信息的重要入口。

在此區域，我們能夠查看當前組件關於事件的所有信息，這些事件主要分為兩類：

• 對外事件：這是當前組件對外提供的事件處理機制。需要注意的是，該功能僅在組件文件中存在，頁面文件不會對外觸發此類事件。對外事件使得組件可以與外部進行有效的交互，當組件內部發生特定情況時，能夠向外部發送信號，通知其他部分做出相應的響應。例如，一個自定義的下拉菜單組件，當用户選擇了某個菜單項時，可以通過對外事件通知父組件進行數據更新等操作。
• 內部事件：主要是對當前組件內的模板節點進行監聽的事件處理。比如，一個按鈕的點擊事件就屬於內部事件。通過監聽這些內部事件，我們可以在組件內部實現各種交互邏輯，當用户與組件內的元素進行交互時，觸發相應的處理函數，完成特定的任務，如顯示提示信息、修改組件狀態等。

若想了解關於組件事件的詳細內容，可查看組件事件

組件佈局

組件佈局是組件/頁面開發中最為重要的環節之一，我們可以通過工作畫布實現對組件/頁面的佈局編排，實現組件的展現開發。

在前端編輯器中，界面分為左右兩個區域，即 開發畫布區 和 屬性區。

1. 開發畫布區：在此區域，我們能夠將 組件 拖入工作畫布，完成組件的添加操作。同時，若已添加組件，選中它後可對其屬性進行修改，或者執行刪除該組件等操作。

2. 屬性區：當未選中任何組件時，默認展示的是組件屬性面板。在此，我們既可以更改組件的樣式文件，也能夠通過 HTML 快速導入節點。而當選中組件時，屬性區會呈現該組件的專屬屬性面板，此面板包含 屬性、事件、區域 這三個類型的屬性配置。

   如何添加組件

平台允許我們通過拖拽的方式添加組件。

• 組件中心：我們可以在組件中心中通過拖拽的方式實現對組件的引用。
• 資源管理器：我們可以在資源管理中，通過推拽組件類型的文件實現對項目內組件文件的引用。
• 佈局快速添加：當我們選中一個組件時，我們可以在組件點擊快速添加打開快速添加組件面板，實現對組件的快速引用。

如何配置組件

我們可以在畫布中通過點擊的方式來選擇某個組件，選中組件後，我們可以在畫布左側面板中查看當前組件的配置信息，並在這裏修改組件的參數，包括：組件參數、組件事件、組件區塊。

組件樣式

平台賦予了用户對單個組件進行樣式編寫的能力。用户可運用嵌套 CSS 語法完成組件樣式的編寫，平台默認支持 scoped 樣式隔離，有效避免樣式衝突。同時，也提供 deep() 樣式穿透功能，滿足特定場景下樣式覆蓋的需求。

當我們在畫布中未選中任何組件時（可在畫布下方的快捷操作面板中點擊取消選中組件），畫布左側會顯示當前組件的屬性面板，在這裏我們可以維護我們組件的樣式：

大綱樹

平台具備整體佈局大綱展示功能，您能夠在組件數據面板的大綱樹裏查看佈局結構。此外，該大綱樹還提供了豐富的快捷佈局操作，助您更高效地完成佈局調整。

詳細的組件佈局，請參考組件佈局