qiankun源码分析-3.设置默认应用

setDefaultMountApp

设置默认应用是通过setDefaultMountApp实现的，该方法接收一个string类型的参数，该参数为应用的basename。

ts 复制代码

export function setDefaultMountApp(defaultAppLink: string) {
  // can not use addEventListener once option for ie support
  window.addEventListener('single-spa:no-app-change', function listener() {
    const mountedApps = getMountedApps();
    if (!mountedApps.length) {
      navigateToUrl(defaultAppLink);
    }

    window.removeEventListener('single-spa:no-app-change', listener);
  });
}

函数的实现很简单，就是监听single-spa:no-app-change事件，当没有应用被挂载时，跳转到默认应用。 single-spa:no-app-change是single-spa的自定义事件，该事件在single-spa的start方法中被触发。具体是何时触发single-spa:no-app-change事件，我们在下一篇会有所介绍。

原本我打算写到这里就结束了，但是又觉得写这么少，多少有点糊弄，所以我就想了想，分享下自定义事件吧

自定义事件

我们知道浏览器内置了很多原生事件，比如click、load、scroll等等，我们可以通过addEventListener来监听这些事件，但是有时候我们需要自定义事件，比如single-spa:no-app-change，那么我们该如何实现呢？其实浏览器也支持我们创建自定义事件，创建方式有两种：

Event对象
CustomEvent对象

以上两个Api都可以创建自定义事件，我们通过栗子看下他们的使用：

Event对象

js 复制代码

// 创建一个事件名为stand的事件对象
const myEvent = new Event('stand', { bubbles:true, cancelable:true, composed:true });
// 设置自定义属性
myEvent.standNum = 1
// 监听stand事件
document.addEventListener("stand",function (e) {
  console.log("触发了自定义事件！", e.standNum);
}, false)

// 触发自定义事件
document.dispatchEvent(myEvent);

上面的代码就是一个简单的自定义事件，我们通过new Event创建了一个名为stand的事件对象，然后通过addEventListener监听了该事件，最后通过dispatchEvent触发了该事件。 Event对象的构造函数接收两个参数，第一个参数为事件名，第二个参数为一个对象，该对象的属性有：

bubbles：是否冒泡，默认为false
cancelable：是否可以取消事件的默认行为，默认为false
composed：事件是否可以从Shadow DOM根节点传递到根节点之外的节点，默认为false，关于shadow DOM大家可以自行了解下

CustomEvent对象

CustomEvent也可以创建一个自定义事件，但是相比Event，CustomEvent可以传递更多的信息，比如detail，我们通过栗子看下他们的使用：

js 复制代码

// 创建一个事件名为stand的事件对象
const myEvent = new CustomEvent('stand', { bubbles:true, cancelable:true, composed:true, detail: { name: '站起来', standTime: '20231108' } });

myEvent.standNum = 1
// 监听stand事件
document.addEventListener("stand",function (e) {
  console.log("触发了自定义事件！", e.standNum, e.detail);
}, false)
document.dispatchEvent(myEvent);

我们通过new CustomEvent创建了一个名为stand的事件对象，然后通过addEventListener监听了该事件，最后通过dispatchEvent触发了该事件。不同的是，CustomEvent对象我们可以传递更多的信息