2024-11-29 10:22 北京工业大学 Web前端 发布于北京
关注
前端项目推荐-低代码demo
从可拖拽组件的设计开始讲起，我们需要设计组件的结构，每个组件都有一个JSON格式的数据结构来描述其基本信息，包括唯一标识、名称、属性和子组件。
通过React.createElement()递归地将JSON信息渲染成组件树。这个方法的参数包括组件名称、属性对象和子组件。
组件的属性存储在各自的配置文件中，每个物料的index.ts文件中定义了组件的setter、事件和方法，以便在渲染时传递给createReactElement。
组件通信通过事件处理来实现：通过JSON结构来定义事件，当组件被选中时，可以选择触发其方法。使用Map来存储组件ID与实例的映射，以便在需要时进行方法调用。
使用useImperativeHandle暴露组件的方法，通过ref可以在父组件中调用这些方法。
组件选中与高亮，定义选中机制，在渲染时为每个组件添加一个唯一的key，通过事件监听获取被点击组件的ID，更新当前选中组件的状态。利用获取的组件ID，通过DOM操作来高亮被选中的组件。
在组件被选中后，配置栏会动态渲染与该组件相关的表单，用户可以通过表单更新组件的属性。
每个事件使用JSON存储，包括类型和配置。在预览模式下，将这些JSON格式的事件转换为可执行的函数。
技术点1：撤销与重做
针对面试可以分别准备两板，首先是全量的保存，后续你优化为快照管理：采用改进的快照机制，仅记录变更的组件ID和实例，而不是完整的组件树，避免冗余数据的产生。
组件拖拽的拖拽实现：
通过react-dnd等库实现组件的拖拽和放置，支持嵌套结构的拖放。也可以用原生dragapi去做
关于编辑与预览模式
模式切换：根据不同的模式（编辑/预览）使用不同的渲染器，分别控制事件触发和属性展示的行为。可以用本地存储去存预览的数据
#编程# #前端# #前端入门# #前端项目# #前端面试#
通过React.createElement()递归地将JSON信息渲染成组件树。这个方法的参数包括组件名称、属性对象和子组件。
组件的属性存储在各自的配置文件中，每个物料的index.ts文件中定义了组件的setter、事件和方法，以便在渲染时传递给createReactElement。
组件通信通过事件处理来实现：通过JSON结构来定义事件，当组件被选中时，可以选择触发其方法。使用Map来存储组件ID与实例的映射，以便在需要时进行方法调用。
使用useImperativeHandle暴露组件的方法，通过ref可以在父组件中调用这些方法。
组件选中与高亮，定义选中机制，在渲染时为每个组件添加一个唯一的key，通过事件监听获取被点击组件的ID，更新当前选中组件的状态。利用获取的组件ID，通过DOM操作来高亮被选中的组件。
在组件被选中后，配置栏会动态渲染与该组件相关的表单，用户可以通过表单更新组件的属性。
每个事件使用JSON存储，包括类型和配置。在预览模式下，将这些JSON格式的事件转换为可执行的函数。
技术点1：撤销与重做
针对面试可以分别准备两板，首先是全量的保存，后续你优化为快照管理：采用改进的快照机制，仅记录变更的组件ID和实例，而不是完整的组件树，避免冗余数据的产生。
组件拖拽的拖拽实现：
通过react-dnd等库实现组件的拖拽和放置，支持嵌套结构的拖放。也可以用原生dragapi去做
关于编辑与预览模式
模式切换：根据不同的模式（编辑/预览）使用不同的渲染器，分别控制事件触发和属性展示的行为。可以用本地存储去存预览的数据
#编程# #前端# #前端入门# #前端项目# #前端面试#
全部评论
寄了的小太阳很有担当
重庆邮电大学 前端工程师
求
牛客238755632号
北京交通大学 Web前端
在大厂低代码做后台管理还需要继续待吗，感觉提升不了
摆烂为不摆烂
门头沟学院 前端工程师
这个不会是神光的项目吧,我这几天就在写这个项目相关推荐
查看10道真题和解析