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

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

职责一:列表框

职责二:联动

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

职责一,列表框。列表框分为很多种,比如下拉列表框(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 条评论
登录 后参与评论

相关文章

来自专栏QQ音乐技术团队的专栏

Material Design技术分享

  因项目需要接触了近一个月的Material Design,之前只觉得它美丽而神秘,真正接触起来发现确实不错。针对这段时间做个小总结,也给广大战友们分享点踩坑...

4656
来自专栏极乐技术社区

『教程』微信小程序canvas辑合(教程+Demo+跳坑)

社区里有一群canvas爱好者,比jsh5css,安静的小智,jeffer等同学他们在canvas方面都有着自己的学习心得和见解。 但是极乐叔发现在小程序开发学...

1.4K9
来自专栏知晓程序

开发 | 小程序如何快速适配 iPhone X?

但是,由于 iPhone X 的「异型」屏幕,以及底部的「小白条」的存在,不少开发者都头疼应该如何适配这块略显奇怪的屏幕。

2614
来自专栏玉树芝兰

Markdown懒办法排版微信公众号文章

写微信公众号的人群里面,不乏十分勤奋者。看看他们使用的排版工具,便知道为了排版一篇文章,他们要耗费多少辛劳了。

2382
来自专栏小狼的世界

Axure制作Tab切换效果

axure 作为一款原型工具,能够帮助我们快速的设计原型,从而将产品人员的想法快速准确的传递给技术人员。

1443
来自专栏镁客网

发福利!越狱插件可以将iPhone6升级到6s

2064
来自专栏程序人生 阅读快乐

《CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation》谢郁(作者)mobi

想象一下,一个网页只有HTML,没有CSS,那就是素颜和上妆的区别。而一个网页只有CSS,没用CSS 3,那就是马车和汽车的区别!汽车代表的是高效、美观,CSS...

1373
来自专栏進无尽的文章

产品动效的福音,AE 动画直接变原生代码

在产品的开发中有时候需要一些动态效果,或者动画。如果全部让程序员用代码生成,可能发费的时间就很多了,并且有些动效是很难做出来的,比如超出了API支持的动画效果。...

3292
来自专栏知晓程序

你发的朋友圈为什么会被折叠?| 晓技巧

1362
来自专栏知晓程序

独特独特最独特!用这个小程序在微信里送祝福,一定不会重样

日常生活中每个人都是设计师。有意或者无意,习惯或者突然,经常或者偶尔的行为,让我们创造出各种各样精彩的设计。

1144

扫码关注云+社区

领取腾讯云代金券