框架间的通信

框架间的通信

现代前端开发中，多个框架共存于同一页面变得越来越常见。不同框架间的数据共享和交互成为必须解决的问题。框架间的通信方式多种多样，每种方法都有其适用场景和优缺点。

使用自定义事件

自定义事件是实现框架间通信的经典方式。通过浏览器原生的事件系统，不同框架可以监听和触发事件。

// 框架A触发事件
const event = new CustomEvent('frameworkAEvent', {
  detail: { message: 'Hello from Framework A' }
});
window.dispatchEvent(event);

// 框架B监听事件
window.addEventListener('frameworkAEvent', (e) => {
  console.log(e.detail.message); // 输出: Hello from Framework A
});

这种方法简单直接，但需要注意事件命名冲突问题。建议为事件名称添加框架前缀。

通过全局状态管理

共享全局对象是另一种常见方案。创建一个双方都能访问的全局变量作为通信桥梁。

// 创建全局状态对象
window.sharedState = {
  data: null,
  callbacks: []
};

// 框架A设置数据
window.sharedState.data = { user: 'Alice' };

// 框架B监听变化
const checkState = () => {
  if (window.sharedState.data) {
    console.log(window.sharedState.data.user);
  }
};
setInterval(checkState, 100);

更高级的实现可以使用发布-订阅模式：

window.pubSub = {
  events: {},
  subscribe(event, callback) {
    if (!this.events[event]) this.events[event] = [];
    this.events[event].push(callback);
  },
  publish(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(data));
    }
  }
};

// 框架A发布
window.pubSub.publish('userUpdate', { id: 123 });

// 框架B订阅
window.pubSub.subscribe('userUpdate', (data) => {
  console.log('User updated:', data.id);
});

使用postMessage API

当框架运行在不同iframe中时，可以使用postMessage进行跨文档通信。

// 父窗口发送消息
const iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage(
  { type: 'notification', content: 'New message' },
  '*'
);

// iframe内接收消息
window.addEventListener('message', (event) => {
  if (event.data.type === 'notification') {
    alert(event.data.content);
  }
});

这种方法特别适合跨域场景，但需要注意安全性，始终验证消息来源。

共享Web Workers

对于计算密集型任务，可以使用Web Worker作为中间层。

// 创建共享worker
const worker = new SharedWorker('worker.js');

// 框架A发送数据
worker.port.postMessage({ from: 'FrameworkA', data: [1,2,3] });

// 框架B接收数据
worker.port.onmessage = (e) => {
  if (e.data.from === 'FrameworkA') {
    console.log('Received:', e.data.data);
  }
};

worker.js内容：

const connections = [];

onconnect = (e) => {
  const port = e.ports[0];
  connections.push(port);
  
  port.onmessage = (msg) => {
    connections.forEach(conn => {
      if (conn !== port) conn.postMessage(msg.data);
    });
  };
};

利用URL参数和hash

对于简单数据，可以通过修改URL实现通信。

// 框架A设置hash
window.location.hash = 'tab=profile';

// 框架B监听变化
window.addEventListener('hashchange', () => {
  const tab = window.location.hash.split('=')[1];
  console.log('Tab changed to:', tab);
});

这种方法适合保存应用状态，但频繁修改可能影响性能。

使用Broadcast Channel API

现代浏览器提供的BroadcastChannel API专门用于跨上下文通信。

// 框架A
const channel = new BroadcastChannel('app_channel');
channel.postMessage({ action: 'login', user: 'Bob' });

// 框架B
const channel = new BroadcastChannel('app_channel');
channel.onmessage = (e) => {
  if (e.data.action === 'login') {
    updateUI(e.data.user);
  }
};

这种方法简单高效，但需要考虑浏览器兼容性。

共享Web Storage

localStorage和sessionStorage可以用于框架间数据共享。

// 框架A存储数据
localStorage.setItem('app.theme', 'dark');

// 框架B监听变化
window.addEventListener('storage', (e) => {
  if (e.key === 'app.theme') {
    document.body.className = e.newValue;
  }
});

注意storage事件只在其他窗口修改存储时触发，当前窗口的修改不会触发。

使用Redux等状态容器

如果项目已经使用Redux，可以创建共享store。

// store.js
import { createStore } from 'redux';

const reducer = (state = {}, action) => {
  switch(action.type) {
    case 'SET_DATA':
      return { ...state, data: action.payload };
    default:
      return state;
  }
};

export const store = createStore(reducer);

// 框架A
import { store } from './store';
store.dispatch({ type: 'SET_DATA', payload: 'Shared data' });

// 框架B
import { store } from './store';
store.subscribe(() => {
  console.log(store.getState().data);
});

这种方法适合复杂应用，但需要两个框架都能访问同一store实例。

基于MutationObserver的DOM监听

通过观察DOM变化实现通信。

// 框架A设置属性
document.getElementById('bridge').setAttribute('data-status', 'loading');

// 框架B监听
const target = document.getElementById('bridge');
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.attributeName === 'data-status') {
      console.log('New status:', target.getAttribute('data-status'));
    }
  });
});

observer.observe(target, { attributes: true });

这种方法适合基于DOM的简单通信，但性能开销较大。

服务端作为中介

通过服务器中转消息，适合需要持久化的场景。

// 使用WebSocket示例
const socket = new WebSocket('wss://example.com/ws');

// 框架A发送
socket.send(JSON.stringify({ event: 'chat', message: 'Hi there' }));

// 框架B接收
socket.onmessage = (e) => {
  const data = JSON.parse(e.data);
  if (data.event === 'chat') {
    addMessageToUI(data.message);
  }
};

这种方法实时性好，但需要服务器支持。

性能考量与安全实践

实现框架间通信时，性能和安全同等重要。频繁的小消息可以合并发送，减少通信次数。对于敏感数据，务必验证来源并考虑加密。

// 节流示例
let messageQueue = [];
let isSending = false;

function sendMessages() {
  if (messageQueue.length === 0 || isSending) return;
  
  isSending = true;
  const batch = messageQueue.splice(0, 10);
  window.postMessage({ type: 'batch', messages: batch }, '*');
  
  setTimeout(() => {
    isSending = false;
    sendMessages();
  }, 100);
}

// 添加消息到队列
function addMessage(msg) {
  messageQueue.push(msg);
  sendMessages();
}

安全验证示例：

window.addEventListener('message', (e) => {
  // 验证来源
  if (e.origin !== 'https://trusted.example.com') return;
  
  // 验证消息结构
  if (!e.data || typeof e.data !== 'object') return;
  if (!e.data.type || !e.data.payload) return;
  
  // 处理可信消息
  handleMessage(e.data);
});

混合通信策略

实际项目中，往往需要组合多种通信方式。例如，使用postMessage进行框架间通知，用Web Storage持久化重要状态，用Web Workers处理计算任务。

// 综合示例
class FrameworkBridge {
  constructor() {
    this.channel = new BroadcastChannel('app_bridge');
    this.messageQueue = [];
    
    // 监听各种通信渠道
    window.addEventListener('message', this.handleWindowMessage);
    this.channel.addEventListener('message', this.handleBroadcast);
    window.addEventListener('storage', this.handleStorageChange);
    
    // 启动消息处理循环
    setInterval(this.processQueue, 50);
  }
  
  handleWindowMessage = (e) => {
    if (e.data.source === 'other_framework') {
      this.messageQueue.push(e.data);
    }
  };
  
  handleBroadcast = (e) => {
    this.messageQueue.push(e.data);
  };
  
  handleStorageChange = (e) => {
    if (e.key === 'shared_data') {
      this.messageQueue.push({
        type: 'storage_update',
        data: JSON.parse(e.newValue)
      });
    }
  };
  
  processQueue = () => {
    while (this.messageQueue.length) {
      const msg = this.messageQueue.shift();
      this.dispatch(msg);
    }
  };
  
  dispatch(msg) {
    // 根据消息类型处理
    switch(msg.type) {
      case 'state_update':
        this.updateState(msg.payload);
        break;
      case 'api_request':
        this.makeApiCall(msg.request);
        break;
      // 其他消息类型...
    }
  }
  
  sendToOtherFramework(payload) {
    // 优先使用BroadcastChannel
    this.channel.postMessage({
      source: 'current_framework',
      ...payload
    });
    
    // 后备方案
    if (!navigator.serviceWorker) {
      localStorage.setItem('fallback_message', JSON.stringify(payload));
    }
  }
}

通信协议设计

定义清晰的通信协议能减少错误。协议应包含版本控制、消息类型、时间戳等元数据。

// 协议示例
const createMessage = (type, payload) => ({
  protocol: 'framework-comm/v1',
  timestamp: Date.now(),
  source: 'shopping_cart',
  destination: 'checkout',
  type,
  payload,
  signature: generateSignature(type, payload)
});

// 使用
const message = createMessage('item_added', {
  productId: '123',
  quantity: 2
});

window.dispatchEvent(new CustomEvent('framework-comm', {
  detail: message
}));

验证函数示例：

function validateMessage(msg) {
  const requiredFields = [
    'protocol', 'timestamp', 'type', 'payload'
  ];
  
  if (!msg || typeof msg !== 'object') {
    return false;
  }
  
  for (const field of requiredFields) {
    if (!(field in msg)) return false;
  }
  
  if (msg.protocol !== 'framework-comm/v1') return false;
  if (Date.now() - msg.timestamp > 60000) return false; // 过期消息
  
  return verifySignature(msg.signature, msg.type, msg.payload);
}

调试与监控

实现通信监控机制有助于调试复杂问题。

class CommunicationLogger {
  constructor() {
    this.logs = [];
    this.maxLogs = 1000;
  }
  
  log(message, direction) {
    this.logs.push({
      timestamp: performance.now(),
      message,
      direction
    });
    
    if (this.logs.length > this.maxLogs) {
      this.logs.shift();
    }
  }
  
  getRecent() {
    return [...this.logs].reverse();
  }
  
  find(filter) {
    return this.logs.filter(entry => {
      return Object.keys(filter).every(key => {
        if (key === 'message') {
          return deepCompare(entry.message, filter.message);
        }
        return entry[key] === filter[key];
      });
    });
  }
}

// 使用示例
const logger = new CommunicationLogger();

// 在通信处理中
window.addEventListener('message', (e) => {
  logger.log(e.data, 'inbound');
  // ...处理消息
});

function sendMessage(msg) {
  logger.log(msg, 'outbound');
  window.postMessage(msg, '*');
}

通信性能优化

针对高频通信场景需要特别优化。

// 使用ArrayBuffer传输二进制数据
const buffer = new ArrayBuffer(32);
const view = new Uint32Array(buffer);

// 框架A填充数据
for (let i = 0; i < view.length; i++) {
  view[i] = i * 2;
}

// 传输
window.postMessage(buffer, '*', [buffer]);

// 框架B接收
window.addEventListener('message', (e) => {
  if (e.data instanceof ArrayBuffer) {
    const receivedView = new Uint32Array(e.data);
    console.log(receivedView);
  }
});

对于文本数据，考虑使用差异更新：

function createPatch(oldObj, newObj) {
  const patch = {};
  for (const key in newObj) {
    if (!(key in oldObj) || oldObj[key] !== newObj[key]) {
      patch[key] = newObj[key];
    }
  }
  return patch;
}

// 使用
const oldState = { a: 1, b: 2 };
const newState = { a: 1, b: 3, c: 4 };

const patch = createPatch(oldState, newState);
// patch = { b: 3, c: 4 }

错误处理与恢复

健壮的通信系统需要完善的错误处理。

class CommunicationManager {
  constructor() {
    this.pendingRequests = new Map();
    this.sequenceId = 0;
    this.setupListeners();
  }
  
  setupListeners() {
    window.addEventListener('message', this.handleResponse);
    setInterval(this.checkTimeouts, 5000);
  }
  
  sendRequest(type, payload, timeout = 3000) {
    const id = ++this.sequenceId;
    const request = {
      id,
      type,
      payload,
      timestamp: Date.now(),
      timeout
    };
    
    this.pendingRequests.set(id, request);
    window.postMessage(request, '*');
    
    return new Promise((resolve, reject) => {
      request.resolve = resolve;
      request.reject = reject;
    });
  }
  
  handleResponse = (e) => {
    if (!e.data || !e.data.responseTo) return;
    
    const request = this.pendingRequests.get(e.data.responseTo);
    if (!request) return;
    
    if (e.data.error) {
      request.reject(new Error(e.data.error));
    } else {
      request.resolve(e.data.payload);
    }
    
    this.pendingRequests.delete(e.data.responseTo);
  };
  
  checkTimeouts = () => {
    const now = Date.now();
    for (const [id, request] of this.pendingRequests) {
      if (now - request.timestamp > request.timeout) {
        request.reject(new Error('Request timeout'));
        this.pendingRequests.delete(id);
      }
    }
  };
}

// 使用示例
const comm = new CommunicationManager();

async function fetchData() {
  try {
    const data = await comm.sendRequest('getUser', { id: 123 });
    console.log('Received:', data);
  } catch (err) {
    console.error('Error:', err.message);
  }
}