专栏首页更流畅、简洁的软件开发方式以【联动列表框】来看单一职责!

以【联动列表框】来看单一职责!

联动列表框,简简单单的五个字,仅仅从字面上看,就可以分出来两个职责:

职责一:列表框

职责二:联动

我们先来看这两个职责,然后再说引申出来的另外两个职责。

职责一,列表框。列表框分为很多种,比如下拉列表框(DropDownList)、列表框(ListBox),还有为了美观用div模拟的,以及RadioBoxList,CheckBoxList等。首先一个问题就是,用哪种列表框,然后是其ID、name等属性的命名规范。然后是列表框是怎么出来的?是写死在body里,还是用js动态创建出来,还是其他的什么方式?

这些都属于列表框的职责。这些都和联动没有任何关系。不联动,他们也都存在。

再来看职责二,联动。联动指的是两个或者多个列表框直接的关联关系,比如常见的省市区县联动。省份的下拉列表框change之后,城市的下拉列表框要显示选择的省份里的城市,城市改变了之后,区县下拉列表框的选项也有随之变化,这就是他们的联动关系。

联动就是说,谁和谁有关系,谁change了,哪个要跟着变化。

接下来看看引申出来的两个职责:页面布局和数据获取

职责三:页面布局。多个列表框如何摆放?是紧挨在一起,还是在各自的td里,还是在div里?还是离着很远(中间有其他字段)?这是页面布局的事情,就是如何办法控件,而一个表单里不仅仅只有联动列表框,还会有文本框、其他列表框等。这些控件如何摆放?

职责四:数据获取。这里特指获取列表框的选项(option、item),因为有的时候一次性全部加载的话,数据量太大,比如省市级联,几百多条数据;省市区县级联,数千条数据;如果是省市区县街道级联,呵呵,一般好像没有这个需求(城市、区县、街道的话,是可以滴)。正因为数据量比较大,所以大多数采用ajax的方式获取,选择辽宁省,就加载辽宁的城市,其他的不加载。

但是如果联动的数据量很小的话,也这么做就有点折腾了,一次性加载也没多少压力,可以避免多次访问,给IIS带来的压力。

那么到底如何获取数据?还有要不要做缓存?都属于这一职责,当然,如果又需要,还可以细分为多个职责。一切看需求、环境,没有固定不变的。

好了,四个职责都说我了,我们来做个假设。假设我做了一个联动列表框,他可以自己动态创建列表框,你输入3,就动态创建三个列表框,你输入10,就创建10个列表框。而且这些列表框可以出现在任意指定的位置,出现在哪里随你指定,还可以自己去获取需要的选项。当然了,联动功能就不必说了。如果我弄出来了个这样的东东,肯定会有人站出来说:这个耦合性太高了,一点都不灵活,不符合某某,违反了某某,blablabla。不信的话可以看我以前发的博文。

把这些职责和在一起,做成一个控件的缺点是啥呢?牵一发而动全身。比如我一开始用的是下拉列表框,后来客户说,面积太小看这不方便,换成列表框吧,这个面积的,一次可以看到多个选项,不想下拉列表框,用鼠标点一下才能看到其他的选项。那么怎么办呢?我要改联动列表框。但是这个需求变化,和“联动”有啥关系?

再比如,我一开始是把所有选项都一次性加载到页面,然后change的时候,筛选出来需要的数据作为选项。在局域网里面没啥问题,但是到了外网,速度就很慢,客户不干了要改。咋办呢?改成ajax的吧。我又的去改联动列表框,但是这个和联动有啥关系呢?

再比如,我一开始是把几个联动列表框挨在一起,一个挨一个,省市联动是没啥事了。但是后来遇到个需求,两个列表框离着挺远,中间隔着几个控件,咋办呢?我还得改联动列表框,但是同上的问题。

这就是让一个控件负责多个职责的缺点。

那么分开来有啥好处呢?

我可以写一个js,专门负责动态创建各种列表框,比如下拉列表框等等。

在写一个js,专门负责数据提取。

再来一个js,专门负责表单里的控件的布局。

最后一个js,就是负责联动。

这样分开来之后呢,职责就明确多了,联动部分做好了之后就不用去改了(前提是接口设计的合理、健壮)。而且还很容易分工,我可以找四个人,一人负责一部分,四人一起开发,提供开发速度。

就着联动列表框,说了说单一职责,也顺带提了几嘴开闭和低耦合。其实这几个都是相辅相成的。一个做好了,其他的也就自然而然了。

 ps:写了两个多小时,才写了这么点字,速度太慢了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【自然框架】n级下拉列表框的原理

      其实原理也很简单,分成两个部分,一个是服务器端,一个是客户端。   首先要设置记录集,这里用DataSet来装载,二级联动,里面就要有两个DataTable...

    用户1174620
  • 从吉日嘎拉那里学到的……

    多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个。基于jQuery,无限级联动,支持...

    用户1174620
  • 【分享】纯js的n级联动列表框 —— 基于jQuery,支持下拉列表框和列表框,最重要的是n级,当然还有更重要的

    多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个。基于jQuery,无限级联动,支持...

    用户1174620
  • 网站制作相关工信部ICP备案和公安备案的介绍

    由于相关政策和规定的要求,在中国大陆地区服务器或空间存放的网站要开通必须先进行工信部备案的操作,而目前来说,光需做工信部ICP备案还不止,还需要在公安部门做网站...

    天津做网站-美耐思
  • 前端CHROME CONSOLE的使用:测量执行时间和对执行进行计数

    利用 Console API 测量执行时间和对语句执行进行计数。 这篇文章主要讲: 使用 console.time() 和 console.timeEnd() ...

    企鹅号小编
  • 腾讯云网站备案咨询解答:其他问题解答汇总

    腾讯云网站备案类的提问还是很多的,因为不断有人遇到各种情况,所以各种问题层出不穷。但是无论怎么提问也还是都是围绕着网站备案、准备资料、备案过程这几个核心的,所以...

    魏艾斯博客www.vpsss.net
  • 17.12.13日报

    2,找到http://shome.ouchn.cn/ 一直提示验证码出错的bug了。是vc6crt的锅。

    龙泉寺扫地僧
  • 渐进式图像重构网络:像画画一样重构图像

    图像重构(IR)对物理与生命科学领域的图像应用软件来说至关重要,其目的在于根据 ground truth 图像抽取出的的各类信息对图像进行重构。

    机器之心
  • 箱形图和小提琴图

    又称为盒须图、盒式图或箱线图,是一种用作显示一组数据分散情况资料的统计图,因形状如箱子而得名。它能显示出一组数据的最大值、最小值、中位数、及上下四分位数。

    范中豪
  • Teamcenter RAC 查找数据集并获取数据集中文件

    路过君

扫码关注云+社区

领取腾讯云代金券