对select组件的封装

简介: 引言:在我们平时开发过程中,可能都会使用到下拉框这个组件,里面的值要么是动态的,要么是静态的,但是方便日后的维护,大多数都会将他配置成代码项封装成集合,通过遍历,生成动态的数据,这个数据都是从跳转的控制器以集合的形式带过来,这会导致每写一个select都要从后台把这个集合带过来吗,然后再去遍历,这从代码的设计角度来看,非常的臃肿,很难实现低耦合,除非下拉框里面的数据是业务中产生的数据,不得不这样做。

引言:

在我们平时开发过程中,可能都会使用到下拉框这个组件,里面的值要么是动态的,要么是静态的,但是方便日后的维护,大多数都会将他配置成代码项封装成集合,通过遍历,生成动态的数据,这个数据都是从跳转的控制器以集合的形式带过来,这会导致每写一个select都要从后台把这个集合带过来吗,然后再去遍历,这从代码的设计角度来看,非常的臃肿,很难实现低耦合,除非下拉框里面的数据是业务中产生的数据,不得不这样做。接下来就讲述下我的简单封装:

引用方式:我只需要使用select组件,然后再model属性中添上我们对应代码项中的编码就可以了,

具体实现的逻辑

首先在所有的页面引入以下的js,可以将这段js放在一个公用的js里面,就不需要我们单独的调用了,这里面主要通过遍历页面中所有class为model的组件,然后以此遍历,拿到model属性对应的值也就就代码项编码,这里是("MKGL"),通过使用ajax请求到后台的controller里拿到代码项的集合,通过json返回来之后,在进行解析遍历生成动态的下拉框值,由于这里使用的是bootstrap select组件,在拼接好option之后需要进行组件的刷新。这样就可以了

主要的js片段

最后我们看看对应后台模块,这个controller可以写在通用的controller下,后台拿到model之后,直接去代码项的表中寻找这个集合,由于我这里是放在ehcache缓存里面的,我直接从缓存中取出来的,不过逻辑都一样的,然后以json格式返回到前台进行解析。

selectcontroller

到这里,小小的封装就做好了,功能简单,但很使用,希望大家能喜欢,虽然说不要重复造轮子,但是我觉得对自己做的东西进行小小的封装,也是对日后的开发提供一种便利。

感谢大家能看到这里,文中讲的不正确的地方,欢迎在下方留言,我会及时修正。

欢迎大家关注我的公众号,会不定时更新技术干货。

相关文章
|
Web App开发 移动开发 前端开发
|
Android开发
Android获取设备状态栏status bar高度的正确姿势
Android获取设备状态栏高度的正确姿势 正确代码方式: int height = 0; int resourceId = getApplicationContext().
7062 0
|
SQL 弹性计算 关系型数据库
HTAP数据库 PostgreSQL 场景与性能测试之 3.1 - (OLAP) 大表JOIN统计查询-10亿 join 1亿 agg
标签 PostgreSQL , HTAP , OLTP , OLAP , 场景与性能测试 背景 PostgreSQL是一个历史悠久的数据库,历史可以追溯到1973年,最早由2014计算机图灵奖得主,关系数据库的鼻祖Michael_Stonebraker 操刀设计,PostgreSQL具备与Oracle类似的功能、性能、架构以及稳定性。 PostgreSQL社区的贡献者众多
2210 0
|
10月前
|
存储 安全 算法
阿里云平台WoSign SSL证书,轻量化助力网站安全合规
阿里云WoSign SSL品牌证书可通过SSL/TLS协议的加密认证机制,建立安全的网络连接并校验通信方的真实身份,从而实现网络传输的保密性、完整性,确保通信双方身份可信。部署证书文件到服务器端,帮助等保二级及以上信息系统以及关键信息基础设施信息系统,履行等保安全通信设计技术要求,轻量化助力网站数据传输安全合规建设。
297 3
|
11月前
|
供应链 算法 安全
深度解析区块链技术的分布式共识机制
深度解析区块链技术的分布式共识机制
533 0
|
JavaScript IDE 开发工具
找不到模块“./App.vue”或其相应的类型声明。ts(2307)
这篇文章介绍了在Vue 3 + TypeScript + Vite开发环境中解决找不到`.vue`文件模块或其类型声明错误的两种方法:使用VSCode的TypeScript Vue Plugin (Volar)插件或手动在`env.d.ts`文件中声明`*.vue`模块类型。
1991 1
找不到模块“./App.vue”或其相应的类型声明。ts(2307)
IBSS、BSS和ESS之间的区别
【8月更文挑战第23天】
1232 0
|
前端开发 JavaScript 安全
使用JavaScript实现动态表单验证(上)
使用JavaScript实现动态表单验证
|
存储 数据处理 数据安全/隐私保护
深度分析:EDPB数据主体权利-访问权指南摘要及合规建议
本文对EDPB发布的数据主体权利-访问权指南《Guidelines 01/2022 on data subject rights - Right of access(Version 2.0)》(下称“01/22号指南”)的要求进行提炼,旨在为需要满足GDPR的出海企业提供参考。
499 0
|
存储 大数据 云计算
云计算和大数据以及两者的区别
云计算大数据是现在比较热门的词,其具体应用领域也比较多,很多人对于云计算和大数据二者分不清,什么是云计算大数据?大数据和云计算有什么区别?大家可以看看下文来详细了解下。
2305 21
云计算和大数据以及两者的区别