前端项目推荐-低代码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去做
关于编辑与预览模式
模式切换:根据不同的模式(编辑/预览)使用不同的渲染器,分别控制事件触发和属性展示的行为。可以用本地存储去存预览的数据
#编程# #前端# #前端入门# #前端项目# #前端面试#
全部评论
这个不会是神光的项目吧,我这几天就在写这个项目
点赞 回复 分享
发布于 11-29 18:09 江西

相关推荐

从十月份开始确定项目方向,模型选择和技术栈搭配。 从 Ollama 开始配模型,加入 Langchain 处理链路,然后开始前后端联调,各种报错接踵而至。每天没有需求了就一个人在工位敲敲敲,耳机一带就是肝,睁眼就是九点半十一月开始基础功能完成,开始处理文件检索,对中英文引用不同库处理。又在司内看见一些分享方案,又尝试加入搜索召回。拿公司mac跑的模型,一开终端风扇就疯狂转,搞得同事都来问我你小子又不学前端是吧,谁家运行前端电脑这么吵?后面快离职的时候又开始搞搜索推荐,把部门搜推的文章看了,发现技术门槛太高了,只能自己慢慢琢磨方案。没逝的,自己慢慢啃呗。又还想加入热搜排行榜的功能,因为在腾讯也做了一个多月排行榜的业务,前端这个还是熟练的。离职后又完善了一部分,自己还是喜欢用的,后面设备跑起来会更快。等明年去实习了,直接就是一整套方案放到司内,做点技术分享技术栈:前端: Next.js + Ts后端:Python(Flask)模型相关:LangChain 工具链:处理 Prompt、上下文检索和输出解析。NLP 工具(Jieba、TF-IDF):用于中文语料分析和推荐。文档加载与处理(PyPDFLoader):支持用户内容输入。LLM 模型(Ollama,Lama3):实现核心问答和扩展功能。#现在前端的就业环境真的很差吗##前端##大模型##实习##项目##简历#
点赞 评论 收藏
分享
12-16 21:16
快手_前端开发
老生常谈的问题 很多同学都喜欢在简历上说自己会性能优化 但是问起来也没几个能说明白 在项目中实现难点并且实现和逻辑闭环 这就是一个亮点内容太多了 什么拆包啊 ssr啊 什么资源优化资源去重啊 缓存啊 cdn的协议啊 参考前一篇这篇举一个例子 我要讲的是不基于架构限制的优化 就是关于有大量数据 我们怎么优化前端的渲染方式很多同学可能上来就说 懒加载啊 虚拟列表啊 按需加载啊 甚至是web worker啊 减少重排重绘啊 甚至是SSR 预渲染倒是也没毛病就是首选我们要讲逻辑 主要的数据量大的场景包括列表,表格,选择器,图表等比如说 你在写demo练手 这个时候 页面卡顿了 不要烦躁 你造亮点拿大厂offer的机会就在眼前了我们要对症下药 这个是因为dom元素数量过多 还是js执行的时间过长 还是大量的回流重绘呢大家都做过分页 这就是最常见的一种处理方式 直接就避免了大量的dom渲染如果你做了搜索的下拉选项功能 最好需要在前端或者后端加一下选型的一个限制但如果是一些不适合做分页的场景 比如说移动端下的h5页面 我们首先是可以考虑去做时间分片 去加载 比如说requestAnimationframe等 可以去搜相关文章对于h5 可能大家都会处理的就是触底加载 但滑了多了 还是会卡顿 这个时候 我们才会去说 用虚拟列表去解决 而不是上来就用 那你怎么去说服面试官他的使用场景呢 讲虚拟列表的文章 不要太多 就是技术文章其实是无限的 你也看不完 要结合你的场景 有故事 才有offer#简历中的项目经历要怎么写##现在前端的就业环境真的很差吗##我的失利项目复盘##没有实习经历,还有机会进大厂吗##那些拿到大厂offer的简历长啥样##前端#
点赞 评论 收藏
分享
评论
5
14
分享
牛客网
牛客企业服务