第三章：快速上手：你的第一個 Skin

撰寫 main.js (見證 SDK 的魔法)

這是整個教學中最能體現 MoriForms SDK 價值的環節。

MoriForms 核心插件會自動為您載入 SDK 和 WordPress 內建的 jQuery。您會驚訝地發現，要讓一個功能完整的表單運作起來，您真正需要編寫的程式碼可能 只有一行 。

我們提供了三種風格的範例，從極簡到完整，您可以根據需求選擇：

選項一：極致精簡版 (Hello, MoriForms!)

這個版本是為那些想立即看到成果的開發者準備的。它展示了在最理想的情況下，您需要編寫的全部程式碼。

JavaScript (main.js - 極致精簡版)

JavaScript

jQuery(function($) {
    // 就是這一行！SDK 會處理一切。
    window.MoriForms?.init();
});

是的，您沒有看錯。只要這一行，SDK 就會自動尋找 moriformsData，並初始化頁面上的所有表單，包括欄位渲染、驗證規則綁定、以及處理 AJAX 提交的全部邏輯。

註：?. (這個問號是「Optional Chaining」) 這是一個安全寫法，確保在 MoriForms 物件不存在時，也不會報錯。

這個版本最適合：

• 快速驗證您的 schema.json 和 template.html 是否設定正確。
• 您的 Skin 不需要任何額外的、自訂的 JavaScript 互動。

選項二：jQuery 標準版 (推薦熟悉 WordPress 的開發者)

這個版本在「極致精簡版」的基礎上，增加了事件監聽的範例。它讓您在享受 SDK 便利的同時，也能輕鬆地為 Skin 注入自訂的互動邏輯。

JavaScript (main.js - jQuery 版)

JavaScript

jQuery(function ($) {
    // 安全檢查：這是一個好習慣，確保在執行後續操作前 SDK 已就緒
    if (typeof window.MoriForms === 'undefined') {
        console.error('MoriForms SDK not found. Aborting initialization.');
        return;
    }

    // 1. 核心初始化指令
    MoriForms.init();

    // 2. (可選) 為所有表單添加自訂互動
    if (typeof moriformsData !== 'undefined' && moriformsData.forms) {
        $.each(moriformsData.forms, function(formIdStr) {
            const formInstance = MoriForms.get(parseInt(formIdStr, 10));

            if (formInstance) {
                // 範例：在表單提交成功後，跳出一個 alert 視窗
                formInstance.on('submit:success', function (response) {
                    console.log(`[jQuery] 表單 ${this.id} 提交成功!`, response);
                    alert('太棒了！您的訊息已成功送出！');
                });
            }
        });
    }
});

選項三：原生 JavaScript 現代版 (推薦追求無依賴的開發者)

這個版本功能與 jQuery 版完全相同，但採用了現代的 ES6+ 原生語法，不依賴任何函式庫，是追求極致效能和現代化開發流程的開發者的首選。

JavaScript (main.js - 原生 JS 版)

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    // 安全檢查：這是一個好習慣，確保在執行後續操作前 SDK 已就緒
    if (typeof window.MoriForms === 'undefined') {
        console.error('MoriForms SDK not found. Aborting initialization.');
        return;
    }

    // 1. 核心初始化指令
    MoriForms.init();

    // 2. (可選) 為所有表單添加自訂互動
    if (typeof moriformsData !== 'undefined' && moriformsData.forms) {
        for (const formIdStr of Object.keys(moriformsData.forms)) {
            const formInstance = MoriForms.get(parseInt(formIdStr, 10));

            if (formInstance) {
                // 範例：在表單提交成功後，跳出一個 alert 視窗
                formInstance.on('submit:success', (response) => {
                    console.log(`[Vanilla JS] 表單 ${formInstance.id} 提交成功!`, response);
                    alert('太棒了！您的訊息已成功送出！');
                });
            }
        }
    }
});