微前端 - qiankun 入门到实践——第三节：Qiankun简介

青焰聚鑫
2,581 阅读3分钟

Qiankun的核心理念

什么是Qiankun？ Qiankun是阿里巴巴开源的一款微前端框架，基于single-spa实现，提供了一套完整的解决方案。Qiankun的核心理念是通过微前端架构实现大型前端项目的拆分与独立开发，从而提升项目的灵活性和可维护性。

Qiankun的核心功能

  • 子应用注册与加载：Qiankun支持多种前端框架的子应用注册和动态加载，确保子应用能够独立运行。

  • 应用间通信：提供主应用与子应用之间的通信机制，支持全局状态管理和事件发布-订阅模式。

  • 样式隔离与共享：支持子应用之间的样式隔离，避免样式冲突，同时提供共享样式的机制。

  • 状态管理：支持主应用与子应用之间的共享状态管理，确保数据一致性。

Qiankun的基本功能

子应用注册与加载 Qiankun允许开发者注册多个子应用，并通过简单的配置实现动态加载。子应用可以使用不同的前端框架开发，如React、Vue、Angular等。

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:7100',
    container: '#container',
    activeRule: '/app1',
  },
  {
    name: 'app2',
    entry: '//localhost:7200',
    container: '#container',
    activeRule: '/app2',
  },
]);

start();

应用间通信 Qiankun提供了多种通信方式，包括自定义事件和全局状态管理，确保主应用和子应用之间能够顺畅地进行数据传递和事件触发。

自定义事件通信示例：

// 主应用中发布事件
window.dispatchEvent(new CustomEvent('globalStateChange', { detail: { key: 'value' } }));

// 子应用中监听事件
window.addEventListener('globalStateChange', (event) => {
  console.log(event.detail); // 输出 { key: 'value' }
});

样式隔离与共享 为了避免样式冲突，Qiankun提供了样式隔离机制。开发者可以使用CSS Scope或Shadow DOM技术进行样式隔离，同时可以通过全局样式文件或CSS-in-JS方案实现样式共享。

CSS Scope示例：

/* 主应用样式 */
.main-app {
  background-color: #f0f0f0;
}

/* 子应用样式 */
.child-app {
  background-color: #ffffff;
}

Shadow DOM示例：

const container = document.querySelector('#container');
const shadowRoot = container.attachShadow({ mode: 'open' });

shadowRoot.innerHTML = `
  <style>
    .child-app {
      background-color: #ffffff;
    }
  </style>
  <div class="child-app">
    <!-- 子应用内容 -->
  </div>
`;

状态管理 Qiankun支持主应用和子应用之间的共享状态管理，可以使用Redux等状态管理库来实现。下面是一个简单的Redux状态共享示例：

主应用中使用Redux：

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

const App = () => (
  <Provider store={store}>
    {/* 应用组件 */}
  </Provider>
);

export default App;

子应用中使用Redux：

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

const App = () => (
  <Provider store={store}>
    {/* 子应用组件 */}
  </Provider>
);

export default App;

Qiankun的应用场景

企业级前端项目 在大型企业级前端项目中，不同团队可能负责不同的业务模块，Qiankun可以帮助实现这些模块的独立开发和部署，提高开发效率和项目灵活性。

渐进式迁移 在需要逐步将旧有单体应用迁移到微前端架构时，Qiankun提供了平滑过渡的解决方案，减少一次性重构的风险。

多技术栈项目 在一个项目中，如果需要使用多种前端框架（如React、Vue、Angular等），Qiankun能够轻松实现多框架的集成和协作。

这就是第三节课程的详细内容。通过这一节的学习，前端开发人员将了解Qiankun的核心理念、基本功能及其应用场景，为后续的实践打下基础。

avatar
文章
阅读
粉丝