好家伙,
demo-general项目运行后主界面如下
解析阿里低开引擎中的初始化方法init
拆解项目来自阿里的lowcode engine目录下的 demo general项目
0.找到入口文件
可以看到整个项目用到的插件非常之多
于是
-
init:
init方法用于初始化低代码引擎，负责加载各种插件并配置引擎的运行环境。 -
plugins:
plugins是一个插件集合，包含了多个插件，用于扩展低代码引擎的功能。 -
createFetchHandler:
createFetchHandler方法用于创建一个数据源的处理器，用于处理数据源相关的操作。 -
EditorInitPlugin: 编辑器初始化插件，用于初始化低代码引擎的编辑器。
-
UndoRedoPlugin: 撤销重做插件，提供撤销和重做操作的功能。
-
ZhEnPlugin: 中英文切换插件，用于实现界面语言的切换。
-
CodeGenPlugin: 代码生成插件，用于生成代码。
-
DataSourcePanePlugin: 数据源面板插件，用于管理数据源。
-
SchemaPlugin: Schema 插件，用于处理数据模型的定义和管理。
-
CodeEditorPlugin: 代码编辑器插件，用于提供代码编辑功能。
-
ManualPlugin: 手册插件，提供用户手册和帮助文档。
-
InjectPlugin: 注入插件，用于注入特定功能或代码。
-
SimulatorResizerPlugin: 模拟器调整插件，用于调整模拟器的大小。
-
ComponentPanelPlugin: 组件面板插件，用于管理可用组件。
-
DefaultSettersRegistryPlugin: 默认设置注册插件，用于注册默认设置。
-
LoadIncrementalAssetsWidgetPlugin: 加载增量资源小部件插件，用于加载增量资源。
-
SaveSamplePlugin: 保存示例插件，用于保存示例代码。
-
PreviewSamplePlugin: 预览示例插件，用于预览示例代码。
-
CustomSetterSamplePlugin: 自定义设置示例插件，用于自定义设置示例。
-
SetRefPropPlugin: 设置引用属性插件，用于设置引用属性。
-
LogoSamplePlugin: Logo 示例插件，用于展示 Logo 示例。
-
SimulatorLocalePlugin: 模拟器语言插件，用于设置模拟器的语言。
-
lowcodePlugin: 低代码组件插件，用于提供低代码组件功能。
-
appHelper: 应用程序辅助方法，可能包含一些辅助函数或工具函数。
-
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组件所代表的区域内。
至此,低开引擎的初始化完成
![洛谷 P11345 [KTSC 2023 R2] 基地简化 题解](http://www.itfaba.com/wp-content/themes/kemi/timthumb.php?src=http://www.itfaba.com/wp-content/themes/kemi/img/random/3.jpg&w=218&h=124&zc=1)
