面试软件公司，这个你必须了解！

一直以来很多软件行业相关人士可能一直刷到一些低代码的相关文章，但都是零零散散的，根本记不住，不方便学习。另外，还有一些刚毕业或者找工作的朋友最近面试的时候可能也频频被问到关于低代码的问题而不知其所谓。今天，本文就带大家做一个系统的学习总结。

关于低代码，相信部分朋友已经有了一定的了解。低代码的理念就是尽可能的减少软件开发过程中的代码编写量，以此来提高软件开发的效率。节省高级开发人员人力，以此来解决数字化时代企业应用开发需求井喷的局面。其要表现形式就是拖拽式的搭建某个页面或者应用程序，这一类的开发工具从界面上来看基本上都相差无几，下面放一个星云低代码的空页给大家做个参考。

我们从星云低代码平台可以看到低代码平台的大致布局如下图所示，顶部为工具栏，有一些开发工具如预览、重载、全局变量等等。左侧侧边栏为物料区，右侧为组件属性设置区，中间就是画布区。

先来看最左侧的物料区，这是低代码的起始点。物料区其实功能不算复杂，我们会有一个 componentList，其中包含了各种组件的基本信息，直接进行循环渲染即可。同时还会顺势生成一个 componentMap，主要是为了方便后续通过组件名迅速获取组件的元信息。

物料区本身并不繁杂，这里着重提及三个注意点：

• 组件的分类：
  • 容器组件（此类组件主要用于协助布局和嵌套）
  • 基本组件（常见的有图片、文本、输入框、视频等）
  • 集成度稍高一些的组件（表格、表单、图表、自定义组件、业务组件）
• 如何加载组件？不管在何种情况下，在前端加载文件仅有两种方式：
  • 一个是 import()
  • 一个是 <script>

此外，一些成熟度较高且产品力优秀的低代码平台，应当具备配置自定义组件的功能，例如星云低代码。

接下来是画布区，画布区常见的几种实现方式如下：

自由画布：将元素拖放到何处，它就位于何处，配合容器组件能够协助布局以实现自适应。

流式布局：组件从左到右、从上往下自然排列，比如 H5 就是单纯地从上往下依次平铺展开。

自动布局：同样是拖到哪就放到哪，但如果原来的位置已有组件，则会将其挤开，被挤开的元素还会存在一个递归挤开的过程。

栅格画布：类似于前端组件库中的栅格布局，一行 24 列、一行 12 列这样进行划分填充，看上去较为规范且整齐。

网格画布：类似棋盘般的网格，每个网格为 8px（依据 UI 规范），拖拽组件时会自动吸附到这些网格线上，如此能够让整体显得更加错落有致（倘若您有特定的设计规范，可能会需要用到这种画布）。

混合布局：是效率和通用性的权衡。

接下来简单谈谈右侧的属性设置区，这个区域通常会支持三种基本的设置：props、样式和事件。一般来说，我们的操作流程是这样的：

• 点选画布区的某个组件
• 触发将某个全局变量设置为当前组件
• 右侧属性面板会依据当前组件的 componentName 从 componentMap 中找到组件对应的 setters（可配置项），此 setters 实际上就是最初在物料协议中约定的 props，但可能与 props 存在些许细微差别，需要自行手动编写函数进行转换；或者可以直接在物料协议中额外添加一个 setters 字段，专门描述有哪些属性能够支持配置。这两种方式都是可行的。
• 然后同样进行单纯的循环渲染 setters
• 再将当前组件的 state（初始值）赋值给 setters

最后是顶部操作区，前面所述的那几个组成部分其实已经构成了低代码中最为核心的部分，我们可以称之为 Core（内核）。对于顶部操作区，通常可以具备前进、后退、清空等操作，不过这些操作并非是必需的，它们通常以插件的形式存在，也便于大家共同维护和扩展，这便是微内核架构。