JS 組件開發：類似百度搜索/新浪微博秀的嵌入式插件寫法

需求場景

開發一個 JS 組件，第三方網站只需嵌入一行 `

跨域與安全：iframe 隔離方案 (推薦)

如上代碼所示，**核心 UI 放在 iframe 中**，主頁面只負責建立容器與載入 iframe。優勢：

• 樣式隔離：組件 CSS 不污染主頁，主頁 CSS 不影響組件
• 安全隔離：組件 JS 無法直接存取主頁 DOM/Cookie (受同源策略保護)
• 獨立開發部署：iframe 內頁面可獨立迭代，無需更新主頁嵌入代碼

iframe 通訊：postMessage

// 組件內頁面 (widget_frame.html) 發送高度調整請求
window.parent.postMessage({
    type: 'resize',
    height: document.body.scrollHeight
}, 'https://trusted-origin.com'); // 指定目標源，安全

// 主頁面監聽 (可選，若需自動調整容器高度)
window.addEventListener('message', function(event) {
    if (event.origin !== 'https://widget.example.com') return; // 驗證來源
    if (event.data.type === 'resize') {
        var container = document.getElementById(event.data.containerId);
        if (container) container.style.height = event.data.height + 'px';
    }
});

複雜組件架構：UMD + 模組化

// widget.core.js - 核心邏輯 (UMD 格式)
(function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory); // AMD
    } else if (typeof exports === 'object') {
        module.exports = factory(require('jquery')); // CommonJS
    } else {
        root.Widget = factory(root.jQuery); // 全域變數
    }
})(typeof self !== 'undefined' ? self : this, function($) {
    // 核心類別
    function Widget(options) {
        this.options = $.extend({}, Widget.defaults, options);
        this.init();
    }
    
    Widget.defaults = { /* 預設配置 */ };
    Widget.prototype.init = function() { /* 初始化 */ };
    Widget.prototype.render = function() { /* 渲染 */ };
    
    return Widget;
});

// widget.loader.js - 載入器 (第三方嵌入)
(function() {
    var script = document.currentScript;
    var params = parseParams(script.src);
    
    // 動態載入依賴 (jQuery, CSS, 核心模組)
    loadDependencies(function() {
        new Widget(params).render();
    });
})();

最佳實踐清單

1. 單一入口腳本：第三方只需嵌入一行 `