好家伙,
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组件所代表的区域内。
至此,低开引擎的初始化完成
评论区