对select组件的封装

引言:

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

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

具体实现的逻辑

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

主要的js片段

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

selectcontroller

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

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

作者：乐哉码农
链接：https://www.jianshu.com/p/8499d8a33f52