前端开发就是这样，“看似简单的东西，反而会很复杂。”

今天的零基础前端课讲到了一个tab地址切换的菜单，就下面这个东西，

第一眼看起来超级简单，无非是点击上面的title显示下面的菜单，然后点省市区把内容选上去而已。但就是这么个看似简单的东西，今天边讲边写，足足搞了一天。

为什么会这样呢？因为前端就是这样，它的复杂度不在于ui图设计的有多复杂，而在于ui的交互有多么复杂。

////////

开始的时候，我给他们讲，还是先按属性，方法，事件的这三个角度来分析这个需求，做为开发的起点，就画出下面这个东西，以做为思路的开端，

然后依然是按着工厂模式来做，先搞一个构造器，再在prototype上添加方法（我总觉得先用熟练一种设计模式会比较好），然后再相互调用它们。

刚开始的时候，只是dom的生成和一些交互事件的绑定而已，调用一些自己封装的公共方法，代码很简单，

////////

复杂的地方在于，后期的不同情况的操作，

当你选好了地址之后，想要修改地址的时候，你会有三个修改的入口，1，是从省直接重新选择地址；2，是从市开始选；3，是从区开始选。

这时就有一个地址title重新生成的问题了，因为title中的地址是[省，市，区]的一个数组构成的，然后通过循环这个数组生成title中的地址。当你从省、市、区分别修改地址的时候，事实上是在修改保存着地址的数组，...这里算是一个难点。

因为这个地方可以做的非常复杂。此地址“能否配送？有没有货？配送时间多久？这个地方是什么配送公司？。。。”，当然了，在这个例子里，只是地址的修改，但开发思路都是相通的，就看你以后怎么扩展。

////////

还有一些交互上要尽量做到“严密”，例如，

当你修改地址的时候，你选中了某省之后显示城市的列表，那么“区”的tab菜单按钮应该消失，免得你不选“市”而直接去选“区”，这些细节都是属于不实际开发就不会有感受的东西。

所以说，实际的开发比单纯的学js技术要重要的多。而这个东西最终做完的时候，它的js结构变成了这样，

这还是写的比较“啰嗦”的代码，里面还有些细节可以再提炼，但从对前端新人的易读性上来考虑，就先写成这样吧。