当前位置: 首页 > news >正文

前端项目构建过程中涉及低代码部分思考

表单常见的增删查改的重复问题解决

1市面上有很多表单设计器与框架进行结合,封装一个表单组件,结合响应式,然后给到我们下载使用
2修改起来很麻烦,有局限,但我们可以参考他们的思路,来设计符合项目的组件来帮助我们早点下班
3通用思路是布局,控件,数据,然后常用的功能,上传,验证。
4通常是数组循环,包含布局,控件,数据每一项对应的响应式。
5功能有简单的,也有复杂的,比如模糊查询,上传文件,图片,然后富文本,自定义组件等等,这些我们应该怎么处理循环?
6vue有component组件 也有jsx写法,通常传入一个自定义组件名称给到component,但这个is绑定只支持组件实例的对象,也就是我们需要先把组件对象创造出来。
7webpack存在require读取的方法,在编译的时候读取文件夹,也可以自己手动的import组件然后给到一个对象,然后名称与对象进行映射取值,这样就保证了组件渲染。
8组件通常是需要接收参数,传出事件,然后响应式绑定参数,以及样式改变,有v-bind v-on之类的解构操作
9布局结合组件库栅格布局,然后处理了组件,表单就可以处理完成。
10列表,弹框,表单,构成了后台大多数功能,
11在很多情况下都存在没办法全部适配的需求,所以我们不能保证全部解决,解决常用的就ok

解决很多项目里很多import的处理

比如webpack require,vite的import glob之类的,然后有自动注册的插件,也有webpack配置全局变量,rollup也存在虚拟模块的用法,通常有接口,字典,组件,图片,以及各种函数,插件,样式等等的引入,导致页面内容过多import,之前是使用原型,后来发现全局混入,操作组件实例,也很方便,图片也可以使用require方法处理,图片 svg jpg png 也可以使用这样的方法导入。

因组件和表单的结合引发代码层面的组合

当表单和组件可以组合,那图表在大屏的使用,以及物料组件,拖拽,在低代码平台的使用,都是差不多的思路,
物料组件,根据一个大组件接收一个数组的参数,在拖拽完成的时候改变,然后点击循环的某一项取出来符合封装表单设计器的要求,来读取组件配置,修改内容。这样预览界面其实就是取数组,给到组件来展示内容。
大屏的低代码就是这样开始的,各种物料组件会包含一些自定义的属性,字典,接口,图片,请求,参数,甚至事件,都是配置在每一项里,循环按照规范封装抛出或者执行。

常见的表单设计器就是这样,后面的大屏低代码就变成了拖拽图表,然后修改图表,大屏包含图表,图片,自定义效果组件,然后地图,图标,接口,请求。

甚至在自定义的流程设计后台里也存在这样的表单设计器的操作。这样流行的变化,就引出了h5,uniapp,移动端的操作;

移动端的低代码设计

比如开发uniapp低代码,通常是以pc展示实现拖拽功能,使用uniapp的写法,左边是物料组件,中间是循环出来的页面,右边是表单设计器。只不过换成了uniapp组件库来实现,然后提供一个下载,预览的功能,也就是内容包含了,拖拽组件的数组,以及核心的大组件,以及涉及到了各种小组件。这样就使用uniapp重新打开这个文件,配置一下自己的接口,然后写一点数据交互几乎就完成了。
拓展到后台低代码 以及 h5,其实不推荐做成品低代码,只推荐实现代码层面的实现

因为做好后,会干掉很多人,所以尽量的保护自己的东西,拓展各种组件进行维护,除非是你自己的产品。

大屏开发物料组件的思考
大屏的图表一般选择echart4 5 图表,但目前还需要gis地图 比如高德,百度,mapbox,cesium,three,这些定制化的地图需求,所以这些定制化很高的组件,如果融合在一个项目里,不好维护,有些是使用umd远程组件的方法,注册组件然后异步加载,或者使用webpack5的邦联模块开发,有些是使用npm包的形式安装,处理组件支持,使用webpack vite 之类的 结合组件库来完成比如vue加element等等。

组件单元测试的需求

很多代码层面的低代码就有各种不同项目的不同组件,如何保证组件的高质量,以及在迭代过程中的问题,就需要使用单元测试来保证,比如思考哪些组件是必须写测试哪些没必要,市面上流行的插件有好几种,但落地起来,恐怕困难,因为很多做了更好,不做也没事的东西,在业务面前全部要让路。开发者也必须要有前瞻性,务实性,懂的取舍权衡。项目有发展好才有你的岗位

ai和开发的结合

在开发过程中,注释,测试,函数功能,以及页面样式,其实都可以让他提示我们完成,这是驱动我们的更有效率的方法,目前据说大厂内部的ai以及可以根据功能来完成代码,也有ai完成游戏剧情,甚至已经有了ai程序员,工具会替换很多人,这是时代的发展,但工具也是需要很多人一起使用落地,才可以发光发热。很多的ai都是结合编辑器。比如vscode的很多插件。在开发插件的过程中,可以可以使用vs的插件api来判断文件内容,类型,提示语句,然后接入python的接口大模型,或者ai的接口,也可以是第三方的等等,来帮助编辑代码更方便。毕竟百花齐放的vs插件生态,肯定是时代的发展。

h5游戏与小程序应用

JavaScript有各种游戏引擎开发二d的,3d的,混合开发,嵌入使用,等等。然后各种模拟的物理引擎,特效,webgl,纯h5的游戏,pc的游戏,都可以嵌入webview,也都可以结合electron打包客户端,甚至有uniapp的跨端打包,支持ios 安卓,老版的鸿蒙也支持,新版arkts,大概需要另一种打包方法。

相关文章:

  • 2024年3月22蚂蚁新村今日答案:以下哪一项是陕西省的非遗美食?
  • 大数据-基础架构设施演进的过程
  • Android学习进阶
  • Mapper.xml映射文件
  • 【笔记】Python学习记录
  • Windows 11 安装 Scoop
  • Mysql数据库:索引管理
  • 【算法与数据结构】二叉树(前中后)序遍历
  • 自营、入驻商城小程序开发
  • Charles 工具如何做断点测试?
  • 流畅的 Python 第二版(GPT 重译)(二)
  • Elastic-Job 分布式任务调度
  • 外包干了14天,技术退步明显。。。
  • 【数据库】SQL Server 2008 R2 安装过程
  • 数据结构之排序一
  • (十五)java多线程之并发集合ArrayBlockingQueue
  • 【vuex入门系列02】mutation接收单个参数和多个参数
  • 【编码】-360实习笔试编程题(二)-2016.03.29
  • 07.Android之多媒体问题
  • ESLint简单操作
  • express + mock 让前后台并行开发
  • JavaScript服务器推送技术之 WebSocket
  • JAVA并发编程--1.基础概念
  • Linux Process Manage
  • mongo索引构建
  • Mysql数据库的条件查询语句
  • react-core-image-upload 一款轻量级图片上传裁剪插件
  • Spring Boot快速入门(一):Hello Spring Boot
  • 给新手的新浪微博 SDK 集成教程【一】
  • 关于 Linux 进程的 UID、EUID、GID 和 EGID
  • 离散点最小(凸)包围边界查找
  • 面试遇到的一些题
  • 普通函数和构造函数的区别
  • 前端面试之闭包
  • ​LeetCode解法汇总307. 区域和检索 - 数组可修改
  • #宝哥教你#查看jquery绑定的事件函数
  • (1)(1.9) MSP (version 4.2)
  • (java版)排序算法----【冒泡,选择,插入,希尔,快速排序,归并排序,基数排序】超详细~~
  • (poj1.3.2)1791(构造法模拟)
  • (Redis使用系列) Springboot 使用Redis+Session实现Session共享 ,简单的单点登录 五
  • (顶刊)一个基于分类代理模型的超多目标优化算法
  • (二)正点原子I.MX6ULL u-boot移植
  • (含react-draggable库以及相关BUG如何解决)固定在左上方某盒子内(如按钮)添加可拖动功能,使用react hook语法实现
  • (六)c52学习之旅-独立按键
  • (三)终结任务
  • (一)ClickHouse 中的 `MaterializedMySQL` 数据库引擎的使用方法、设置、特性和限制。
  • (转)利用ant在Mac 下自动化打包签名Android程序
  • *1 计算机基础和操作系统基础及几大协议
  • .equals()到底是什么意思?
  • .gitignore文件设置了忽略但不生效
  • .NET Core/Framework 创建委托以大幅度提高反射调用的性能
  • .NET 编写一个可以异步等待循环中任何一个部分的 Awaiter
  • .net 怎么循环得到数组里的值_关于js数组
  • .NET/C# 编译期间能确定的相同字符串,在运行期间是相同的实例
  • .NET6 开发一个检查某些状态持续多长时间的类