Qiankun css isolation
Qiankun 是一个流行的微前端框架，它提供了一种用于实现独立 CSS 隔离的机制。该机制被称为 “CSS in JS isolation”，它通过在应用程序的不同微前端模块之间动态创建 <style> 标签来实现隔离的 CSS。 我们来看一个使用 qiankun 进行 CSS 隔离的示例： 通过使用以上代码，乾坤会在微应用渲染时动态创建和加载 CSS，并将其隔离在 <style> 标签中。这样可以确保微应用之间的 CSS 类名和样式不会相互干扰，实现了独立的 CSS 隔离。 需要注意的是，乾坤的 CSS 隔离机制仅适用于各个微应用之间的隔离，而不会影响主应用的 CSS。主应用的 CSS 仍然会影响整个页面，因此在设计主应用的样式时需要注意不要与微应用产生冲突。 在乾坤框架中，使用 useCssLoader 钩子后，乾坤会在微应用的渲染过程中动态创建 DOM 元素和 <style> 标签，并将微应用的 CSS 内容插入到这个标签中。下面是具体的 DOM 结构示例： 在上面的示例中，<div> 标签具有 id 属性为 “micro-app-container”，它是微应用的容器。乾坤会将微应用的其他内容渲染在这个容器中。 同时，乾坤会在 <style> 标签中插入微应用的 CSS 内容。这些 CSS 规则将仅适用于 <div id=”micro-app-container”> […]
Read MoreMicro Frontends core concepts
什么是微前端 微前端是一种用于构建大型前端应用程序的架构模式，旨在解决单体前端应用程序的复杂性和可扩展性问题。微前端的核心思想是将一个大型前端应用拆分为多个独立的、可独立开发、测试和部署的小型前端应用，每个应用都可以有自己的技术栈和开发团队，以及独立的生命周期。 前端实现方式 实现微前端有多种方式，以下是目前一些常见的实现方式： 值得注意的是，微前端是一种架构模式，而不是一个具体的技术。因此，无论选择哪种实现方式，都需要考虑以下核心原则：独立性、可扩展性、可组合性和隔离性。 微前端的好处 与传统的单体前端不同，微前端允许多个团队独立地在不同的软件部分上工作。 原始的工作团队被分成几个独立的团队，每个人都可以尽其所能地表达自己，在每个特定的任务上，每个团队都可以做出自己的决策，包括架构、编码风格和测试。 微前端在最终结果方面也很有用。通过让多个团队自由使用他们喜欢的技术，他们会感到不受限制，更有动力编写高质量的代码。 微前端极大地改善了前端开发过程，因为不再有单个团队处理与单体前端相关的所有通信负载，现在有较小的自治团队，在同时处理不同功能的实现。 构建微前端比构建一个巨大的单体软件要快得多，这是发布新功能的重要一步。因此，实现时间显著提高。 每个微前端都可以使用不同的技术栈来实现，因为它们是自治的软件部分，这是一个巨大的优势。 这是因为单体前端的开发团队（具有单一技术栈）可以根据他们在特定技术栈方面的专业知识被分成几个团队。 另一方面，在同一项目中使用多个技术栈有助于聘请新开发人员。 单体应用程序在增长时很难维护。相比之下，微前端架构由小部分组成，非常容易测试和维护。 维护大型单体应用程序对开发人员来说是一项挑战，因为它需要很多时间，但采用微前端方法时，每个团队负责维护他们开发的功能。 此外，每个团队可以自由选择他们喜欢的测试工具和技术。 此外，通过使用小型软件片段，更容易理解每个功能的工作流程，在需要维护时更容易。 通过实施微服务，增加了更新后端功能而不影响代码其他部分的灵活性。然而，单体前端仍然存在。 微前端旨在减少单体前端的大小和重要性，从而提供更大的前端更新灵活性。 这是因为微前端可以将单体前端分解成更小的组件，从而更容易更新每个业务流程，从而生成更多迭代更新的更好客户体验。 由于其本质，微前端具有比单体前端少得多的代码量。这些代码更精确、更易于管理，因此开发人员不太可能因其复杂性而犯错误，并且可以更快地、更轻松地工作。 这在创建需要开发复杂工作流程的应用程序时非常重要。 当开发具有共同工作流要求的多个应用程序时，微前端特别有益。通过使用微前端，公司可以利用功能的共同性，在创建新应用程序时节省时间和精力。 例如，如果公司有几个站点需要处理付款功能，则可以在所有应用程序中使用相同的功能，而不是每次从头开始创建。 核心概念 参考资料
Read MoreSystem.js core concept
SystemJS是一个模块加载器，它是用JavaScript编写的、可在浏览器中运行的开源库。它的目标是允许在浏览器环境中加载和运行使用不同模块规范编写的JavaScript模块。 SystemJS支持多种模块规范，包括AMD、CommonJS、ES6模块等。它提供了一种统一的接口，使得开发人员可以以一种一致的方式加载和使用不同模块规范的代码。这在一些场景下特别有用，比如当你需要在浏览器中同时使用多个库或框架，而它们使用不同的模块规范时。 SystemJS的核心功能包括： 以下是一个使用SystemJS加载和运行模块的简单示例： 首先，你需要在HTML文件中引入SystemJS库： 接下来，你可以编写一个JavaScript模块并保存为module.js： 然后，你可以编写另一个JavaScript文件，用于加载和使用这个模块，例如main.js： 在这个例子中，System.import()用于加载module.js模块，然后通过返回的Promise对象来调用greet()函数。 最后，在HTML文件中添加一个运行示例的按钮和执行脚本的代码： 现在，当你点击”Run Example”按钮时，SystemJS将加载main.js模块，然后依次加载它所依赖的module.js模块，并执行相应的代码。在控制台中你会看到输出Hello, John!。 这是一个简单的SystemJS示例，它演示了如何使用SystemJS来加载和运行模块。你可以根据自己的需求编写更复杂的模块和应用程序，并通过SystemJS实现模块化的开发和加载。
Read More
