JavaScript 代码详解：提取合成事件的组成部分 (extractCompositionEvent)

/**

• 提取合成事件的组成部分
• @param {string} topLevelType - 顶层事件类型
• @param {object} targetInst - 目标实例
• @param {object} nativeEvent - 原生事件
• @param {object} nativeEventTarget - 原生事件目标
• @returns {object|null} - 合成事件对象或 null */ function extractCompositionEvent( topLevelType, targetInst, nativeEvent, nativeEventTarget ) { var eventType; // 事件类型 var fallbackData; // 回退数据

// 如果可以使用 CompositionEvent，则获取事件类型 if (canUseCompositionEvent) { eventType = getCompositionEventType(topLevelType); } else if (!currentComposition) { // 如果无法使用 CompositionEvent 且当前没有组合事件正在进行，则检查是否为回退的组合开始事件 if (isFallbackCompositionStart(topLevelType, nativeEvent)) { eventType = eventTypes.compositionStart; } } else if (isFallbackCompositionEnd(topLevelType, nativeEvent)) { // 如果无法使用 CompositionEvent 且当前有组合事件正在进行，则检查是否为回退的组合结束事件 eventType = eventTypes.compositionEnd; }

// 如果没有事件类型，则返回 null if (!eventType) { return null; }

if (useFallbackCompositionData) { // 如果使用回退数据 if ( !currentComposition && eventType === eventTypes.compositionStart ) { // 如果当前没有组合事件正在进行且事件类型为组合开始，则从 FallbackCompositionState 池中获取一个新的组合状态对象 currentComposition = FallbackCompositionState.getPooled(nativeEventTarget); } else if (eventType === eventTypes.compositionEnd) { // 如果事件类型为组合结束 if (currentComposition) { // 如果当前有组合事件正在进行，则获取回退数据 fallbackData = currentComposition.getData(); } } }

// 创建合成事件对象 var event = SyntheticCompositionEvent.getPooled( eventType, targetInst, nativeEvent, nativeEventTarget );

if (fallbackData) { // 如果有回退数据，则将其注入到合成事件中，与原生的 CompositionEventInterface 属性一致 event.data = fallbackData; } else { // 否则从原生事件中获取自定义数据并注入到合成事件中 var customData = getDataFromCustomEvent(nativeEvent); if (customData !== null) { event.data = customData; } }

// 累积两个阶段的分发 EventPropagators.accumulateTwoPhaseDispatches(event); return event; }