今天的零基础前端课讲到了一个tab地址切换的菜单,就下面这个东西,
第一眼看起来超级简单,无非是点击上面的title显示下面的菜单,然后点省市区把内容选上去而已。但就是这么个看似简单的东西,今天边讲边写,足足搞了一天。
为什么会这样呢?因为前端就是这样,它的复杂度不在于ui图设计的有多复杂,而在于ui的交互有多么复杂。
////////
开始的时候,我给他们讲,还是先按属性,方法,事件的这三个角度来分析这个需求,做为开发的起点,就画出下面这个东西,以做为思路的开端,
然后依然是按着工厂模式来做,先搞一个构造器,再在prototype上添加方法(我总觉得先用熟练一种设计模式会比较好),然后再相互调用它们。
刚开始的时候,只是dom的生成和一些交互事件的绑定而已,调用一些自己封装的公共方法,代码很简单,
////////
复杂的地方在于,后期的不同情况的操作,
当你选好了地址之后,想要修改地址的时候,你会有三个修改的入口,1,是从省直接重新选择地址;2,是从市开始选;3,是从区开始选。
这时就有一个地址title重新生成的问题了,因为title中的地址是[省,市,区]的一个数组构成的,然后通过循环这个数组生成title中的地址。当你从省、市、区分别修改地址的时候,事实上是在修改保存着地址的数组,...这里算是一个难点。
因为这个地方可以做的非常复杂。此地址“能否配送?有没有货?配送时间多久?这个地方是什么配送公司?。。。”,当然了,在这个例子里,只是地址的修改,但开发思路都是相通的,就看你以后怎么扩展。
////////
还有一些交互上要尽量做到“严密”,例如,
当你修改地址的时候,你选中了某省之后显示城市的列表,那么“区”的tab菜单按钮应该消失,免得你不选“市”而直接去选“区”,这些细节都是属于不实际开发就不会有感受的东西。
所以说,实际的开发比单纯的学js技术要重要的多。而这个东西最终做完的时候,它的js结构变成了这样,
这还是写的比较“啰嗦”的代码,里面还有些细节可以再提炼,但从对前端新人的易读性上来考虑,就先写成这样吧。