第144篇:阿里低开项目 init方法

好家伙,

 demo-general项目运行后主界面如下

 

解析阿里低开引擎中的初始化方法init

拆解项目来自阿里的lowcode engine目录下的 demo general项目

0.找到入口文件

可以看到整个项目用到的插件非常之多

于是

1. init: init 方法用于初始化低代码引擎，负责加载各种插件并配置引擎的运行环境。

2. plugins: plugins 是一个插件集合，包含了多个插件，用于扩展低代码引擎的功能。

3. createFetchHandler: createFetchHandler 方法用于创建一个数据源的处理器，用于处理数据源相关的操作。

4. EditorInitPlugin: 编辑器初始化插件，用于初始化低代码引擎的编辑器。

5. UndoRedoPlugin: 撤销重做插件，提供撤销和重做操作的功能。

6. ZhEnPlugin: 中英文切换插件，用于实现界面语言的切换。

7. CodeGenPlugin: 代码生成插件，用于生成代码。

8. DataSourcePanePlugin: 数据源面板插件，用于管理数据源。

9. SchemaPlugin: Schema 插件，用于处理数据模型的定义和管理。

10. CodeEditorPlugin: 代码编辑器插件，用于提供代码编辑功能。

11. ManualPlugin: 手册插件，提供用户手册和帮助文档。

12. InjectPlugin: 注入插件，用于注入特定功能或代码。

13. SimulatorResizerPlugin: 模拟器调整插件，用于调整模拟器的大小。

14. ComponentPanelPlugin: 组件面板插件，用于管理可用组件。

15. DefaultSettersRegistryPlugin: 默认设置注册插件，用于注册默认设置。

16. LoadIncrementalAssetsWidgetPlugin: 加载增量资源小部件插件，用于加载增量资源。

17. SaveSamplePlugin: 保存示例插件，用于保存示例代码。

18. PreviewSamplePlugin: 预览示例插件，用于预览示例代码。

19. CustomSetterSamplePlugin: 自定义设置示例插件，用于自定义设置示例。

20. SetRefPropPlugin: 设置引用属性插件，用于设置引用属性。

21. LogoSamplePlugin: Logo 示例插件，用于展示 Logo 示例。

22. SimulatorLocalePlugin: 模拟器语言插件，用于设置模拟器的语言。

23. lowcodePlugin: 低代码组件插件，用于提供低代码组件功能。

24. appHelper: 应用程序辅助方法，可能包含一些辅助函数或工具函数。

25. global.scss: 全局样式文件，定义了全局的样式规则

那么把我们主要要解析的文件拿出来

就这行

import { init, plugins } from '@alilc/lowcode-engine';

1.官方文档定位包位置

 

2.在lowcode-engine中寻找init方法

 直接找到

engine-core引擎核心,是他没错了

 

我们来看看这段代码到底在做什么?

//engine-core.ts
export async function init(
  container?: HTMLElement,
  options?: IPublicTypeEngineOptions,
  pluginPreference?: PluginPreference,
  ) {
  await destroy();
  let engineOptions = null;
  if (isPlainObject(container)) {
    engineOptions = container;
    engineContainer = document.createElement('div');
    engineContainer.id = 'engine';
    document.body.appendChild(engineContainer);
  } else {
    engineOptions = options;
    engineContainer = container;
    if (!container) {
      engineContainer = document.createElement('div');
      engineContainer.id = 'engine';
      document.body.appendChild(engineContainer);
    }
  }
  engineConfig.setEngineOptions(engineOptions as any);

  const { Workbench } = common.skeletonCabin;
  if (options && options.enableWorkspaceMode) {
    const disposeFun = await pluginPromise;
    disposeFun && disposeFun();
    render(
      createElement(WorkSpaceWorkbench, {
        workspace: innerWorkspace,
        // skeleton: workspace.skeleton,
        className: 'engine-main',
        topAreaItemClassName: 'engine-actionitem',
      }),
      engineContainer,
    );
    innerWorkspace.enableAutoOpenFirstWindow = engineConfig.get('enableAutoOpenFirstWindow', true);
    innerWorkspace.setActive(true);
    innerWorkspace.initWindow();
    innerHotkey.activate(false);
    await innerWorkspace.plugins.init(pluginPreference);
    return;
  }

  await plugins.init(pluginPreference as any);

  render(
    createElement(Workbench, {
      skeleton: innerSkeleton,
      className: 'engine-main',
      topAreaItemClassName: 'engine-actionitem',
    }),
    engineContainer,
  );
}

 

回到前面demo-general项目中中初始化部分

//index.tx
(async function main() {
  await registerPlugins();

  init(document.getElementById('lce-container')!, {
    locale: 'zh-CN',
    enableCondition: true,
    enableCanvasLock: true,
    // 默认绑定变量
    supportVariableGlobally: true,
    requestHandlersMap: {
      fetch: createFetchHandler(),
    },
    appHelper,
  });
})();

 

3.解释init()

export async function init(
  container?: HTMLElement, // 初始化函数参数：容器元素，可选
  options?: IPublicTypeEngineOptions, // 初始化函数参数：引擎选项，可选
  pluginPreference?: PluginPreference, // 初始化函数参数：插件偏好设置，可选
) {
  await destroy(); // 销毁之前的状态，确保初始化干净

  let engineOptions = null; // 初始化引擎选项变量

  if (isPlainObject(container)) { // 如果容器是一个普通对象
    engineOptions = container; // 将容器作为引擎选项
    engineContainer = document.createElement('div'); // 创建一个新的 div 元素作为引擎容器
    engineContainer.id = 'engine'; // 设置容器的 id 为 'engine'
    document.body.appendChild(engineContainer); // 将容器添加到 body 中
  } else {
    engineOptions = options; // 使用传入的引擎选项
    engineContainer = container; // 使用传入的容器
    if (!container) { // 如果容器不存在
      engineContainer = document.createElement('div'); // 创建一个新的 div 元素作为引擎容器
      engineContainer.id = 'engine'; // 设置容器的 id 为 'engine'
      document.body.appendChild(engineContainer); // 将容器添加到文档的 body 中
    }
  }

  engineConfig.setEngineOptions(engineOptions as any); // 设置引擎配置的选项

  const { Workbench } = common.skeletonCabin; // 从骨架中解构出 Workbench 组件

  if (options && options.enableWorkspaceMode) { // 如果启用工作区模式
    const disposeFun = await pluginPromise; // 等待插件 Promise 的解析
    disposeFun && disposeFun(); // 如果存在 disposeFun 函数，则执行

    render( // 渲染工作区工作台组件
      createElement(WorkSpaceWorkbench, {
        workspace: innerWorkspace, // 传入内部工作区
        className: 'engine-main', // 设置类名
        topAreaItemClassName: 'engine-actionitem', // 设置顶部区域项的类名
      }),
      engineContainer, // 渲染到引擎容器中
    );

    innerWorkspace.enableAutoOpenFirstWindow = engineConfig.get('enableAutoOpenFirstWindow', true); // 设置内部工作区自动打开第一个窗口的属性
    innerWorkspace.setActive(true); // 设置工作区为活动状态
    innerWorkspace.initWindow(); // 初始化窗口
    innerHotkey.activate(false); // 激活快捷键
    await innerWorkspace.plugins.init(pluginPreference); // 初始化工作区插件
    return; // 返回
  }

  await plugins.init(pluginPreference as any); // 初始化插件

  render( // 渲染工作台组件
    createElement(Workbench, {
      skeleton: innerSkeleton, // 传入内部骨架
      className: 'engine-main', // 设置类名
      topAreaItemClassName: 'engine-actionitem', // 设置顶部区域项的类名
    }),
    engineContainer, // 渲染到引擎容器中
  );
}

再来找

 

 最后,来到workbench.tsx中

4.workbench.tsx

export class Workbench extends Component<{
  workspace: Workspace; // 工作空间对象
  config?: EditorConfig; // 编辑器配置（可选）
  components?: PluginClassSet; // 插件类集合
  className?: string; // 类名
  topAreaItemClassName?: string; // 顶部区域项的类名
}, {
  workspaceEmptyComponent: any; // 工作空间为空时的组件
  theme?: string; // 主题
}> {
  constructor(props: any) {
    super(props);
    const { config, components, workspace } = this.props;
    const { skeleton } = workspace;
    skeleton.buildFromConfig(config, components); // 从配置和组件构建骨架
    engineConfig.onGot('theme', (theme) => {
      this.setState({
        theme,
      });
    });
    engineConfig.onGot('workspaceEmptyComponent', (workspaceEmptyComponent) => {
      this.setState({
        workspaceEmptyComponent,
      });
    });
    this.state = {
      workspaceEmptyComponent: engineConfig.get('workspaceEmptyComponent'), // 获取工作空间为空时的组件
      theme: engineConfig.get('theme'), // 获取主题
    };
  }

  render() {
    const { workspace, className, topAreaItemClassName } = this.props;
    const { skeleton } = workspace;
    const { workspaceEmptyComponent: WorkspaceEmptyComponent, theme } = this.state;

    return (
      <div className={classNames('lc-workspace-workbench', className, theme)}>
        <SkeletonContext.Provider value={skeleton}>
          <TopArea className="lc-workspace-top-area" area={skeleton.topArea} itemClassName={topAreaItemClassName} /> {/* 渲染顶部区域 */}
          <div className="lc-workspace-workbench-body">
            <LeftArea className="lc-workspace-left-area lc-left-area" area={skeleton.leftArea} /> {/* 渲染左侧区域 */}
            <LeftFloatPane area={skeleton.leftFloatArea} /> {/* 渲染左侧浮动区域 */}
            <LeftFixedPane area={skeleton.leftFixedArea} /> {/* 渲染左侧固定区域 */}
            <div className="lc-workspace-workbench-center">
              <div className="lc-workspace-workbench-center-content">
                <SubTopArea area={skeleton.subTopArea} itemClassName={topAreaItemClassName} /> {/* 渲染中上区域 */}
                <div className="lc-workspace-workbench-window">
                  {
                    workspace.windows.map(d => (
                      <WindowView
                        active={d.id === workspace.window?.id} // 判断窗口是否激活
                        window={d}
                        key={d.id}
                      />
                    ))
                  }

                  {
                    !workspace.windows.length && WorkspaceEmptyComponent ? <WorkspaceEmptyComponent /> : null // 根据条件渲染工作空间为空时的组件
                  }
                </div>
              </div>
              <MainArea area={skeleton.mainArea} /> {/* 渲染主区域 */}
              <BottomArea area={skeleton.bottomArea} /> {/* 渲染底部区域 */}
            </div>
            {/* <RightArea area={skeleton.rightArea} /> */}
          </div>
          <TipContainer /> {/* 渲染提示容器 */}
        </SkeletonContext.Provider>
      </div>
    );
  }
}

5.main-area.tsx

export default class MainArea extends Component<{ area: Area<any, Panel | Widget> }> {
  render() {
    const { area } = this.props;
    return (
      <div className={classNames('lc-main-area engine-workspacepane')}>
        {area.container.items.map((item) => item.content)}
      </div>
    );
  }
}

以上代码,

将area.container.items数组中每个元素的content属性渲染到页面上，展示在MainArea组件所代表的区域内。

至此,低开引擎的初始化完成