开发者社区> 乐哉开讲> 正文

对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

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

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

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
28494 0
封装一个优雅的element ui表格组件
现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开。虽然element ui的table组件很好。
4927 0
【转】前端——实用UI组件库
Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: https://github.
2864 0
《Android程序设计》一1.3 SDK的组件
本节书摘来自华章出版社《Android程序设计》一 书中的第1章,第1.3节,作者:G. Blake Meike, Masumi Nakamura,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1685 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20370 0
FrozenJS 针对移动端开发的 js 组件库
什么是FrozenJS FrozenJS 是针对移动端开发的 js 组件库,其依赖 zepto.js 和 FrozenUI。FrozenJS 的所有组件均以 zepto 的插件的形式存在。
2246 0
+关注
乐哉开讲
擅长分布式、微服务、性能优化、源码分析、并发编程、面试经验总结等技能
14
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载