妙招 | QIANKUN 源码剖析：轻松设置默认应用

2023-04-10 09:18:47

揭秘 QIANKUN 源码中的设置默认应用秘籍

微前端开发凭借其模块化和可重用的优势，在前端领域大放异彩。然而，如果处理不当，其复杂性和繁琐性也令人望而生畏。今天，我们就深入 QIANKUN 源码，探寻设置默认应用的秘密，助您轻松踏上微前端开发之旅。

默认应用设置的前奏：setDefaultMountApp 方法

一切始于 QIANKUN 源码中的 setDefaultMountApp 方法，它位于 @qiankun/core 包中，肩负着设置默认微前端应用的重任。该方法需要一个字符串参数，即要设置的应用名称，并通过监听 qiankun:registered 事件来动态加载该应用。

setDefaultMountApp(name: string): void {
  if (!app.initialized) {
    console.warn('[qiankun] You should call init method first!');
    return;
  }

  const appList = normalizeAppName(name);
  appList.forEach((appName) => {
    if (app.appIndex[appName]) {
      console.error(
        `[qiankun] the appName ${appName} is already exists in ${app.name}`,
      );
    }
    console.log(`[qiankun] [${app.name}] Set ${appName} as default mount app`);
    app.appIndex[appName] = {
      name: appName,
      register: [],
    };

    app.event.emit('qiankun:registered', appName, app);
  });
}

工作流程揭秘：事件触发与动态加载

当您调用 setDefaultMountApp 方法时，它会首先检查 QIANKUN 是否已经初始化，如果没有，它会抛出一个警告信息。然后，它会将传递的应用名称标准化为一个数组，以便可以同时设置多个默认应用。接着，它会检查这些应用是否已经存在，如果存在，它会抛出一个错误信息。最后，它会将这些应用添加到 appIndex 中，并触发 qiankun:registered 事件，以便其他模块可以感知到这些应用的存在。

代码实例：在主应用中设置默认应用

在您的主应用中，可以通过以下代码来设置默认微前端应用：

import { start, setDefaultMountApp } from '@qiankun/core';

setDefaultMountApp('app1');

start();

主应用的事件监听：捕捉 `qiankun:registered` 事件

当您在主应用中调用 start 方法时，它会监听 qiankun:registered 事件。当 setDefaultMountApp 方法触发这个事件时，主应用会加载并挂载相应的微前端应用。这个过程是完全自动化的，您无需编写任何额外的代码。

迈出微前端第一步：拥抱 QIANKUN 的魅力

现在，您已经了解了 QIANKUN 源码中设置默认应用的秘密，是不是觉得微前端开发变得更加简单了呢？赶快尝试一下，让您的前端应用焕然一新吧！探索 QIANKUN 的世界，体验微前端开发的魅力，打造出令人惊叹的应用吧！

常见问题解答

如何同时设置多个默认应用？
您可以将应用名称作为数组传递给 setDefaultMountApp 方法，例如：setDefaultMountApp(['app1', 'app2'])。
为什么会出现 app.appIndex[appName] 已存在的错误？
这表示您试图设置一个已经存在的默认应用。确保应用名称唯一。
如何动态切换默认应用？
您可以再次调用 setDefaultMountApp 方法来动态切换默认应用。
主应用需要监听哪些事件？
主应用需要监听 qiankun:registered 事件，以便在默认应用注册后加载并挂载它们。
有哪些最佳实践可以指导微前端开发？
确保应用模块化、可重用，并采用清晰的通信协议。利用 QIANKUN 的灵活性和可扩展性，探索微前端的无限潜力。