好家伙,

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 functioninit(

  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

(asyncfunctionmain() {

  await registerPlugins();



  init(document.getElementById('lce-container')!, {

    locale:'zh-CN',

    enableCondition:true,

    enableCanvasLock:true,//默认绑定变量

    supportVariableGlobally: true,

    requestHandlersMap: {

      fetch: createFetchHandler(),

    },

    appHelper,

  });

})();

3.解释init()

export async functioninit(

  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组件所代表的区域内。

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

标签: none

添加新评论