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

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

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,大概需要另一种打包方法。

相关推荐
萌萌哒草头将军17 分钟前
尤雨溪强烈推荐的这个库你一定要知道 ⚡️⚡️⚡️
前端·vue.js·vite
2401_8784545322 分钟前
Vue 核心特性详解:计算属性、监听属性与事件交互实战指南
前端·vue.js·交互
1024小神1 小时前
uniapp+vue3+vite+ts+xr-frame实现ar+vr渲染踩坑记
前端
测试界清流1 小时前
基于pytest的接口测试
前端·servlet
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,自定义组件与第三方 UI 组件库(以 Vant Weapp 为例) (16)
前端·学习·ui·微信小程序·小程序·vue·编程
trsoliu2 小时前
多仓库 Workspace 协作机制完整方案
前端
啦工作呢2 小时前
数据可视化 ECharts
前端·信息可视化·echarts
NoneSL2 小时前
Uniapp UTS插件开发实战:引入第三方SDK
前端·uni-app
trsoliu2 小时前
Claude Code Templates
前端·人工智能
wangpq2 小时前
使用rerender-spa-plugin在构建时预渲染静态HTML文件优化SEO
前端·javascript·vue.js