[JS] 怎样解开依赖项之间生命周期的耦合？

Question

例如：

function renderClient(webSocket) {
  const span = document.createElement('span');
  webSocket.addEventListener('message', ({ data }) => {
    span.textContent = data;
  });
  return span;
}

document.getElementById('startWebSocketButton').onclick = () => {
  const webSocket = new WebSocket('wss://echo.websocket.org');
  const clientSpan = renderClient(webSocket);
  document.body.append(clientSpan);
  webSocket.addEventListener('open', webSocket.send.bind(webSocket, 'hello world'));
}

Demo：https://jsfiddle.net/liqi0816...

借助依赖注入的技巧，renderClient对webSocket的耦合解开了，任何支持message事件接口的对象都可以塞进去。

但现在仍然要求webSocket的生命周期必须比renderClient长。比如说，如果webSocket因不明原因断掉，似乎没有办法新开一个链接，然后拿去替换。从这个角度来说，依赖项之间仍然是存在生命周期的耦合的。所以想请问大家：

1. “生命周期的耦合”这是一个有价值的问题吗？
2. 仅就上面替换webSocket的情景来说，有什么优雅的解决办法？

提前感谢大家的建议。