WordPress自定义器添加小部件时触发的JavaScript函数是什么？

嘿，这个细节问题问得很到位！在WordPress 4.9.x版本中，当你在Customizer的可用小部件列表里点击某个小部件时，核心的JavaScript逻辑都集中在wp.customize.widgets模块里，具体执行流程和关键代码如下：

核心触发逻辑 #

首先，Customizer的小部件选择器是由wp.customize.Widgets.WidgetChooser这个类来管理的。每个可用小部件项（带.widget-choice类的元素）在初始化时会绑定click事件，点击时会调用该类的addWidget方法，这就是步骤(5)的核心执行入口。

关键代码片段 #

以下是简化后的核心执行代码（对应官方wp-admin/js/customize-widgets.js里的逻辑）：

// 小部件选择器的添加方法，点击小部件时触发
wp.customize.Widgets.WidgetChooser.prototype.addWidget = function( event ) {
    // 阻止默认点击行为
    event.preventDefault();

    var widgetChoice = $( event.currentTarget ),
        widgetIdBase = widgetChoice.data( 'widget-id-base' ),
        // 生成新小部件的唯一控件ID
        nextWidgetNumber = wp.customize.widgets.getNextWidgetNumber( widgetIdBase ),
        controlId = 'widget_' + widgetIdBase + '-' + nextWidgetNumber;

    // 向Customizer的控件集合中添加新的小部件控件
    wp.customize.widgets.addWidget( widgetIdBase, {
        control_id: controlId,
        sidebar_id: this.sidebarId // 指定要添加到的侧边栏ID
    } );

    // 关闭小部件选择面板
    this.close();
};

额外细节 #

• 这个方法会先获取被点击小部件的基础ID（比如文本小部件的text），然后生成一个唯一的新控件ID，确保不会和已有的小部件冲突。
• 调用wp.customize.widgets.addWidget后，Customizer会触发一系列内部事件，最终把新的小部件渲染到你选择的侧边栏区域，也就是你看到的步骤(6)的效果。
• 所有这些逻辑都打包在WordPress核心的customize-widgets.js脚本中，不需要额外引入第三方文件。

内容的提问来源于stack exchange，提问作者Projectitis