jQuery 插件銷毀與重新初始化模式：參數化方法調用設計

問題場景

自寫 jQuery 插件 `$.fn.changeColor()`，需求：

• DOM Ready 時自動初始化：`$(".div1").changeColor();`
• 點擊按鈕 A → 銷毀 插件效果/事件/資料。
• 點擊按鈕 B → 重新初始化/更新 插件。

標準模式：單一入口 + 字串方法名

參考 jQuery UI / Bootstrap / EasyUI 設計：

(function($) {
    var methods = {
        init: function(options) {
            return this.each(function() {
                var $this = $(this);
                var data = $this.data('changeColor');
                if (!data) {
                    // 合併預設選項
                    var opts = $.extend({}, $.fn.changeColor.defaults, options);
                    // 初始化 DOM、綁定事件、儲存狀態
                    data = { options: opts, /* 其他狀態 */ };
                    $this.data('changeColor', data);
                    // 執行初始化邏輯
                    methods._applyColor.call(this, opts.color);
                }
            });
        },
        destroy: function() {
            return this.each(function() {
                var $this = $(this);
                var data = $this.data('changeColor');
                if (data) {
                    // 解綁事件、移除動態 DOM、清理資料
                    $this.off('.changeColor'); // 命名空間解綁
                    $this.removeData('changeColor');
                }
            });
        },
        update: function(newColor) {
            return this.each(function() {
                var $this = $(this);
                var data = $this.data('changeColor');
                if (data) {
                    data.options.color = newColor;
                    methods._applyColor.call(this, newColor);
                }
            });
        },
        _applyColor: function(color) { /* 內部實際邏輯 */ }
    };

    $.fn.changeColor = function(methodOrOptions) {
        if (methods[methodOrOptions]) {
            // 呼叫具名方法：$(".div1").changeColor("destroy")
            return methods[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
            // 初始化：$(".div1").changeColor({color:'red'}) 或 $(".div1").changeColor()
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + methodOrOptions + ' does not exist on jQuery.changeColor');
        }
    };

    $.fn.changeColor.defaults = { color: 'red' };
})(jQuery);

使用範例

// 1. 初始化 (DOM Ready)
$(function() {
    $(".div1").changeColor(); // 使用預設值
    // 或 $(".div1").changeColor({color: 'blue'});
});

// 2. 銷毀
$("#btnDestroy").click(function() {
    $(".div1").changeColor("destroy");
});

// 3. 更新/重新初始化
$("#btnUpdate").click(function() {
    // 方式 A: 更新選項 (保留實例)
    $(".div1").changeColor("update", "green");
    
    // 方式 B: 完全重新初始化 (先銷毀後初始化)
    $(".div1").changeColor("destroy").changeColor({color: 'yellow'});
});

進階：支援多實例獨立狀態

上述代碼已透過 `$(this).data('changeColor')` 實現每個 DOM 元素獨立狀態，互不干擾。

銷毀時必須清理的項目清單

• [ ] 事件解綁：`$el.off('.pluginNamespace')`
• [ ] 動態建立的 DOM 移除：`$el.find('.plugin-generated').remove()`
• [ ] 定時器清除：`clearInterval(data.timer)`
• [ ] 資料移除：`$el.removeData('pluginName')`
• [ ] CSS 類名恢復：`$el.removeClass('plugin-active')`

替代方案：jQuery Widget Factory (已棄用但仍可用)

$.widget("custom.changeColor", {
    options: { color: "red" },
    _create: function() { this._apply(); },
    _apply: function() { this.element.css("color", this.options.color); },
    _setOption: function(key, value) { this._super(key, value); this._apply(); },
    destroy: function() { this._super(); } // 自動清理
});

// 使用
$(".div1").changeColor();
$(".div1").changeColor("destroy");
$(".div1").changeColor("option", "color", "blue");

Widget Factory 自動處理實例儲存、方法路由、銷毀清理，適合複雜插件。