一看就会,超有用活字格技能:一百八十八、页面级变量存储
本帖最后由 Grayson.Shang 于 2023-10-30 18:19 编辑大家好,最近在做一个功能的时候,遇到了一个感觉比较实用的功能和大家一起分享出来
先说一说我当时的使用场景,之前我有写过一个帖子,是关于手机扫码上传的,大家若是想要了解可以看看这个帖子
PC页面如何快速上传手机问题(手机扫码上传文件)
遇到的问题是,我当时写的帖子,只考虑到一个页面只会做一次手机扫码上传文件,多次上传的情况并没有考虑,有一个客户在使用的时候,一个页面上15个地方需要用到手机扫码上传文件,因为使用的多,为了设计方便就通过组件来完成,我当时也参加了这个设计以及优化
因为当时做的扫码上传需要生成一个GUID,在上传完成之后,页面或接收到GUID,会根据GUID填到单元格上,但是页面上有15个接收的地方,我到底需要传到哪一个单元格,这就需要进行记录了,比如GUID1对应单元格1,GUID2对应单元格2。
那么问题就来了,我应该在哪里进行记录,因为是页面级别的记录,打开页面使用才会记录,关闭页面就会消失,这就是今天要讲的内容,页面级Map
1. 那么记录在数据表,或者服务端缓存中显然是不合适的,因为并不需要持久化存储,浪费服务器的资源——PASS
2. 不用后端,又是类似于缓存,就想到了前端缓存,但是查了一下前端的缓存有一个问题,那就是这个是整个应用级别,但是使用起来也会比较大,虽然生成的GUID是唯一的,一般也不会重复——PASS
TIP:这里再科普一个小知识点,前端这个缓存,若是应用是在浏览器打开,是存储到localstorage中的,localstorage有一个缺陷,那就是自己不主动去清除存储的话,会被持久化存储到客户端,也就是浏览器打开应用所在机器上,会占用硬盘存储,虽然占存储可以忽略不计,不过除非真正是应用级别的,尽量还是少用。
再说一句,这个重置客户端缓存,是可以清除掉存储到localstorage的数据的,若是可以清除,尽量使用上
3. 前面所说的,是找已经存在的功能来实现,但是已有的方法会有一些问题,那么就想到了JS,通过自己写代码来实现,活字格的每一个页面,都可以上传一个JavaScript的文件,在这个文件中定义JS变量,在页面上所有的JavaScript命令中中都是可以引用到的
看起来好像是可行的,首先文件是上传在页面上的,定义的变量也是页面级别的,关闭页面同样变量会注销,这一些都是符合要求的。
但是在真正使用的时候,发现这个并不好用,因为页面上其他地方想要使用这个变量,首先需要先使用设置变量命令定义一个变量,调用一下JavaScript命令将这个全局变量的值放在前面定义的变量上,若是想要设置回去,又需要调用JavaScript命令,使用起来并不方便。
当然虽然并不方便,但除了麻烦一些,若是没有更好的方案,是可以使用的,抱着这样的心态,我找其他人问问有没有更好的方案,他(David)给了一个
让我毅然决然的将这个方案放弃了——PASS
4. 现在就是我要讲的方案了——表格
之前也确实没有想到可以使用表格来做页面级全局变量,直接说说使用思路,
一般我们在使用表格的时候,都是会绑定数据表,并且绑定字段的,既可以做数据预览也可以做数据查看
而这个方法,就是表格的另一个使用,一个另类的Map
1) 在页面上创建一个表格,不要绑定数据源,只有两列,建议不要对这两列进行合并,直接使用原始的,并分别给两列设置好列名,可以根据需要自行变动,也可以设置成固定的(Key-Value)
2) 到这其实方法就已经呼之欲出了,那就是对表格进行操作
1. 查询——在表格中查询是否存在某一个key,使用的是页面上VLOOKUP公式,当然XLOOKUP公式也是可以的
2. 添加——使用表格操作(添加),向表格中添加(key-value)
3. 更新——使用表格操作(更新),根据key值,对value进行更新
4. 删除——使用表格操作(删除),根据key值,删除对应的表格数据
具体使用,我就不截图,在demo中有,在发这个帖子之前,本来想要通过组件包装这个功能,以便更好的使用,组件并没有提供外部命令的接口,只能通过值变更来触发,使用起来并不方便,就放弃了。
到这里页面级Map变量就已经讲完了,其实页面级变量大家应该都经常使用,比如说页面上某一个隐藏的单元格放的值就是,布置过Map使用单元格并不好用,而是通过表格来实现的。
页:
[1]